Angular2

Show Hide text in Angular2

Show Hide text in Angular2

390Views

Hello, welcome to therichpost.com. 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!!
</p>

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
test()
{
this.test_div = true;
}
//Text Hide Function
test2()
{
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. Therichpost.com

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. 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

Positive SSL