title: How to dynamically add options to a select element in an Angular component?
body: <p>I currently have an Angular component that contains a solutions array that I want users to be able to manually alter. I already have a button that allows users to dynamically add to this array, but I'm trying to implement deletion. I want a select box to be displayed that contains all of the solutions, then when the user clicks one of the options and hits &quot;delete solution&quot;, it will remove that element from the array.</p>
  <p>Currently the html of my component looks as follows:</p>
  <pre><code>&lt;div *ngIf=&quot;logged&quot; class=&quot;solutionsInput&quot;&gt;
            &lt;div&gt;
               New Solution:
               &lt;div&gt;
                 &lt;textarea id=&quot;Solution&quot; [(ngModel)]=&quot;newSolution&quot; placeholder=&quot;None&quot;&gt;&lt;/textarea&gt;
               &lt;/div&gt;
           &lt;/div&gt;
           &lt;button class=&quot;add-solutions&quot; (click)=&quot;addSolutions(defect)&quot;&gt;
               Add Solution
            &lt;/button&gt;
  &lt;!-- BELOW IS THE PART THAT NEEDS TO BE FIXED --&gt;
            &lt;select id = &quot;solutions&quot;&gt;&lt;/select&gt;
            &lt;button class=&quot;delete-solutions&quot; (click)=&quot;deleteSolutions(defect)&quot;&gt;
              Delete Solution
           &lt;/button&gt;
  
        &lt;/div&gt;
  </code></pre>
  <p>The typescript of my component looks as follows:</p>
  <pre><code>defect.solutions = [] //THIS IS WHAT I WANT TO ALTER
  newSolution = &quot;&quot;;
  addSolutions(defect: Defect): void {
      if(this.newSolution !== &quot;&quot;) {
        this.defectService.getSolutionsHelper(defect).subscribe((currSolutions) =&gt; {
          //not necessary to see all of this
          })
        });
      }
    }
  
  deleteSolutions(defect: Defect): void {
     //THIS NEEDS TO BE IMLPEMENTED
  }
  </code></pre>
  <p>Are there any ideas for what I should do? Thank you so much in advance for your help!</p>