Components

Relax. We'll talk through this in plain words — no textbook voice.

Component is the most fundamental building block of an Angular application. A component consists of three parts:

• TypeScript Class: the component's logic and data (properties & methods)

• HTML Template: the component's UI

• CSS Styles: styles that apply only to this component

typescript

// user-profile.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent {
  username = 'John Doe';
}

You should see

(Using {{ username }} in the HTML template will display 'John Doe')