3

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.

Daniel
  • 3,541
  • 3
  • 33
  • 46
Nidhin
  • 167
  • 1
  • 5
  • 26

2 Answers2

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.

Lukas
  • 158
  • 1
  • 10
  • 1
    Thank you for the answer. it helped me very much. I have used [hidden] property. thank you – Nidhin Mar 28 '17 at 05:22
  • Note that `[hidden]` might not work in all cases directly. See http://stackoverflow.com/q/30744882/873282 for more information. – koppor Mar 29 '17 at 16:09
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>
Panagiotis
  • 93
  • 1
  • 8