how to handle angular ngIf on boolean condition

Question

I have a google map on my project, I have made control position for the button like this:

map: any;
mapReady(event: any) {
  this.map = event;
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('open'));
  this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('Settings'));
}

I have buttons like this:

<button mat-mini-fab class="shadow bg-light" style="margin-top: 10px !important;" [hidden]="hideOpen" id="open"
    (click)="openbtn()" *ngIf="open_btn">
    <mat-icon>menu</mat-icon>
</button>

<button mat-mini-fab class="shadow bg-info" style="margin-top: 10px !important; margin-left: 30px;"
    [hidden]="hideSettings" id="Settings" *ngIf="!open_btn">
    <mat-icon class="text-white">4k</mat-icon>
</button>

Initially, the first button will be visible, second is hidden, when I click on the first button I should display the second button.

I have tried this:

open_btn: boolean = true;
close_btn: boolean = false;
openbtn(){
  this.open_btn = false;
  this.close_btn = true;
}

Either use *ngIf or [hidden] attribute. If you're using both, then both need to adjusted to show the element. So in the event handler you also need to include hideSettings = false. — Barremian
– Barremian, Commented Jul 30, 2020 at 12:01
@MichaelD I have tried by removing the [hidden] on the both buttons, but it didn't worked. — kumkum kumkum
– kumkum kumkum, Commented Jul 30, 2020 at 12:09
If you remove the [hidden] then it should work - stackblitz.com/edit/… — andsilver
– andsilver, Commented Jul 30, 2020 at 12:14

StPaulis · Accepted Answer · 2020-07-30 12:44:53Z

1

As already @yash told, If you remove the [hidden] property it works just fine.

https://stackblitz.com/edit/ng-if-buttons-erufv9

answered Jul 30, 2020 at 12:44

StPaulis

2,9441 gold badge19 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

how to handle angular ngIf on boolean condition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related