CODEWITHSUNDEEP
javascriptjqueryhtmlcssangular
Deepak Pookkote
Deepak Pookkote

Reputation: 967

Show or hide a content div based upon the selectbox value using Angular2

I'm facing the problem to hide and show a div based upon the value that I choose from the select box. I'm new to Angular technology. I tried it but it's not working by using functions. I got information that i can do it by simply using (ng-model). Is it possible here?

app.ts

//our root app component

import {Component, Directive, ElementRef} from 'angular2/core'

@Component({
  selector: 'my-app',
  directives: [],
  providers: [],
  template: `
    <div>
      <h2>Show Hidden{{name}}</h2>
      <label>Choose</label>
      <select [(ngModel)]="productCategory" name="Select name" class="ui fluid search selection dropdown"> 
                  <option value=""></option>
                  <option value = "YES">Yes</option>
                  <option value="NO">No</option>
      </select>
    </div>
    <br><br>
      <div class="row" id="informationDiv" style="display:none">
                <div class="col-md-3 form-group">
                  <label class="control-label">showing</label>
                  <input class="form-control" id="productName">
                </div>
      </div>

  `,
  directives: []
})
export class App {


  constructor() {
    setTimeout(() => {
      jQuery('.ui.dropdown').dropdown();
    }, 1000);)
  }
}

My plunker code: https://plnkr.co/edit/Mh0yHafi0dmsAynLEQYB?p=preview

Upvotes: 0

Views: 3587

Answers (4)

mahval
mahval

Reputation: 2213

I fixed it on plnkr: https://plnkr.co/edit/Mh0yHafi0dmsAynLEQYB?p=preview

Just add [(ngModel)] and *ngIf like so:

<div>
      <h2>Show Hidden{{name}}</h2>
      <label>Choose</label>
      <select id="me" [(ngModel)]="chosenValue" class="ui fluid search selection dropdown"> 
                  <option value=""></option>
                  <option value = "YES">Yes</option>
                  <option value="NO">No</option>
      </select>
    </div>
    <br><br>
      <div *ngIf="chosenValue==='YES'" class="row" id="informationDiv">
                <div class="col-md-3 form-group">
                  <label class="control-label">showing</label>
                  <input class="form-control" id="productName">
                </div>
      </div>

and add a chosenValue in your TS file:

  chosenValue;

Upvotes: 2

Niladri
Niladri

Reputation: 5962

Add a new property called productCategory in your component class to store the value of [(ngModel)] and then use *ngIf to hide/show the div like below 

export class App {
  name: string = "Ringo";
  names: string[] = ["John", "Paul", "George", "Ringo"]
  productCategory:string = "";
  constructor() {
    setTimeout(() => {
      jQuery('.ui.dropdown').dropdown();
    }, 1000);)
  }
}




@Component({
  selector: 'my-app',
  directives: [],
  providers: [],
  template: `
    <div>
      <h2>Show Hidden {{name}}</h2>
      <label>Choose</label>
      <select [(ngModel)]="productCategory" name="Select name" class="ui fluid search selection dropdown"> 
                  <option value=""></option>
                  <option value = "YES">Yes</option>
                  <option value="NO">No</option>
      </select>
    </div>
    <br><br>
      <div class="row" id="informationDiv" *ngIf="productCategory == 'YES'">
                <div class="col-md-3 form-group">
                  <label class="control-label">showing</label>
                  <input class="form-control" id="productName">
                </div>
      </div>
  `,
  directives: []
})

Here is a link to a updated plunker based on the value of the selectbox

https://plnkr.co/edit/TMoXrf3VWdjYGXFoJLnf?p=preview

Upvotes: 1

user8630951
user8630951

Reputation:

you can refer this. [ngIf directive][1]

[1]: https://v2.angular.io/docs/ts/latest/guide/template-syntax.html#!#ngIf .

Add a click function to the dropdown. set the value in the ts file and get the value to the html. use that value for ngIf condition. like this ==> <div *ngIf="value==yes"> </div>

Upvotes: 1

HaneTV
HaneTV

Reputation: 926

I updated the html of your plunker so your div is showing only if Paul is selected : 

<div>
      <h2>Hello {{name}}</h2>
      <label>Name</label>
      <select #selectt [(ngModel)]="name" name="Select name" class="ui fluid search selection dropdown"> 
        <option *ngFor="#n of names" [attr.value]="n">{{n}}</option>
      </select>
      <div class="row" id="informationDiv" *ngIf="name === 'Paul'">
                <div class="col-md-3 form-group">
                  <label class="control-label">showing</label>
                  <input class="form-control" id="productName"  [(ngModel)]=name>
                </div>
      </div>
    </div>

As a site note you can see that the input (id=productName) is now bound to the selected value

Upvotes: 2

Related Questions