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

Event View Component

Explore building an event view component in Angular by setting up routing and navigation with AuthGuard. Learn to write unit tests using Router for redirection and integrate the component within an event module.

We'll cover the following...

Now that our calendar is working correctly, we’re ready to navigate users to an event view page to show additional details about that event.

Setup and routing

Start by creating a new component, EventViewComponent, within our existing event directory.

ng g component event/event-view
Terminal 1
Terminal
Loading...

With this command, the CLI created our new component within src/app/event. It also added our component to the declarations within EventModule.

CREATE src/app/event/event-view/event-view.component.css
CREATE src/app/event/event-view/event-view.component.html
CREATE src/app/event/event-view/event-view.component.spec.ts
CREATE src/app/event/event-view/event-view.component.ts
UPDATE src/app/event/event.module.ts

Below is our ...