How do I implement HTML+CSS Templates into my angular project?

Viewed 461

I am trying to add a table template from this website https://colorlib.com/wp/css3-table-templates/ to my angular application but can not figure out where I need to store the files in order to be able to access them from my angular application.

First of all, I'd like to apologize in advance if my question seems to be rather basic. This is my first time coding anything web-related and also my first time using angular.

In my project, I've set up a web API with asp.net to handle database access. You can send get requests and the server will reply with a bunch of employee data depending on your request. This is working just fine.

In order to display the data, I decided to write an angular application. Getting the data from the server wasn't an issue. Since I've never worked with html or css before, displaying the data in a decent-looking way proved to be rather difficult though. The tables that I've written look quite sad (I am aware of angular material, also using it, just don't want their table).

This is when I decided that I would like to add someone else's table into my application. This custom table obviously has a bunch of folders that it references in the html file. When the application runs it is looking for those files in localhost:4200/filepath where filepath references the css files, scripts or html files. Right now it is throwing a

404 not found exception

because I can not figure out where to put my files in order to make them visible for this localhost folder. First I tried tracking the localhost folder down by checking which scripts are shown in the browser and where they are stored. Unfortunately these scripts are stored in several different folders so apparently, my idea of this single localhost folder was too naive? Next, I tried putting the template data into src/assets of my application because I read that this way they will be publicly accessible.

I expected the files to show up when I go to my application at localhost:4200 and inspect the sources. Nothing shows up though which is why the 404 error makes sense, it simply can not find the files.

I don't know if this information is relevant but I set up my angular project by creating a web API in visual studio 2017 and afterwards went to that project's location with the command line and generated the angular project (same name as the web API project) with the Angular CLI.

I would really appreciate it if someone could help me out and tell me how to get these files from the template into my application's source so that my HTML table template can access the necessary files and be displayed.

Thanks for your time

Edit: My assets folder looks like the following

+-- assets
|   +-- table
|   |   +--css
|   |   +--fonts
|   |   +--images
|   |   +--js
|   |   +--vendor

and in my angular.json file the asset array looks like this

"assets": [
          "src/favicon.ico",
          "src/assets"
        ]

After reading the angular documentation regarding assets, I expected to be able to build the project and see the copied files under the folder dist which is my outputPath. However, I still can not generate those files.

1 Answers

Put files in the assets folder and mention that folder in angular.json file like i.e.:

"assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
Related