angular4 page changes dynamiclly according to some attribute

Question

HTML file:

<div [hidden]="isshow">
  <h1>this is a</h1>
</div>
<div [hidden]="!isshow">
 <h1>this is b</h1>
</div>

component.ts:

  public get isshow() {
    return (this._state === 'ready');
  }

The state value is changed by an EventListener, and will change from "connecting" to "ready".

What I want is to show "this is a" at the beginning then change to "this is b" when state is "ready", but looks it doesn't work. What should I do? Thanks in advance.

try this:

this is a

this is b

– Fateh Mohamed Nov 24 '17 at 07:55 — Fateh Mohamed, Nov 24 '17 at 07:55
Getting data from getter is not exactly calling a function. – Patryk Brejdak Nov 24 '17 at 08:02 — Patryk Brejdak, Nov 24 '17 at 08:02

Fateh Mohamed · Answer 1 · 2017-11-24T08:38:39.533

0

i think your display:none is override in your style use *ngIf instead

<div *ngIf="isshow">

edited Nov 24 '17 at 08:38

answered Nov 24 '17 at 08:30

Fateh Mohamed

20,445
5
43
52

score 0 · Answer 2 · answered Nov 24 '17 at 08:37

0

Change your html to the following:

<div *ngIf="isshow">
  <h1>this is a</h1>
</div>
<div *ngIf="!isshow">
 <h1>this is b</h1>
</div>

You can refer to this answer to see the differences: https://stackoverflow.com/a/43034841/3329836

answered Nov 24 '17 at 08:37

Jamie Rees

7,973
2
45
83

SebOlens · Answer 3 · 2017-12-07T19:47:27.920

Just a piece of advice here. Due to some internal shenanigans angular does with it's change detection system it's better not to use getter for binding. Your

 public get isshow() {
    return (this._state === 'ready');
  }

will be called everytime your component checks for changes (just put console.log there before return (this._state === 'ready'); and you'll see)

it's better to use a pipe or just put the condtion this._state === 'ready' in your binding and this way it'll be called only when this._state actually changes

The same is also true for functions bound to your fields i.e you shouldn't use them in bindings

score -1 · Answer 4 · answered Nov 24 '17 at 08:14

Try to add [hidden] { display: none; } in your stylesheets (remember it should be added globally). I'm not sure why, but it's kinda look like missing in Angular or there is some problems with it. I've found some old issues about it, but they are closed long time ago, but in plunkr it helped.

angular4 page changes dynamiclly according to some attribute

this is a

this is b

4 Answers4