How to remove and add dropdown values based on the condition selected by another dropdown in angular?

My requirement: I have to create a form row that has two select dropdowns and add and delete button at last 1. the first dropdown will have a list of values for ed.. ['one', 'two', 'three','four'] 2. the second dropdown will have the condition ['and','or']

let say the first row of the form value selected like ['one'] ['and'] then clicking on the add button then the second row will create. here first dropdown should not show the 'one' value because the condition is 'and'. if user select or then it should all the values. similary for all the rows i have to create logic in angular.

HTML Code:

<div class="state-filter-conditions-grid subs-model-sec filter-grid" *ngFor="let filterCondition of filters;  index as i">
  <!-- OUTPUT PROPERTY -->

    <ng-container *ngTemplateOutlet="filterView == 'subscription'? attrs: map; context: { index: i }"></ng-container>


  <!-- CONNECTOR CONDITION -->
  <div class="dt-attr valueCondition ctrl-condition minimal">
    <div class="abs-cheveron select-box-cheveron">
      <select class="state-select" [(ngModel)]="filters[i].op">
        <option *ngFor="let val of op" [value]="val"></option>
      </select>
    </div>

  </div>
  <!-- INPUT -->
  <ng-container *ngTemplateOutlet="filterView != 'subscription'? attrs: map; context: { index: i }"></ng-container>
  <!-- SELECT -->
  <div class="dt-attr icons center-align">
    <select class="ctrl-condition" *ngIf="!(i==filters.length-1)" [(ngModel)]="filters[i].logop" (change)="operatorChange(filters[i])">
      <option *ngFor="let val of logop" [value]="val"></option>
    </select>

  </div>
  <!-- ICONS -->

  <div class="dt-attr icons center-align">
    <button *ngIf="i==filters.length-1" class="add-btn" (click)="addStateConditionRow()"><i
        class="fa fa-sm fa-plus add-icon" aria-hidden="true"></i></button>
    <button *ngIf="i>0" class="delete-btn" (click)="deleteStateConditionRow(i)"><i
        class="fa fa-sm fa-trash delete-icon"></i></button>
  </div>
</div>

<ng-template  #attrs let-i="index">
  <div class="dt-attr ">
    <ng-container *ngIf="!dataProps">
      <input class="ctrl-attr" type="text" [(ngModel)]="filters[i].value">
    </ng-container>
    <ng-container *ngIf="dataProps">
      <select class="value-select" [(ngModel)]="filters[i].value">
        <option *ngFor="let data of dataProps" [value]="data.attrId"></option>
      </select>
    </ng-container>
  </div>
</ng-template>

<ng-template  #map let-i="index">
  <div class="dt-attr ctrl-condition minimal">
    <input class="ctrl-attr" type="text" clickOutside (clickOutside)="closeAccordion($event)" (click)="openAccordion($event)" [(ngModel)]="filters[i].attribute">
    <div *ngIf="showAccordion" class="state-filter-accordion" style="position: absolute;
    top: 105%;
    width: 100%;z-index:1">
      <app-common-accordion-mapping [filterInputRef]="filterInputRef" [inputAttributes]='inputAttributes' ></app-common-accordion-mapping>
    </div>
  </div>
</ng-template>

can you guys help me to achieve this.

Thanks in advance.

from How to remove and add dropdown values based on the condition selected by another dropdown in angular?