Angular DOM Events

Learn how to create a new component using Angular CLI and render it within an existing component.

We'll cover the following

Creating and styling the user details component

Our application already has an app component and a header component that are rendered to the DOM using the <app-root> and <app-header> HTML tags.

Let’s now create a user-details component in the same manner and see how we can render material icons and then trap the DOM event when a user clicks on one of these icons.

We will start by creating the component using the Angular CLI as follows:

ng generate component user-details

With this command, we have specified that the Angular CLI should generate a component named user-details. The Angular CLI will generate the following four files that we will need for our component:

  • user-details.component.scss
  • user-details.component.html
  • user-details.component.ts
  • user-details.component.spec.ts

It will also update the app.module.ts file to include our new component in the declarations section.

Let’s now include this component in our header component by adding the following to the header.component.html file:

Get hands-on with 1200+ tech skills courses.