CODEWITHSUNDEEP
htmlangularangular-ng-if
Swoox
Swoox

Reputation: 3740

ngIf not working

I'm using ngIf in a parent template. There I have the following code.

In html:

<button *ngIf="saveButton" type="button" class="button-success" (click)="save()">Save</button>
<add (setSavebutton)="setSavebutton($event)"></add>

In the component:

private setSavebutton(_boolean: any) {
    this.saveButton = _boolean;
    console.log(this.saveButton);  // true
}
private save() { // save my item set by child }

In my child (add) I do:

@Output() setSavebutton: EventEmitter<any> = new EventEmitter<any>();

 if (this.form.valid) {
        console.log(this.form.valid); // true
        this.setSavebutton.emit(true);
    }

Both console.log return true but my button is not showing.

What am I doing wrong here?

EDIT

I found a work around.. They code of the child is the same.

In parent html:

<button [hidden]="!saveButton" type="button" class="button-success" (click)="save()">Save</button>

Why does the hidden work and the ngIf not?

Upvotes: 1

Views: 1583

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658037

It's not clear from your question where you code is called from. A general workaround:

constructor(private cdRef:ChangeDetectorRef){}

private setSavebutton(_boolean: any) {
    this.saveButton = _boolean;
    this.cdRef.detectChanges();
    console.log(this.saveButton);  // true
}

With more information, it could be possible to suggest how to fix the root cause.

Upvotes: 1

Related Questions