in this exercise we will create a project in angular and create a component
1) we will create a project in angular following this tutorial
2) generates the following file structure
3) navigate to the src-> app folder and edit the following file app.component.ts
we add the class and a property called title
export class AppComponent {
title = 'App Components';
}
4) we add the import of the angular core component class
import { Component } from '@angular/core';
5) add the decorator Component to the created class
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
6) the final code would be like this
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'App Components';
}
7) in the modules file, we must import the class so that it can be used in the project
8) We edit the template that we relate to the component
<div>
<h3>{{ title }}</h3>
</div>
10) in the general index file of the application that is located in src/index.html
We see that the selector is defined in our component, so that the component will be rendered in this section of the application
11) We execute the project with the command ng serve --open and we see the result, we see that in the yellow part is the title of the index.html file, and in the red part is what we have in the App component
