Angular ngStyle show/hide condition not working

Question

I am trying to show hide my navbar on click of an image. On first click it is working, after that it doesn't. Not sure what is wrong. Any help please???

https://stackblitz.com/edit/responsive-menu-angular-material-flex-layout-cm87il

<img id="project-avatar" (click)="toggleNavbar()" width=20, height=20 style="position: relative;" alt="Show Hide Navigation Menu" src="/assets/img/slider_hide.png" />
<div> 

<div class="showHideNavbar" [ngStyle]="displayNavbar == '1' ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
  <mat-toolbar color="primary" >

component.ts

displayNavbar: string;

ngOnInit() {
    this.displayNavbar = '1';
}

toggleNavbar() {

    if(this.displayNavbar == '0') {
        this.displayNavbar = '1';
        alert(this.displayNavbar);
    } if(this.displayNavbar == '1') {
    //    alert("1 - Changing to 0");
        this.displayNavbar = '0';
    } else {
        this.displayNavbar = '1';
    }
}

1) Onload of the page the toolbar should show - it is showing as expected

2) On click of the icon(at top left corner), the toolbar should hide - it is working first time

3) On click of the icon again, the toolbar should display again - it is NOT working

https://stackblitz.com/edit/responsive-menu-angular-material-flex-layout-cm87il

This could be done easier with [hidden] and a boolean flag. Or alternatively *ngIf. — AVJT82
– AVJT82, Commented Jan 25, 2019 at 17:50
@AJT_82: Here is the stackblitz. if you can help me... stackblitz.com/edit/… — SK.
– SK., Commented Jan 25, 2019 at 18:43
As mentioned, here is using [hidden] and boolean flag instead. Much cleaner ;) stackblitz.com/edit/… — AVJT82
– AVJT82, Commented Jan 25, 2019 at 18:49

Derviş Kayımbaşıoğlu · Accepted Answer · 2019-01-25 22:49:13Z

7

change

 [ngStyle]="displayNavbar == '1' ? {'visibility': 'visible'} : {'visibility': 'hidden'}"

to

 [ngStyle]="{'visibility': displayNavbar == '1' ? 'visible' : 'hidden'}"

or

[style.visibility]="displayNavbar == '1' ? 'visible' : 'hidden'"

change toggleNavbar function to

toggleNavbar() {
   this.displayNavbar = (this.displayNavbar == '1') ? '0' : '1'
}

StackBlitz Link

edited Jan 25, 2019 at 22:49

answered Jan 25, 2019 at 17:51

Derviş Kayımbaşıoğlu

30.9k4 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SK. Over a year ago

Thanks for your answer, what you said makes sense... but I am not sure why it is not working for me...

SK. Over a year ago

No, I have no class like that in any of my css

Derviş Kayımbaşıoğlu Over a year ago

It needs to work, It is not about CSS. check this: embed.plnkr.co/jQVoTIpLqP6TeMVlqi6E

SK. Over a year ago

I created this example with the issue. stackblitz.com/edit/…

amul klinton · Accepted Answer · 2019-01-25 19:20:07Z

2

Instead of using 1 and 0 to toggle , try using true or false like the following which will simplify code and render faster

Component.ts

 displayNavbar: string;ngOnInit() {
    this.displayNavbar = false; // on init based on the logic set it to true or false
}

toggleNavbar() {
this.displayNavbar = ! this.displayNavbar; //toggle between true or false dynamically
}

html

  <img id="project-avatar" (click)="toggleNavbar()" width=20, height=20 style="position: relative;" alt="Show Hide Navigation Menu" src="/assets/img/slider_hide.png" />
<div> 

<div class="showHideNavbar" [ngStyle]="(displayNavbar) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">

answered Jan 25, 2019 at 19:20

amul klinton

513 bronze badges

Comments

dmoore1181 · Accepted Answer · 2019-01-25 17:58:27Z

1

Add a property to your typescript file that holds the logic something like the following:

get showNavBar(): boolean {
    return this.displayNavBar === 1;
 }

Then you can use an *ngIf with that property to show or hide an element.

answered Jan 25, 2019 at 17:58

dmoore1181

2,1523 gold badges34 silver badges66 bronze badges

3 Comments

SK. Over a year ago

can you please guide me on that *ngIf part as well ?

Batajus Over a year ago

It's not good practice to call function within html, because it will be called every change detection run, which can be very often

dmoore1181 Over a year ago

@SK. you can do something like this <div *ngIf="showNavBar"> and that div will only be displayed if showNavBar results in true.

Collectives™ on Stack Overflow

Angular ngStyle show/hide condition not working

component.ts

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

component.ts

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related