Angular · Theory

Templates

Theory

7/43

Templates

The template is HTML plus Angular extras: {{ }}, *ngIf, *ngFor, (click), [class]. It should stay readable. Heavy if/else belongs in the class, not in a 20-line {{ }} expression.

Meera prints {{ s.name }} and *ngIf="s.marks >= 40". That’s a template. Trap: calling a heavy method in {{ getTotal() }} every change-detection cycle — it runs too often. Use a pipe or a field.

Exam tip

{{ }} + *ngIf + (click). No fat expressions.

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;
  }
}

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

Short notes

DefHTML + bindings + structural directives.
RuleKeep expressions tiny.
TrapHeavy methods inside {{ }}.

Angular · Theory

Templates

← All stacks

Theory

7/43

Templates

The template is HTML plus Angular extras: {{ }}, *ngIf, *ngFor, (click), [class]. It should stay readable. Heavy if/else belongs in the class, not in a 20-line {{ }} expression.

Meera prints {{ s.name }} and *ngIf="s.marks >= 40". That’s a template. Trap: calling a heavy method in {{ getTotal() }} every change-detection cycle — it runs too often. Use a pipe or a field.

Exam tip

{{ }} + *ngIf + (click). No fat expressions.

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;
  }
}

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

Short notes

DefHTML + bindings + structural directives.
RuleKeep expressions tiny.
TrapHeavy methods inside {{ }}.

Templates

Example

Short notes

Questions

Templates

Example

Short notes

Questions