'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