Events, Show Hidden Elements


Here’s another version of an earlier question, simplified as I got no response to the other one.

Any help greatly appreciated!

Here’s the html:

<ion-card id="saveMessageCard" [hidden]="NoTaskSaved"> <h3 id="saveMessage">Target saved in memory, press save to customize and return task to the server</h3> <button (click)="saveTask()">Save</button> <button (click)="cancelTask()">Cancel</button> </ion-card>

And the event JS:

this._events.subscribe('task:created', () => { this.task = this._browserService.getBrowserTask(); if (this.task.address !== "") { this.NoTaskSaved = false; console.log("No Task Saved is set to: " + this.NoTaskSaved ); } });

My question is: why is the hidden property not changing when the event is fired? The variable this.NoTaskSaved is declared in the constructor with global scope. The event fires. The variable changes. The html does not.

I’m sure this is really basic but I cannot for the life of me work out what’s going on here…



Should anyone come across this, I’ve sidestepped it by using some simple JS:

let elem = document.getElementById('saveMessageCard'); = "display: block !important";

But this doesn’t seem very Ionic 2-like! I’d love to know why ‘this’ scope is so odd in the callbacks for events.

1 Like