Angular · Theory

Data Binding

Theory

9/43

Data Binding

Four bindings. Interpolation {{ name }} — text out. Property [disabled]="saving" — element property in. Event (click)="save()" — user action in. Two-way [(ngModel)]="name" — both. Say all four in the viva.

Board: name starts empty. Type Asha. [(ngModel)] updates the class. Click Save. (click) runs save(). Don’t mix [value] and [(ngModel)] on the same input.

Trap — using href on a button and wondering why the page reloads. Use (click). FormsModule is required for ngModel.

Diagram

class.name ──{{ }}──► text
  class.saving ──[disabled]──► input
  click ──(click)──► save()
  input ◄──[(ngModel)]──► name

Exam tip

Name four bindings + one tiny form.

Example

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

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Data Binding: toggle open. Say whether the panel is on screen after one click.

Short notes

Def{{ }} [prop] (event) [(ngModel)].
RuleOne binding style per need. Don’t mix on one input.
Traphref reload / missing FormsModule.

Angular · Theory

Data Binding

← All stacks

Theory

9/43

Data Binding

Board: name starts empty. Type Asha. [(ngModel)] updates the class. Click Save. (click) runs save(). Don’t mix [value] and [(ngModel)] on the same input.

Trap — using href on a button and wondering why the page reloads. Use (click). FormsModule is required for ngModel.

Diagram

class.name ──{{ }}──► text
  class.saving ──[disabled]──► input
  click ──(click)──► save()
  input ◄──[(ngModel)]──► name

Exam tip

Name four bindings + one tiny form.

Example

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

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Data Binding: toggle open. Say whether the panel is on screen after one click.

Short notes

Def{{ }} [prop] (event) [(ngModel)].
RuleOne binding style per need. Don’t mix on one input.
Traphref reload / missing FormsModule.

Data Binding

Example

Short notes

Questions

Data Binding

Example

Short notes

Questions