Hide and show on same button angular 2

Question

I'm trying to create a layout with hide/show element when ever clicked on the same button. The reason I am doing this in my page I have lots of buttons and for minimizing the page I am giving an option in the right side slider to choose only the functions they want to use.

example:

In the right slider layout i have the below code
<div class="col-md-6">
<div class="form-group">
<button class="btn cyan" dnd-draggable [dragEnabled]="true" (click)="cam1=1;">CAM 01</button>
</div></div>

when someone clicked on the button my main page should hide or show the cam 01 button.

This is my main page code
<div class="col-md-12">
<div class="col-md-2">
<div class="form-group">
<button class="btn" name="0x10000001"  (click)="mcxAppService.sendNotify($event)" id="0x10000001" value=1 *ngIf="cam1==1">CAM 01</button>
</div>
</div>

With the above code, I'm able to show on click.

The tag angularjs should only be used for Angular 1. Please, do not reject the edit. — Kim Kern
– Kim Kern, Commented Aug 13, 2017 at 11:41

Lukas · Accepted Answer · 2017-03-27 07:12:36Z

1

You can use Event-Binding whether the button should be displayed:

<button class="btn cyan" dnd-draggable [dragEnabled]="true" (click)="cam1=!cam1;">CAM 01</button>

In this case, cam1 should be a boolean. In your main page you can use

<button *ngIf="cam1">Cam 01</button>

However, it would be better to not use ngIf due to performance. It is better to bind to the [hidden]="cam1" property.

answered Mar 27, 2017 at 7:12

Lukas

1671 silver badge11 bronze badges

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

2 Comments

Nidhin Over a year ago

Thank you for the answer. it helped me very much. I have used [hidden] property. thank you

koppor Over a year ago

Note that [hidden] might not work in all cases directly. See stackoverflow.com/q/30744882/873282 for more information.

Panagiotis · Accepted Answer · 2017-07-20 22:45:12Z

0

You can also try this one:

<div ng-init="showButton=true"/>
<div ng-show="showText">Text</div>
<button ng-Click="showText=true;showButton=!showButton" ng-show="showButton">Show</button>
<button ng-Click="showText=false;showButton=!showButton" ng-show="!showButton">Hide</button>

answered Jul 20, 2017 at 22:45

Panagiotis

931 silver badge8 bronze badges

Collectives™ on Stack Overflow

Hide and show on same button angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related