Within my codebase, there exists a Parent component that contains multiple instances of the Child component. Each child component dynamically decides whether or not to render its content based on various user settings and other factors.
In the HTML file of parent.component:
<h1 *ngIf="(activeX || activeY || activeZ)">Hello, get started!</h1>
<app-get-started-X [(active)]="activeX">
</app-get-started-X>
<app-get-started-Y [(active)]="activeY">
</app-get-started-Y>
<app-get-started-Z [(active)]="activeZ">
</app-get-started-Z>
In the TypeScript file of parent.component:
...
activeX: boolean;
activeY: boolean;
activeZ: boolean;
...
In the HTML file of get-started-X.component:
<ng-container *ngIf="active">
<h2>Get stared with X tutorial</h2>
Lorem ipsum...
</ng-container>
In the TypeScript file of get-started-X.component:
...
@Input() active: boolean;
@Output() activeChange: EventEmitter<boolean> = new EventEmitter();
...
ngOnInit(): void {
this.active = false;
this.activeChange.emit(false);
forkJoin([
this.settingsStorage.get<boolean | undefined | null>(
KEY_ORG_APP_DESIGN_LAYOUT_SELECTED
),
])
.pipe(
finalize(() => {
this.cdr.markForCheck();
})
)
.subscribe(([setting]) => {
this.active = (setting !== undefined && setting != null) ? setting : true;
this.activeChange.emit(this.active);
this.cdr.markForCheck();
});
}
...