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()'>

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

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

'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