Angular - How to prevent ngIf from destroying the component every time the condition changes-CodePudding

I have this code :

<ng-container *ngFor="let language of languages">
      <app-fields-to-translate
        *ngIf="language.ID === selectedLanguage.ID"
        [AttributeGroupsCollapses]="AttributeGroupsCollapses"
        [AttributeGroups]="AttributeGroups"
        [Attributes]="Attributes"
        [categoriesCollapsed]="categoriesCollapsed"
        [generalCollabsed]="generalCollabsed"
        [selectedLanguage]="selectedLanguage"
        (CategoriesCollapsedEmmiter)="categoriesCollapsed = $event"
        (CollapseGeneralEmmiter)="generalCollabsed = $event"
        (AddFieldToTranslation)="AddFieldToTranslation($event)"
        (AddAttrubuteToTranslation)="AddAttributeToTranslation($event)"
      >
      </app-fields-to-translate>
    </ng-container>

and every time the selctedLanguage changes the component of (field-to-translate) being destroyed Can I prevent this process? or is there another way to do this stuff?

CodePudding user response：

Depending on what your business logic does exactly, you could use [hidden], ie

[hidden]="language.ID !== selectedLanguage.ID"