CODEWITHSUNDEEP
angularionic2ionic3
niroice
niroice

Reputation: 163

Ionic 3 - *ngIf binding not updating when condition changes

I currently trying to develop my own custom component and having issues trying to get the component to show when a boolean condition changes to true.

I have tried using "ChangeDetectorRef" and use "detectChanges()" after changing the boolean status. Unfortunately, I keep getting provider error:

Error: No provider for ChangeDetectorRef!

I have used changeRef in pages with no issue. I really don't understand why it needs provider for a component when its suppose to be built into Ionic modules by default?

I have also tried using changeRef.detectChange() on the page instead, there is no provider error - but the component still does not show.

Custom component:

import { Component, Injectable, NgZone, ChangeDetectorRef } from '@angular/core';

    @Component({
      selector: 'options-popup',
      templateUrl: 'options-popup.html'
    })

    @Injectable()
    export class OptionsPopup {

        public showOptionsMenu:Boolean = false;
        public optionsMenu: {
            header:string,
            options: { iconURL: any, label:string, tapAction: string }[]
        };

        constructor( private changeRef: ChangeDetectorRef) {

        }

        public create( optionsMenu: { header:string, options: { iconURL: any, label:string,
                tapAction: string }[] } ){

            this.optionsMenu = optionsMenu;
        }

        public present(){

            this.showOptionsMenu = true;

            this.changeRef.detectChanges();

            console.log("present clicked - set to " + this.showOptionsMenu);
        }

        public dismiss(){
            this.showOptionsMenu = false;
            // this.cdRef.detectChanges();
        }

    }

Component HTML:

<div class="options-container" *ngIf="showOptionsMenu">
    <div class="options-header-wrapper"> Send Images to:</div>
    <div class="options-content" >

        <div class="options-item-wrapper" *ngFor="let option of optionsMenu.options">
            <div class="options-kiosk-icon" [style.background-image]="option.iconURL" 
            *ngIf="option.iconURL != null"></div>
             {{ option.label }}
        </div>

    </div>
    <div class="options-cancel-wrapper">Back</div>
</div>

<div class="options-screen-overlay" *ngIf="showOptionsMenu"></div>

Page using component:

 public createSelectIKPopover(){    
        let options: { iconURL: any, label:string, tapAction: string }[] = [];    
        options.push( { iconURL: null, label: "IK01", tapAction: "" } );    
        this.optionsPopup.create( { header: "", options: options });    
        this.optionsPopup.present();    
        this.changeRef.detectChanges();
    }

Upvotes: 2

Views: 1860

Answers (2)

theriddle2
theriddle2

Reputation: 418

You should use the the Angular service ngZone for this.

this.ngZone.run(() => {
    this.optionsMenu = optionsMenu;
});

Upvotes: 3

Prithivi Raj
Prithivi Raj

Reputation: 2736

Put condition as *ngIf="showOptionsMenu == true" and check

Upvotes: 0

Related Questions