Ad

Show/Hide Div Element Using Drop Down Menu In Angular?

- 1 answer

I am new in Angular. I want to show/hide the file div using drop down (Select) menu.If I choose "custom", it will show File element. But I choose "none", it will hide as well as remove the file (if any) element. I am unable to show the hidden file element. Please provide some feedback?

<div class="form-group">
  <label for="credentials">Credentials</label><br />
  <select name="select_file" class="form-control" required ng-model="myVar">
    <option value="">Choose a option</option>
    <option value="false">none</option>
    <option value="true">custom</option>
  </select>
  <div *ngIf="myVar">
    <input
      type="file"
      class="form-control"
      id="credentials"
      accept=".json"
      [(ngModel)]="userdata.credentials"
      (change)="handleFileInput($event.target.files)"
      name="credentials"
    />
  </div>
</div>
Ad

Answer

    <div class="form-group">
  <label for="credentials">Credentials</label><br/>
  <select name="select_file" class="form-control" required [(ngModel)]="myVar">
    <option value="">Choose a option</option>
    <option value="false">none</option>
    <option value="true">custom</option>
</select>
<div *ngIf="myVar === true">
    <input 
    type="file" 
    class="form-control" 
    id="credentials" 
    accept=".json"
    [(ngModel)]="userdata.credentials"
    (change)="handleFileInput($event.target.files)"
    name="credentials" 
    >
  </div>

You need to use ngModel . In Ts file, just define myVar variable.Please try this code.

Ad
source: stackoverflow.com
Ad