Search⌘ K
Home
Courses
Learn Front-End Development and Automated Testing with Angular

Events List Module

Understand how to build an Angular feature module for listing events with routing and lazy loading. Learn to integrate the EventsService to fetch data, handle errors, and use dynamic routerLink navigation. Configure guards to protect routes and update your template to display events or messages based on data availability.

We'll cover the following...

Now that our service method has been created, we can create our new feature module.

ng g module events-list --routing
ng g component events-list
Terminal 1
Terminal
Loading...

Here we’ll create a module and component, adding the --routing flag to our module so that the CLI automatically creates our EventsListRoutingModule file.

The first command, ng g module events-list --routing, created two files:

CREATE src/app/events-list/events-list-routing.module.ts
CREATE src/app/events-list/events-list.module.ts

The second command, ng g component events-list, created four files and updated one:

CREATE src/app/events-list/events-list.component.css
CREATE src/app/events-list/events-list.component.html
CREATE src/app/events-list/events-list.component.spec.ts
CREATE src/app/events-list/events-list.component.ts
UPDATE
...