Angular component property view not updating when function emits output event

Question

Angular component variable is not updating in the view if the component method generates an output event. Variable in focus is 'qMode',

Function with generating output event (NOT UPDATING VARIABLE)

save() {
    if (this.questionForm.valid) {
        this.question.type = this.questionForm.value.type;
        this.question.description = this.questionForm.value.description;

        this.qMode = 'view';

        this.saveQuestion.emit({
            index: this.index,
            question: this.questionForm.value,
        });
    }
}

Function without generating output event (UPDATING VARIABLE)

save() {
    if (this.questionForm.valid) {
        this.question.type = this.questionForm.value.type;
        this.question.description = this.questionForm.value.description;
        this.qMode = 'view';
    }
}

Please find here Code Demo,

In the attached stackblitz, save is never called. When should it be called? — nipuna-g, Aug 29 '18 at 04:14
Please check if you've linked the latest version of the example. Right now, line 12 in the ts file is an input and the HTML file does not have 12 lines. — nipuna-g, Aug 29 '18 at 04:40

score 1 · Accepted Answer · answered Aug 29 '18 at 05:00

When you call emit on saveQuestion, this triggers the parent component to update the question list.

Since you don't have a track by value set, this re-renders the list. In the questions component onInit, the value is changed back to 'edit'.

You can fix this by adding a track by function to the list. This ensures that the components re-renders only when there is a change.

in app-component.html

<div *ngFor="let question of questions; let i = index; trackBy: trackQuestion">

in app-component.ts

trackQuestion(index: number, question) {
    return index.toString();
    // you can implement custom logic here using the question
}

You can find a stackblitz example here: https://stackblitz.com/edit/angular-fdshce

Angular component property view not updating when function emits output event

1 Answers1