Show Hide text in Angular2

Show Hide text in Angular2


Hello, welcome to In this post, I will tell you How to Show Hide text in Angular2? Nowadays Angularjs is very popular and known as one page website. I am familiar with Angular 1 very well but Angular 2 is totally different with Angular 1. Angular2 is totally command based.

Here is the HTML code and you need to add this app.component.html file:

<button (click)=”test()”>Show Text</button>
<button (click)=”test2()”>Hide Text</button>
<p *ngIf=”test_div”>
test button clickek!!

Here is the typescript code and you need to add this app.component.ts file:

// Initialize variable false(boolean) in angular 2
test_div = false;

//Text Show Function
this.test_div = true;
//Text Hide Function
this.test_div = false;

There are many more code in Angular2 and i will let you know all. Please do comment if you any query related to this post. Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL