I want to display a dropdown value based on selection of type in another dropdown in angular Basically I have an array of values which I will filer it on the based on type selected which is working fine. below is the code of filtering.

filterMethod(){
if(type === 'P'){
    this.filteredArray = this.relationArray.filter(ele=> this.personValue.includes(ele.name));
  } else{ 
    this.filteredArray = this.relationArray.filter(ele=> this.orgValue.includes(ele.name));
  }
}

And in HTML I'm looping it.

<mat-select formControlName="relation" aria-owns="relationshipSelect">
  <mat-option *ngFor="let rel of filteredArray" [value]="relation.name">
    {{rel.value}}
    ............

This above HTML is basically a child component where user can multiple dropdown when clicked new button. i.e., another dropdown will come next to it and so on...

Here what is happening is after selecting the relation dropdown when user click new button another relation dropdown is coming but the existing relation dropdown value is vanished. If user fires the filterMethod() method the vanished value will come.

I suspect it is because of calling new button new instance will be created and array will be set to its original state.