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:

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.

Leave a Reply

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

WordPress.com Logo

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

Google photo

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

Twitter picture

You are commenting using your Twitter 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.