Angular - How to show an input based on Dropdown option

Question

I wish to show the input field when "Others" option is selected on dropdown, but can't figure out how to-

Here is my code

   <div class="form-group">
      <label for="college">College:</label>
      <select class="form-control" id="college" ngModel name="college_name" required>
        <option>Ajay Kumar Garg Engineering College</option>
        <option>Others- Please Specify Below</option>
      </select>
    </div>
    <div class="form-group" *ngIf="showfield">
      <label for="name">Enter College Name:</label>
      <input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
    </div>

showfield = false; is set in .ts file

Answer 1

In your component take a variable,

selectedValue: string = '';

Just assign selectedvalue to ngModel and use that value to display text field.

Also, options needs value attribute and it needs value to store in ngModel

<div class="form-group">
      <label for="college">College:</label>
      <select class="form-control" id="college" [(ngModel)]="selectedValue" name="college_name" required>
        <option value="college">Ajay Kumar Garg Engineering College</option>
        <option value="others">Others- Please Specify Below</option>
      </select>
 </div>
    <div class="form-group" *ngIf="selectedValue == 'others'">
      <label for="name">Enter College Name:</label>
      <input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
    </div>