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.