angular web component all states are clear when using *ngIf is false

Question

How to save all states of angular web component if it is false using ngIf?

In angular component, the type is bound to use the form input.

import { Component, Input, OnInit, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';';
import { IConfig } from ../../models/config.model';
import { TYPES_DEFAULT } from '../../constants/data';

@Component({
  selector: 'uis-types',
  templateUrl: './types.component.html',
  styleUrls: ['./types.component.scss']
})
export class TypesComponent implements OnInit {
  @Input() type: IType[] = TYPES_DEFAULT;
  @Input() config?: IConfig;
  
  public type: {
     id: string;
     name: string;
     trigger: string;
  } = {
    id: '',
    name: '',
    trigger: ''
 };

  constructor() {}

  ngOnInit():void {}

}

Package to web component:

import { NgModule, Injector, DoBootstrap } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TypesComponent, TypeModule  } from "./types";
import { createCustomElement } from '@angular/elements';


@NgModule({
  imports: [
    BrowserModule,
    TypeModule
  ],
  entryComponents: [TypesComponent]
})
export class AppModule implements DoBootstrap{
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const typeWeb = createCustomElement(typeComponent, { injector: this.injector });
    customElements.define('type-web', typeWeb);
  }
}

Use web component:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

public showType: boolean = false;

constructor() {}
ngOninit(){}

}

Passing showType to *ngIf to control type component collpase/expand. when showType changes true to false, then to true, if it is angular component and saved all states, but web component is not, the type and config are both clear.

How to save the all status in web component?