Angular

(2026)

Components

Components are the building blocks of Angular apps. Each component has three parts:

• TypeScript class
• HTML template
• CSS styles

app.ts:

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

@Component({
  selector: 'app-root',
  template: ` Hello, Universe!`,
  styles: `
    :host {
      color: blue;
    }
  `,
})
export class App {}

The TypeScript class defined a component’s behavior.

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

@Component({
  selector: 'app-root',
  template: ` Hello, {{ city }}!`,
  styles: `
    :host {
      color: blue;
    }
  `,
})
export class App {
	city = 'Detroit';
}

Composing Components

How do we use a component? The component’s selector sets the name used to reference it in other templates.