Show and Hide text on clicking a button in Angular?

In this tutorial you will learn how you can create a functionality in which when the user will click on button the text will be hidden and on clicking again on the button the image will be shown.


 

Step 1 -Creating text-toggle Component

First we will generate a component called text-toggle using command ng generate component text-toggle.

After running this command we will be having 3 files 

1 - text-toggle.component.css

2- text-toggle.component.html 

3- text-toggle.component.ts

Step 2 - Creating the interface of application in text-toggle.component.html 


    <ng-template [ngIf]="check">
        <h1>Hello Angular</h1>
    </ng-template>
    
    <button (click)="showHideFunc(btn)" #btn>Hide</button>

Step 2 - Adding the functionality in text-toggle.component.ts


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-text-toggle',
  templateUrl: './text-toggle.component.html',
  styleUrls: ['./text-toggle.component.css']
})
export class TextToggleComponent implements OnInit {
  check:boolean = true;
  constructor() { }

  ngOnInit() {
  }

    showHideFunc(button:any){
      if(button.innerHTML =="Hide"){
        button.innerHTML ="Show";
        this.check = false;
        
      }else{
        button.innerHTML ="Hide";
        this.check = true;
      }
  }
    

}
 

You can check the code here - Click here