angular *ngIf check if last option in a select tag is selected

Question

I am implementing a survey into my web application and I would like to take advantage of Angular's Forms via FormsModule. In particular, I have a <select> tag that prompts the user to select their favorite fruit. If their favorite fruit doesn't appear in the select, they can choose the 'Other' option and an addition form will appear below prompting the user to enter their favorite fruit. When the user clicks the 'Add' button, their input will be recorded in the global form as if he/she selected it, but it won't appear in the select as an option. I found a nifty way of displaying the user's favorite in the select itself to show that their input was indeed recorded.

Is there a way to display that extra form when the last option in the select is selected, without using a template reference on the manually coded last option. Ideally I would like to use *ngFor to generate ALL the options in the select, but currently I am manually coding the last 'Other' option, that when selected will open another div (via *ngIf).

Here is my fruit-survey.component.html file:

<div class="container">
  <h1>Fruit Survey</h1>
  <form (ngSubmit)="onSubmit()" #surveyForm="ngForm">
      {{diagnostic}}
    <div class="form-group">
      <label for="fruit">What is your favorite fruit?</label>
      <select class="form-control" required [(ngModel)]="model.favoriteFruit" name="favFruit" #favFruit="ngModel">
        <option class="placeholder" selected disabled value="">Select One</option>
        <option class="otherFruitOption" hidden>{{otherFruitOption}}</option>
        <option *ngFor='let choice of fruitChoices'>{{choice}}</option>
        <option #otherFruit>Other</option>
      </select>
    </div>

    <div *ngIf="otherFruit.selected">
      <input type="text" class="form-control" #otherFruitInput>
      <button class="btn btn-success" (click)="(otherFruitInput.value) ? updateSelect(otherFruitInput.value, otherFruit) : ''">Add</button>
      <br />
    </div>

    <button type="submit" class="btn btn-success">Submit</button>
  </form>
</div>

Here is my fruit-survey.component.ts file:

import { Component, OnInit } from '@angular/core';
import { Survey } from './Survey';

@Component({
  selector: 'app-fruit-survey',
  templateUrl: './fruit-survey.component.html',
  styleUrls: ['./fruit-survey.component.css']
})
export class FruitSurveyComponent implements OnInit {

  submitted = false;
  model = new Survey('');
  fruitChoices: string[] = ['Apple', 'Banana', 'Grape', 'Orange', 'Watermelon'];
  otherFruitOption: string;

  get diagnostic() { return JSON.stringify(this.model); }

  constructor() { }

  ngOnInit() {
  }

  onSubmit() {
    this.submitted = true;
  }

  updateSelect(fruit: string, otherFruit: any) {
    fruit = fruit.trim();
    this.model.favoriteFruit = fruit;
    this.otherFruitOption = fruit;
    otherFruit.selected = false;
  }

}

I just started learning Angular a couple of months ago and I know that the way I implemented all of this is 'hacky' and probably not perfect, so any advice on restructuring the code will be a bonus.

Answer 1

You can associate a template reference variable to the select element, and test if selectedIndex corresponds to the last option index:

<select #fruitList ...>
  ...
  <option *ngFor='let choice of fruitChoices'>{{choice}}</option>
</select>

<div *ngIf="fruitList.selectedIndex === fruitList.options.length - 1">
  ...
</div>

See this stackblitz for a demo.