Skip to main content

Angular components

Components are the building blocks of Angular applications. A component controls a portion of the screen called a view. A component is made up of a TypeScript class, an HTML template, a CSS stylesheet, and a tests file.

Creating a new component​

To create a new component, run the following command in your terminal:

ng generate component my-component

where my-component is the name of your component.

You can also create a new component with the help of your IDE, for example, in WebStorm, you can go to File > New > Angular Schematic, type component and then enter the name of your component.

About the component files​

TypeScript file​

The TypeScript file of a component contains the logic of the component. It contains a class with the same name as the component. The class contains properties and methods that are used in the component. The class also contains a decorator that contains metadata about the component.

HTML template​

The HTML template of a component contains the HTML code of the component. It contains the HTML elements that are used in the component. It can also contain Angular directives and bindings.

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: [ './about.component.scss' ]
})
export class AboutComponent {
}

To declare an Angular component, you need to create a class with the same name as the component. The class should be decorated with the @Component decorator. The @Component decorator contains metadata about the component. The metadata includes the selector, templateUrl, and styleUrls properties.

The selector property specifies the name of the component. The name of the component is used in the HTML template of the component. For example, if the selector property is set to app-about, then the component can be used in the HTML template of another component as follows:

<app-about></app-about>

The templateUrl property specifies the path to the HTML template of the component. It can also be set to an inline template. For example, the following code sets the templateUrl property to an inline template:

@Component({
  selector: 'app-about',
  template: `
    <h1>About</h1>
    <p>This is the about page.</p>
  `,
  styleUrls: [ './about.component.scss' ]
})

The styleUrls property specifies the paths to the CSS stylesheets of the component. It can also be set to inline styles. For example, the following code sets the styleUrls property to inline styles:

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styles: [ `
    h1 {
      color: red;
    }
  ` ]
})

CSS stylesheet​

The CSS stylesheet of a component contains the styles of the component. It may also be a Sass, SCSS, or Less stylesheet.

Tests file​

The tests file of a component contains the unit tests of the component.

Using a component​

To use a component, you need to import it in the module of the application. For example, if you want to use the AboutComponent in the AppModule, you need to import it in the AppModule as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AboutComponent } from './about.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AboutComponent ],
  bootstrap: [ AboutComponent ]
})
export class AppModule {
}

Passing data to a component​

To pass data to a component, you need to use the @Input decorator. For example, if you want to pass the title property to the AboutComponent, you need to add the @Input decorator to the title property as follows:

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: [ './about.component.scss' ]
})
export class AboutComponent {
  @Input() title: string;
}

Then, you can pass the title property to the AboutComponent as follows:

<app-about [title]="title"></app-about>

Nesting components​

You can nest components inside other components. For example, if you want to nest the AboutComponent inside the HomeComponent, you can do it as follows:

<app-home>
  <app-about></app-about>
</app-home>

Angular modules

Modules are used to organize the components of an Angular application. A module is made up of a TypeScript file that contains the imports, declarations, etc of the module.

Creating a new module​

To create a new module, run the following command in your terminal:

ng generate module my-module

where my-module is the name of your module.

tip

When importing a component from a module into another, don't forget to add it to the exports array of the module.

@NgModule({
    declarations: [
        ComponentUsedInAnotherModule
    ],
    exports: [
        ComponentUsedInAnotherModule
    ],
    imports: [
    ]
})