I am struggling with the issue of hiding and showing a div based on the value selected from a drop-down list. As a newcomer to Angular technology, I attempted using functions without success. I have heard that simply utilizing (ng-model) could achieve this. Can anyone confirm if this approach is viable in this scenario?
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">Displaying</label>
<input class="form-control" id="productName">
</div>
</div>
`,
directives: []
})
export class App {
constructor() {
setTimeout(() => {
jQuery('.ui.dropdown').dropdown();
}, 1000);)
}
}
My code snippet on Plunker: https://plnkr.co/edit/Mh0yHafi0dmsAynLEQYB?p=preview