The fundamental building blocks of your Angular app are the components. Components consist of 3 elements:
- The imports
- The component decorator, which are various properties for your component. The component decorator includes locations to your component’s template and CSS location.
- The component logic, where your code resides.
Let’s take a look at the component the Angular CLI generated for us to see these 3 areas in action.
Open up /src/app/app.component.ts:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'myapp'; }
As you can see, we have a single import at the top, which is necessary for all Angular components. We also have the @Component({}) decorator, and the component logic at the bottom with the single title property.