title: Remove selected option from dropdown after select
body: <p>I have a scenario that i need to show dropdowns with selected or default values in view if there is any data from API. And i can add new dropdowns using add button. But i have to select value from drop downs only once so it will not repeated.</p>
  
  <p>I am using ngFor loop to show this drop downs and i am using splice method to remove selected options from drop down. And i am facing a issue here that</p>
  
  <p>Example: If i select car 1 from 1st drop down 1 and the 2nd drop down i can not see car 1 but if i go again to drop down 1 and change that option to car 2,<br>
  in drop down 2 i cannot see car 1 and car 2 options because splice deleting those option from that array. </p>
  
  <pre><code>&lt;mat-select required formControlName="productTypeCode"
  
  (selectionChange)="selectType($event.value)"&gt;
                &lt;mat-option&gt;Select&lt;/mat-option&gt;
                &lt;mat-option *ngFor="let type of newarrayvalues"
                            [value]="type.code"&gt;
                  {{type.name}}
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
  
  PriorExperience -&gt; form array for this dropdowns
  
    for (let i = 0; i &lt; this.InvestmentTypes.length; i++) {
          for (let j = 0; j &lt; this.PriorExperience.controls.length; j++) {
            if (this.InvestmentTypes[i].code == this.financialDetailsForm.value.piExperience[j].productTypeCode) {
             // this.removedValues.push(this.newarrayvalues[i])
              this.InvestmentTypes.splice(i, 1);
            }
          }
  </code></pre>
  
  <p>I need to remove only selected values and if i change any dropdown value that should only removed from that array</p>
  
  <p>Please help me with this.</p>