Angular – Step 3 – Components

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
  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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.