Learn Angular from scratch step by step

Angular 7 Components - Angular 8

The most basic building block of your Angular 7 application (and this is a concept that's not new) is the component. A component consists of three primary elements:

• The HTML template
• The logic
• The styling (CSS, Sass, Stylus, etc..)

When we use the Angular CLI to start a new project, it generates a single component, which is found in /src/app/:

/app.component.html
/app.component.scss
/app.component.ts

While we have three files here that represent the three elements above, the .ts (TypeScript) is the heart of the component. Let's take a look at that file:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ng7-pre';
}

Here, because this is a component, we're importing Component from the @angular/core library, and then it defines what's called a @Component decorator, which provides configuration options for that particular component.

As you can see, it's referencing the location of the HTML template file and the CSS file with the templateUrl property and the styleUrls property.

The logic of the component resides in the class at the bottom. As you can see, the CLI starter template simply defines a single property called title.

Let's use the Angular CLI to create our own components that we'll need going forward. In the console, issue the following commands:

> ng generate component nav
// output

> ng g c about
// output

> ng g c contact
// output

> ng g c home
// output

Notice we first use the full syntax to generate a component, and then we use a shorthand syntax, which makes life a little bit easier. The commands do the same thing: generate components.

When we generate components this way, it will create a new folder in the /src/ folder based on the name we gave it, along with the respective template, CSS, .ts and .spec (for testing) files.