Handling Events with Events Binding


In order to make toggle button to show or hide image, we will make use of Event binding.

Code Structure
<button (click)='toggleImage()'>

where,
'(click)' means target Event
'toggleImage()' is method name

Now, lets add all the code to make toggle button work.


where,
'showImage: boolean = false' means to hide image at first
'toggleImage(): void' means making use of toggle method
'(click)='toggleImage()'' means to call toggleImage() method
'{{showImage ? 'Hide' : 'Show'}} Image' making use of Javascript conditional operator. ie if condition is true, make it will show 'Hide Image' or if condition is false, it will show 'Show Image'
'*ngIf' means making use of if condition to either show or hide image when toggle button is clicked

Share this

Related Posts