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 and can be used in templates like an HTML tag (<app-user />).

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

@Component({
  selector: 'app-user',
  template: ` Username: {{ username }} `, imports: [User]
})
export class User {
  username = 'youngTech';
}

@Component({
  selector: 'app-root',
  template: ``,
  imports: [],
})
export class App {}

Conditionals and Control Flow in Templates

Parts of templates can be executed conditionally with @if and @else.

@Component({
  ...
  template: `
    @if (isLoggedIn) {
      <p>Welcome back, Friend!</p>
    }
  `,
})
export class App {
  isLoggedIn = true;
}

Templates can include a @for loop.

@Component({
  ...
  template: `
    @for (os of operatingSystems; track os.id) {
      {{ os.name }}
    }
  `,
})
export class App {
  operatingSystems = [{id: 'win', name: 'Windows'}, {id: 'osx', name: 'macOS'}, {id: 'linux', name: 'Linux'}];
}

Property Binding

Property binding set the value of HTML elements by wrapping the attribute name in square brackets..

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

@Component({
  selector: 'app-root',
  styleUrls: ['app.css'],
  template: ` <div [contentEditable]="isEditable"></div> `,
})
export class App {
	isEditable = true;
}