@Component({
  selector: 'app-timer',
  template: `<span>Last Updated: {{ lastUpdateInSeconds() | number:'1.0-0' }} Seconds</span> {{ logCd() }}`,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [DatePipe, DecimalPipe, AsyncPipe]
})
export class TimerComponent {
  @Input() lastUpdate = new Date();
  lastUpdateInSeconds = signal(0)
  constructor() {
    setInterval(() => {
      this.lastUpdateInSeconds.set((new Date().getTime() - this.lastUpdate.getTime()) / 1_000);
    }, 1000);
  }

  logCd() {
    console.log('log from timer');
  }
}

Imagine the following requirements for your Angular app:

- Your customer wants a view that displays multiple cards at once.
- A button at the top of the page should toggle the edit mode.
- While in edit mode, all cards are editable at the same time.
- As soon as you click “save” only those cards that actually have been edited are going to send a request to the server.
- If you decide to discard the changes by clicking on “cancel” all cards should be reset to their initial state.

This is a common scenario in any more sophisticated web application. Nevertheless, I just recently discovered a very handy way to handle those requirements in Angular. In this article I want to share my solution, leveraging the @ViewChildren property decorator to implement the Card Composite pattern.