Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 4 ng-show

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

like image 998
SmartestVEGA Avatar asked Jun 04 '18 11:06

SmartestVEGA


3 Answers

You can use [hidden]

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

STACKBLITZ DEMO

like image 90
Sajeetharan Avatar answered Sep 20 '22 18:09

Sajeetharan


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

like image 33
Ramesh Rajendran Avatar answered Sep 20 '22 18:09

Ramesh Rajendran


*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}"
like image 40
Ashish Santikari Avatar answered Sep 20 '22 18:09

Ashish Santikari