If you try to use @ViewChild and your button isn't visible on the page at init time (due to an *ngIf) then the assignment will be null.
You can use a setter in conjunction with @ViewChild, and run your initialization when the button first appears.
@ViewChild('btnAdd')
set btnAdd(btnAdd: Button) { ... }
This quickly gets clumsy and inconvenient - especially if you create an observable stream from this.
A hybrid way might be as follows:
btnAskAnotherClicks$ = new Subject<Event>();
<button mat-flat-button (click)="btnAskAnotherClicks$.next($event)">Ask another question...</button>
This allows you to use the click stream to create chains, but no issues if the button is initially hidden due to *ngIf.
Don't like next
in your template? Neither do I particularly. But I'm ok with async
, and they're both implementation details. Well that's up to you to decide -)