dealing with dynamic components
given this code, how should i close that alert?
that
onHandleError() never gets called :/
//auth.component.html
<app-alert *ngIf="alertHost" (closingEvent)="onHandleError()"></app-alert>
//alert.component.html
<div class="backdrop" (click)="onClose()"></div>
<div class="alert-box">
<p>{{ message }}</p>
<div class="alert-box-actions">
<button class="btn btn-primary" (click)="onClose()">Close</button>
</div>
</div>
//auth.component.html
<app-alert *ngIf="alertHost" (closingEvent)="onHandleError()"></app-alert>
//alert.component.html
<div class="backdrop" (click)="onClose()"></div>
<div class="alert-box">
<p>{{ message }}</p>
<div class="alert-box-actions">
<button class="btn btn-primary" (click)="onClose()">Close</button>
</div>
</div>
//auth.component.ts
@ViewChild(AlertComponent, {static: true}) alertHost!: AlertComponent;
onHandleError(){
console.log("handling error");
this.viewContainerRef.remove();
}
private showErrorAlert(errorMessage: string){
const viewContainerRef = this.alertHost.viewContainerRef;
viewContainerRef.clear();
const alertRef = viewContainerRef.createComponent<AlertComponent>(AlertComponent);
alertRef.instance.message = errorMessage;
}
//auth.component.ts
@ViewChild(AlertComponent, {static: true}) alertHost!: AlertComponent;
onHandleError(){
console.log("handling error");
this.viewContainerRef.remove();
}
private showErrorAlert(errorMessage: string){
const viewContainerRef = this.alertHost.viewContainerRef;
viewContainerRef.clear();
const alertRef = viewContainerRef.createComponent<AlertComponent>(AlertComponent);
alertRef.instance.message = errorMessage;
}
0 Replies