Angular DOM Events

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

...