Show and hide in angular 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.

1. Angular js 1 Show and hide
2. Angular js 1 loader

In angular js 1 it was ng-show and ng-hide, and also you can use ng-if as well. Let us check how it is in Angular 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;}

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',
    templateUrl: 'sample.html'
})

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

<div>
    <button (click)="ShowButton()">Show Result</button>
    <button (click)="HideButton()">Hide Result</button>
    <div *ngIf="showSelected">Result Found</div>
</div>

Click on the button and see the result.

Angular 4(+) has capable to do more things using *ngIf. You can write if else conditions in the html itself. For more info check this link : - ngIf in Angular 4(+)

In this article we have discussed about hiding and showing an element using Angular 2(+).

Related Post

1. ng-repeat in angular js 2

2. Angular 2 filter using pipe concept

3. ng-click in angular js 2