Angular 4 ng-show
NickName:SmartestVEGA Ask DateTime:2018-06-04T19:42:16

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

Copyright Notice:Content Author:「SmartestVEGA」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/50679774/angular-4-ng-show

Answers
Sajeetharan 2018-06-04T11:43:25

You can use [hidden]\n\n[hidden]=\"myDropDown !=='two'\"\n\n\nSTACKBLITZ DEMO",


Ramesh Rajendran 2018-06-04T11:46:41

\n 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 .\n\n\ntry *ngIf instead of ng-show\n\n<input *ngIf=\"myDropDown=='two'\" type=\"text\">\n\n\nDEMO",


More about “Angular 4 ng-show” related questions

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. &lt;div ng-app ng-controller="Controller"&gt; ...

Show Detail

Angular ng-show ng-hide animations

I am trying to animate how my ng-show shows with mouseenter and mouseleave. These work fine for Angular 1.2.19 and Angular-animate 1.2.19, and does not seem to work with a newer versions of Angular...

Show Detail

angular directive ng-show not working

I have very stright forward angular code,ng-show directive in the below code not working &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/scri...

Show Detail

Angular: ng-model and ng-show not working

I'm trying to use the ng-show and ng-model directives to toggle a div when a checkbox is selected. I searched for many tutorial and it seems as simple as my following code: &lt;div&gt; &lt;input...

Show Detail

Angular and ng-show not disabling items

I'm having a problem where ng-show isn't working as I'd like it to. Basically, when I click on a given panel, I'd like it to display the information for that tab. I'm trying to control it using ng-...

Show Detail

innerHTML ignores Angular ng-show

I want to a create way to print a section of a webpage, so I created a function called printDiv that takes a div ID and pops up a new window and prints that div's innerHTML. This works, however, the

Show Detail

Angular ng-show not working consistently

The Problem I'm trying to integrate the Adobe Creative SDK into my Angular app. The editor is initialized from a photo viewer modal by clicking a button, which triggers the function below. Once the

Show Detail

Angular: ng-show and functions

Say you have a template like &lt;a ng-show=function()&gt;a link&lt;/a&gt; My question is: when is function run? How can I tell angular that it is time to re-run the function?

Show Detail

Angular ng-show callback

I am trying to get the height of an element which will appear when mouse over of a button. Example code: &lt;div ng-mouseenter="mouseoverPopUp()" ng-mouseleave="showpop=false"&gt;menu&lt;/div&gt;...

Show Detail

Is it possibile to set ng-show by using jQuert attr element in Angular?

I am trying to change the ng-show attribute of an element. But it seems that Angular ignore it. Why? element.attr('ng-show',false) I tried to do scope.$apply, buy still angular ignore this attrib...

Show Detail