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:

// The imports
import { Component } from '@angular/core';

//The component decorator
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

// The component logic
  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.