Angular · Theory

Components

Theory

6/43

Components

A component is one screen piece: decorator @Component, a class, a template. selector: 'app-student-card' lets you write <app-student-card> in a parent.

Inputs come in with @Input(). Outputs go out with @Output() EventEmitter. Parent owns the data. Child displays and asks. Don’t let the child rewrite the parent’s array in place.

Board: <app-student-card [student]="row" (save)="onSave($event)">. That is components talking. Trap: one giant AppComponent with 400 lines of HTML.

Diagram

Parent
    │ [student]
    ▼
  StudentCard
    │ (save)
    ▼
  Parent.onSave

Exam tip

Selector + @Input/@Output. Parent owns data.

Example

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

@Component({
  selector: "app-hello",
  template: `<h1>Hello {{ name }}</h1>`,
})
export class HelloComponent {
  name = "Angular";
}

Components — @Component ties a class to a selector + template.

Short notes

Def@Component + class + template. One job.
Rule@Input in, @Output out. Parent owns data.
TrapGod AppComponent.
ExStudentCard.

Angular · Theory

Components

← All stacks

Theory

6/43

Components

A component is one screen piece: decorator @Component, a class, a template. selector: 'app-student-card' lets you write <app-student-card> in a parent.

Inputs come in with @Input(). Outputs go out with @Output() EventEmitter. Parent owns the data. Child displays and asks. Don’t let the child rewrite the parent’s array in place.

Board: <app-student-card [student]="row" (save)="onSave($event)">. That is components talking. Trap: one giant AppComponent with 400 lines of HTML.

Diagram

Parent
    │ [student]
    ▼
  StudentCard
    │ (save)
    ▼
  Parent.onSave

Exam tip

Selector + @Input/@Output. Parent owns data.

Example

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

@Component({
  selector: "app-hello",
  template: `<h1>Hello {{ name }}</h1>`,
})
export class HelloComponent {
  name = "Angular";
}

Components — @Component ties a class to a selector + template.

Short notes

Def@Component + class + template. One job.
Rule@Input in, @Output out. Parent owns data.
TrapGod AppComponent.
ExStudentCard.

Components

Example

Short notes

Questions

Components

Example

Short notes

Questions