TYPESCRIPT

Angular 12: Trigger multiple child components at once

//Service

@Injectable({
  providedIn: 'root',
})
export class DoSomethingService {
  subject = new Subject<void>();
}

//Parent

export class AppComponent {
  constructor(private doSomethingService: DoSomethingService) {}

  makeSomethingHappen() {
    this.doSomethingService.subject.next();
  }
}
<button (click)="makeSomethingHappen()">CLICK ME</button>

<app-one></app-one>
<app-two></app-two>
<app-three></app-three>

//Children

export class OneComponent implements OnInit {
  message = 'Component one standing by...';
  sub = new Subscription();

  constructor(private doSomethingService: DoSomethingService) {}

  ngOnInit() {
    this.sub = this.doSomethingService.subject.subscribe(() =>
      this.doSomething()
    );
  }

  doSomething() {
    this.message = 'Component one did something!';
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}