Data Binding — Angular Technical Interview Questions & Answers

Data Binding

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.
  class.name ──{{ }}──► text
  class.saving ──[disabled]──► input
  click ──(click)──► save()
  input ◄──[(ngModel)]──► name

Technical Interview Tip: Name four bindings + one tiny form.

Code Examples for Data Binding

Data Binding — working 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.

How to Explain Data Binding to an Interviewer

Name the four data bindings.

Interpolation Property Event Two-way

What does ngModel need?

FormsModule