Wednesday, March 1, 2017

Show and hide in angular js 2.

We all must be knowing how it was in Angular js 1. Before starting on Angular js 2, if you are interested to know how it was in Angular js 1, you can refer below posts.

In angular 1 it is ng-show and ng-hide, and also you can use ng-if as well. Let us check us how it is in Angular js 2.

One of the way to show and hide is using by [hidden] property


[hidden]="!showSelected"

But it is not the recommended way because it can conflict with css "display:none" property. However you can fix this by adding below css.


 [hidden] { display: none !important;}

But again this may not be the recommended way of doing.

What we can use instead of [hidden].

*ngIf is the best solution for this, let us check how we can show and hide using *ngif


@Component({
  selector: 'my-app',
  template: `<div>
           <button (click)="ShowButton()">Show Result</button>
           <button (click)="HideButton()">Hide Result</button>
           <div *ngIf="showSelected">Result Found</div>
        </div>`,
})

export class AppComponent {
    showSelected : boolean;
    constructor(){
        this.showSelected = false;     
    }
    ShowButton(){
        this.showSelected = true;
    }
    HideButton(){
        this.showSelected = false;
    }
}

Click on the button and see the result.

Related Post

1. ng-repeat in angular js 2

2. Angular 2 filter using pipe concept

3. ng-click in angular js 2

No comments :

Post a Comment