Angular 4 ng-show

Question

I need to hide and show a textbox based on the value selected in the drop-down.

This is already done in Angular 1, but how to do it in Angular 4.

<div ng-app ng-controller="Controller">
    <select ng-model="myDropDown">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
    </select>

    <input ng-show="myDropDown=='two'" type="text">
</div>


function Controller ($scope) {
    $scope.myDropDown = 'one';
}

Fiddle in Angular 1

Solution 1

You can use [hidden]

[hidden]="myDropDown !=='two'"

STACKBLITZ DEMO

Solution 2

ng-show/ng-hide does not supported for angular 2 and above. So you can use [hidden] as ng-show/ng-hide or use *ngIf as ng-if in above angular 2 .

try *ngIf instead of ng-show

<input *ngIf="myDropDown=='two'" type="text">

DEMO

Solution 3

*ngIf involves manipulation of DOM. I have seen [hidden] not working many times. My suggestion Create two classes hide and show

.hide{
visibility:hidden;
}
.show{
visibility:unset;
}

use [ngClass] as per your requirement.

[ngClass]="{'hide' : hideDiv, 'show' : !hideDiv}"