Angular Show Hide Text on Button Click Simple And easy Example

Hello to all, welcome to therichpost.com. In this post, I am going share very basic example, Angular Show Hide Text on Button Click Simple And easy Example.

I am doing this in Angular 6.

Here is the working example Picture:

Here is the complete working code for Angular Show Hide Text on Button Click.

1. Here is the code for app.component.ts file:

import {Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
//public textShow = true;
showText(){
 this.textShow = true;
}
hideText(){
 this.textShow = false;
}
}

2. Here is the code for app.component.html file:

<div class="jumbotron text-center">
  <h3>Angular Show Hide Div On Button Click:</h3>
</div>
<div class="container">
  <h1 *ngIf="textShow">Button Click Show/Hide!</h1>
  <button type="button" (click) = "showText()" class="btn btn-primary">Show text</button>&nbsp;
  <button type="button" (click) = "hideText()" class="btn btn-danger">Hide Text</button>
</div>

 Here you are done and If have any query related to this post, then do ask questions or comment below.