Course List page design

The Course List page is located inside the dashboard, i.e., only authenticated and authorized users will have access to this page after logging in.

This is the view part of the application. It’s a page that contains a list of courses we created in the course management application. It also includes the edit and delete icons.

We can begin the design for the Course List page by following the steps below:

Step 1: Generate the course-list component

We can do this using the Angular CLI by running the command below:

ng generate component components/course-list

Our folder structure should look like this:

src > app > components > course-list

Inside the course-list folder, we have the following files generated by the Angular CLI:

  • course-list.component.css
  • course-list.component.html
  • course-list.component.spec.ts
  • course-list.component.ts

Get hands-on with 1200+ tech skills courses.