Templates and Data Binding

<!-- A simple Angular template with various syntax features -->
<div class="hero-profile">
  <!-- Interpolation -->
  <h2>{{hero.name | uppercase}} Details</h2>
  
  <!-- Property binding -->
  <img [src]="hero.imageUrl" [alt]="hero.name">
  
  <!-- Event binding -->
  <button (click)="saveHero()">Save</button>
  
  <!-- Two-way binding -->
  <input [(ngModel)]="hero.name" placeholder="name">
  
  <!-- Template reference variables -->
  <input #heroName placeholder="New hero name">
  <button (click)="addHero(heroName.value); heroName.value=''">Add</button>
  
  <!-- Built-in structural directives -->
  <div *ngIf="heroes.length > 0">There are {{heroes.length}} heroes.</div>
  
  <ul>
    <li *ngFor="let hero of heroes; let i = index; trackBy: trackByHeroId">
      {{i + 1}}. {{hero.name}}
      <button (click)="deleteHero(hero)">X</button>
    </li>
  </ul>
  
  <!-- ngSwitch directive -->
  <div [ngSwitch]="hero.type">
    <p *ngSwitchCase="'warrior'">Warrior specializes in combat.</p>
    <p *ngSwitchCase="'mage'">Mage specializes in spells.</p>
    <p *ngSwitchDefault>Unknown hero type.</p>
  </div>
  
  <!-- Attribute directives -->
  <p [ngClass]="{'special': isSpecial, 'danger': isDanger}">
    This paragraph has dynamic classes.
  </p>
  
  <p [ngStyle]="{'color': textColor, 'font-size.px': fontSize}">
    This paragraph has dynamic styles.
  </p>
  
  <!-- Pipes -->
  <p>Power level: {{hero.power | number:'1.1-2'}}</p>
  <p>Joined on: {{hero.joinedDate | date:'fullDate'}}</p>
  <p>Secret identity: {{hero.secretIdentity | lowercase}}</p>
</div>

<!-- Basic interpolation -->
<h1>{{title}}</h1>
<p>My name is {{name}}</p>

<!-- Interpolation with expressions -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>
<p>The hero's full name is {{hero.firstName + ' ' + hero.lastName}}</p>

<!-- Interpolation with method calls -->
<p>Capitalized name: {{getCapitalizedName()}}</p>

<!-- Interpolation with ternary operators -->
<p>Status: {{isActive ? 'Active' : 'Inactive'}}</p>

<!-- Interpolation in attributes (though property binding is preferred) -->
<div title="{{hero.name}} details">{{hero.name}}</div>

<!-- Basic property binding -->
<img [src]="hero.imageUrl">
<button [disabled]="isDisabled">Save</button>

<!-- Property vs. attribute -->
<!-- Use property binding, not interpolation, for non-string properties -->
<input [value]="username">
<div [hidden]="isHidden">This may be hidden</div>

<!-- Class and style binding -->
<div [class.special]="isSpecial">Special div</div>
<div [style.color]="textColor">Colored text</div>
<div [style.width.px]="width">Sized div</div>

<!-- Binding to custom component properties -->
<app-hero-detail [hero]="selectedHero"></app-hero-detail>

<!-- Property binding (recommended) -->
<input [value]="username">

<!-- Attribute binding (for special cases) -->
<input [attr.aria-label]="ariaLabel">

<!-- Single class binding -->
<div [class.active]="isActive">This is active</div>

<!-- Multiple class binding using ngClass -->
<div [ngClass]="currentClasses">This has multiple classes</div>

// In component
currentClasses = {
  'active': this.isActive,
  'disabled': !this.isEnabled,
  'special': this.isSpecial
};

<!-- Alternative ngClass syntax -->
<div [ngClass]="['bold', 'highlight']">This has array-based classes</div>
<div [ngClass]="getClassMap()">This uses a method to get classes</div>

<!-- Single style binding -->
<div [style.color]="textColor">This text has color</div>
<div [style.font-size.px]="fontSize">This text has size in pixels</div>
<div [style.width.%]="widthPercent">This div has percentage width</div>

<!-- Multiple style binding using ngStyle -->
<div [ngStyle]="currentStyles">This has multiple styles</div>

// In component
currentStyles = {
  'color': this.canSave ? 'green' : 'gray',
  'font-weight': this.isSpecial ? 'bold' : 'normal',
  'font-size.px': this.fontSize
};

<!-- Alternative ngStyle syntax -->
<div [ngStyle]="getStyleObject()">This uses a method to get styles</div>

<!-- Basic event binding -->
<button (click)="save()">Save</button>
<input (input)="handleInput($event)">
<div (mouseover)="showTooltip()" (mouseout)="hideTooltip()">Hover me</div>

<!-- Event object in the handler -->
<input (keyup)="onKeyUp($event)">

// In component
onKeyUp(event: KeyboardEvent) {
  if (event.key === 'Enter') {
    this.submit();
  }
  // The raw DOM event is available
  console.log(event.target);
}

<!-- Common DOM events -->
<button (click)="onClick()">Click</button>
<div (dblclick)="onDoubleClick()">Double-click</div>
<input (focus)="onFocus()" (blur)="onBlur()">
<div (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">Mouse over/out</div>
<form (submit)="onSubmit()">...</form>
<input (keydown)="onKeyDown($event)" (keyup)="onKeyUp($event)">

<!-- Stop event propagation -->
<div (click)="outerClick()">
  Outer div
  <button (click)="innerClick($event)">Click me</button>
</div>

// In component
innerClick(event: Event) {
  // Prevent the event from bubbling up to parent elements
  event.stopPropagation();
  // Handle inner click
  console.log('Inner clicked');
}

outerClick() {
  // This won't run when inner button is clicked
  // because propagation is stopped
  console.log('Outer clicked');
}

<!-- Preventing default behavior -->
<form (submit)="onSubmit($event)">
  <!-- form elements -->
  <button type="submit">Submit</button>
</form>

// In component
onSubmit(event: Event) {
  // Prevent the form from submitting the traditional way
  event.preventDefault();
  // Custom form handling
  this.submitForm();
}

<!-- Parent component template -->
<app-hero-detail 
  [hero]="selectedHero" 
  (saved)="onHeroSaved($event)"
  (deleted)="onHeroDeleted($event)">
</app-hero-detail>

// Child component class
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  template: `
    <div>
      <h2>{{hero.name}} Details</h2>
      <button (click)="save()">Save</button>
      <button (click)="delete()">Delete</button>
    </div>
  `
})
export class HeroDetailComponent {
  @Input() hero: Hero;
  @Output() saved = new EventEmitter<Hero>();
  @Output() deleted = new EventEmitter<Hero>();
  
  save() {
    this.saved.emit(this.hero);
  }
  
  delete() {
    this.deleted.emit(this.hero);
  }
}

<!-- Two-way binding with ngModel -->
<input [(ngModel)]="name" placeholder="name">
<p>Hello, {{name}}!</p>

// To use ngModel, you need to import FormsModule in your module
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  // other module properties
})
export class AppModule { }

<!-- This: -->
<input [(ngModel)]="name">

<!-- Is the same as: -->
<input [ngModel]="name" (ngModelChange)="name = $event">

// counter.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <button (click)="decrement()">-</button>
      <span>{{count}}</span>
      <button (click)="increment()">+</button>
    </div>
  `
})
export class CounterComponent {
  @Input() count: number = 0;
  @Output() countChange = new EventEmitter<number>();
  
  increment() {
    this.count++;
    this.countChange.emit(this.count);
  }
  
  decrement() {
    this.count--;
    this.countChange.emit(this.count);
  }
}

// Using the counter with two-way binding
<app-counter [(count)]="myCount"></app-counter>
<p>Current count: {{myCount}}</p>

<!-- Basic ngIf -->
<div *ngIf="isVisible">This element is sometimes shown.</div>

<!-- ngIf with else -->
<div *ngIf="heroes.length > 0; else noHeroes">
  There are {{heroes.length}} heroes.
</div>
<ng-template #noHeroes>
  <div>There are no heroes.</div>
</ng-template>

<!-- ngIf with then and else -->
<div *ngIf="heroes.length > 0; then heroList; else noHeroes"></div>
<ng-template #heroList>
  <div>There are {{heroes.length}} heroes.</div>
</ng-template>
<ng-template #noHeroes>
  <div>There are no heroes.</div>
</ng-template>

<!-- Basic ngFor -->
<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

<!-- ngFor with index -->
<ul>
  <li *ngFor="let hero of heroes; let i = index">
    {{i + 1}}. {{hero.name}}
  </li>
</ul>

<!-- ngFor with additional variables -->
<ul>
  <li *ngFor="let hero of heroes; 
              let i = index; 
              let first = first; 
              let last = last; 
              let even = even; 
              let odd = odd"
      [class.first]="first"
      [class.last]="last"
      [class.even]="even"
      [class.odd]="odd">
    {{i + 1}}. {{hero.name}}
  </li>
</ul>

<!-- ngFor with trackBy (improves performance) -->
<ul>
  <li *ngFor="let hero of heroes; trackBy: trackByHeroId">
    {{hero.name}}
  </li>
</ul>

// In component
trackByHeroId(index: number, hero: Hero): number {
  return hero.id;
}

<div [ngSwitch]="hero.type">
  <div *ngSwitchCase="'warrior'">
    <app-warrior-detail [hero]="hero"></app-warrior-detail>
  </div>
  <div *ngSwitchCase="'mage'">
    <app-mage-detail [hero]="hero"></app-mage-detail>
  </div>
  <div *ngSwitchDefault>
    <app-unknown-hero-detail [hero]="hero"></app-unknown-hero-detail>
  </div>
</div>

<!-- This: -->
<div *ngIf="isVisible">Content to show</div>

<!-- Is the same as: -->
<ng-template [ngIf]="isVisible">
  <div>Content to show</div>
</ng-template>

<!-- And this: -->
<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

<!-- Is the same as: -->
<ul>
  <ng-template ngFor let-hero [ngForOf]="heroes">
    <li>{{hero.name}}</li>
  </ng-template>
</ul>

<!-- With an object whose properties are class names -->
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}"></div>

<!-- With an array of class names -->
<div [ngClass]="['bold', 'highlight']"></div>

<!-- With a string of space-separated class names -->
<div [ngClass]="'bold highlight'"></div>

<!-- With a method that returns classes -->
<div [ngClass]="getClasses()"></div>

<!-- With an object whose properties are style names -->
<div [ngStyle]="{'color': textColor, 'font-size.px': fontSize}"></div>

<!-- With a method that returns styles -->
<div [ngStyle]="getStyles()"></div>

// highlight.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input('appHighlight') highlightColor: string = 'yellow';
  @Input() defaultColor: string = 'transparent';
  
  constructor(private el: ElementRef) {
    this.setBackgroundColor(this.defaultColor);
  }
  
  @HostListener('mouseenter') onMouseEnter() {
    this.setBackgroundColor(this.highlightColor);
  }
  
  @HostListener('mouseleave') onMouseLeave() {
    this.setBackgroundColor(this.defaultColor);
  }
  
  private setBackgroundColor(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

// Usage in a template
<p appHighlight="lightblue" defaultColor="#f0f0f0">
  Hover over me to see highlighting
</p>

<!-- Basic reference variable -->
<input #nameInput placeholder="Name">
<button (click)="greet(nameInput.value)">Greet</button>

<!-- Reference variable with component -->
<app-counter #counter></app-counter>
<button (click)="counter.increment()">Increment Counter</button>

<!-- Reference variable with directive -->
<form #heroForm="ngForm" (ngSubmit)="submitForm(heroForm)">
  <input name="name" [(ngModel)]="hero.name" required #name="ngModel">
  <div *ngIf="name.invalid && name.touched">
    Name is required
  </div>
  <button type="submit" [disabled]="heroForm.invalid">Submit</button>
</form>

<!-- Simple expressions -->
{{ username }}
{{ user.firstName + ' ' + user.lastName }}
{{ isActive ? 'Active' : 'Inactive' }}
{{ calculateTotal() }}

<!-- Expressions in property binding -->
[disabled]="isSubmitting || !isValid"
[class.active]="isActive && isEnabled"

<!-- Simple statements -->
(click)="save()"
(change)="username = $event.target.value"
(submit)="submitForm(); logSubmission()"

<!-- Statements with event information -->
(click)="deleteHero(hero, $event)"

<!-- Basic pipe -->
{{ value | pipeName }}

<!-- Pipe with parameters -->
{{ value | pipeName:param1:param2 }}

<!-- Chained pipes -->
{{ value | pipe1 | pipe2 }}

<!-- String pipes -->
{{ name | uppercase }}  <!-- Converts to uppercase -->
{{ name | lowercase }}  <!-- Converts to lowercase -->
{{ name | titlecase }}  <!-- Capitalizes first letter of each word -->

<!-- Number pipes -->
{{ price | number:'1.2-2' }}  <!-- Format with 1 integer digit, 2-2 decimal digits -->
{{ price | currency }}  <!-- Format as currency ($123.45) -->
{{ price | currency:'EUR':'symbol':'1.2-2' }}  <!-- Format as Euro (€123.45) -->
{{ percentage | percent:'2.2-2' }}  <!-- Format as percentage (42.42%) -->

<!-- Date pipes -->
{{ birthdate | date }}  <!-- Format as date (Apr 15, 2019) -->
{{ birthdate | date:'shortDate' }}  <!-- Format as short date (4/15/19) -->
{{ birthdate | date:'fullDate' }}  <!-- Format as full date (Monday, April 15, 2019) -->
{{ birthdate | date:'yyyy-MM-dd' }}  <!-- Custom format (2019-04-15) -->

<!-- Other useful pipes -->
{{ object | json }}  <!-- Format as JSON string -->
{{ observable | async }}  <!-- Subscribes to observable and displays latest value -->
{{ array | slice:1:3 }}  <!-- Displays elements from index 1 to 2 -->

// truncate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 100, trail: string = '...'): string {
    if (!value) {
      return '';
    }
    
    if (value.length <= limit) {
      return value;
    }
    
    return value.substring(0, limit) + trail;
  }
}

// Register in a module
@NgModule({
  declarations: [
    TruncatePipe
  ],
  // other module properties
})
export class SharedModule { }

// Usage in a template
<p>{{ longText | truncate:50:'...' }}</p>

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-hero-card',
  templateUrl: './hero-card.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeroCardComponent {
  @Input() hero: Hero;
  
  // This component will only update when:
  // 1. A new Hero object is passed to it (reference change)
  // 2. An event inside this component is triggered
  // 3. Change detection is manually triggered
}

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-data-display',
  templateUrl: './data-display.component.html'
})
export class DataDisplayComponent {
  data: any;
  
  constructor(private cdr: ChangeDetectorRef) { }
  
  loadData() {
    // Some operation that may not trigger change detection
    this.thirdPartyLibrary.getData().then(result => {
      this.data = result;
      // Manually trigger change detection
      this.cdr.detectChanges();
    });
  }
  
  // Other methods to manually control change detection:
  detach() {
    // Detach from change detection
    this.cdr.detach();
  }
  
  reattach() {
    // Reattach to change detection
    this.cdr.reattach();
  }
  
  markForCheck() {
    // Mark component to be checked (for OnPush)
    this.cdr.markForCheck();
  }
}