'Re-rendererd child component on click on button on parent component
I want to re-rendered my child component (app-action-buttons-modele) which has a select when I click on the button.
My parent component :
- HTML
<button type='button' mat-button (click)="addItem()" mat-flat-button color="primary">
Ajouter un élément aux listes
</button>
<app-action-buttons-modele
(addTheme)="addTheme($event)"
[showQuestion]="false"
[supprimer]="false"
[reloadComponent]="test">
</app-action-buttons-modele>
- TS
test : boolean;
addItem(){
const dialogRef = this.dialog.open(QuestionsModalComponent, {
width : "70%",
})
dialogRef.afterClosed().subscribe(() => {
this.test = true ;
});
}
My child component :
- HTML
<ng-container *ngIf="questions$ | async as questions">
<mat-form-field *ngIf="showQuestion" appearance="outline">
<mat-label>Ajouter une question</mat-label>
<mat-select
[(ngModel)]="questionSelected"
>
<mat-option (click)="addNewQuestion(this.questionSelected)" *ngFor="let question of questions" [value]="question">
{{question.titre}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
- TS
@Input() reloadComponent = false
ngOnInit() : void {
this.getQuestions();
}
ngOnChanges() {
if(this.reloadComponent){
this.getQuestions()
}
}
getQuestions(){
this.questions$ = this.questionsServices.get("Question")
}
I tried to add an ngOnChanges event on my child component and when I click on the button, the test data changes, so the child component reloads.
The problem is that when I click on the button, my component is reloaded but I have to click twice to open my select button. Actually, getQuestions() run when I click on my select.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
