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
You can use [hidden]
[hidden]="myDropDown !=='two'"
STACKBLITZ DEMO
ng-show/ng-hide
does not supported for angular 2 and above. So you can use[hidden]
asng-show/ng-hide
or use *ngIf asng-if
in above angular 2 .
try *ngIf
instead of ng-show
<input *ngIf="myDropDown=='two'" type="text">
DEMO
*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}"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With