3. Signals and Change Detection

In this lab, you visualize how OnPush and Signals work together.

🔀 Branch: For this lab, please switch to the branch 03-cd-starter:

git reset --hard
git checkout 03-cd-starter

3.1 Visualizing Change Detection

In this part of the lab, you data bind to a blink method that visualizes Angular's data binding behavior.

1. Open the file dessert-card.component.ts (src/app/dessert-card/dessert-card.component.ts) and add a blink method created by injectCdBlink included in the solution:

    import { Component, input, output } from '@angular/core';
    import { Dessert } from '../data/dessert';
    import { RatingComponent } from '../rating/rating.component';
   +import { injectCdBlink } from '../shared/inject-cd-blink';
    
    @Component({
      selector: 'app-dessert-card',
   
   [...]
   
    })
    export class DessertCardComponent {
      dessert = input.required<Dessert>();
   +  blink = injectCdBlink();
    
      ratingChange = output<number>();
   

2. Switch to the file dessert-card.component.html (src/app/dessert-card/dessert-card.component.html) and data bind your blink method:

    ></app-rating>
      </div>
    </div>
   +
   +{{ blink() }}
   

3. Try out your modifications. After searching for desserts but also on every key stroke, Angular is checking the dessert cards.

💾 Please find this lab's solution in the branch 03a-cd-blink (get reset --hard && git checkout 03a-cd-blink). You don't have to switch to it branch, if you are fine.

3.2 Activating OnPush

Now, let's activate OnPush and compare the data binding behavior.

1. Open the file dessert-card.component.ts (src/app/dessert-card/dessert-card.component.ts) and activate OnPush:

   -import { Component, input, output } from '@angular/core';
   +import {
   +  ChangeDetectionStrategy,
   +  Component,
   +  input,
   +  output,
   +} from '@angular/core';
    import { Dessert } from '../data/dessert';
    import { RatingComponent } from '../rating/rating.component';
    import { injectCdBlink } from '../shared/inject-cd-blink';
   
   [...]
   
      imports: [RatingComponent],
      templateUrl: './dessert-card.component.html',
      styleUrl: './dessert-card.component.css',
   +  changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class DessertCardComponent {
      dessert = input.required<Dessert>();
   

2. Also in desserts.component.ts (src/app/desserts/desserts.component.ts), activate OnPush:

    import { JsonPipe } from '@angular/common';
   -import { Component, OnInit, computed, inject, signal } from '@angular/core';
   +import {
   +  ChangeDetectionStrategy,
   +  Component,
   +  OnInit,
   +  computed,
   +  inject,
   +  signal,
   +} from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { Dessert } from '../data/dessert';
    import { DessertFilter } from '../data/dessert-filter';
   
   [...]
   
      imports: [DessertCardComponent, FormsModule, JsonPipe],
      templateUrl: './desserts.component.html',
      styleUrl: './desserts.component.css',
   +  changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class DessertsComponent implements OnInit {
      #dessertService = inject(DessertService);
   

3. Try out your modification. The dessert cards are now only checked when the respective dessert is actually changed.

💾 Please find this lab's solution in the branch 03b-cd-on-push (get reset --hard && git checkout 03b-cd-on-push). You don't have to switch to it branch, if you are fine.

Remarks: For the sake of your and the trainer's sanity, the blink effect is removed in the next lab's branch.