All the code you need can be found here:
https://stackblitz.com/edit/angular-keep-alive-component?file=src/app/app.component.ts
Is it possible to maintain the state of entered values when switching components? I am currently utilizing dynamic component rendering with Component Factory Resolver, but I want to retain entered values when changing components... Is this achievable in Angular 9?
In Vue.js, there is a keep-alive directive for this purpose. Can something similar be achieved in Angular 9 as well?
Here is an example of what I am looking for:
1. Render first component ->
2. Enter some test data in the input field ->
3. Change to the second component ->
4. Return to the first component and see the previously entered 'TEST DATA'
public createComponent(component: number): void {
const currentComponent = this.components[component];
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(
currentComponent as any
);
let viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
let componentRef: any = viewContainerRef.createComponent(componentFactory);
componentRef.instance.outputEventData.subscribe((val: Object | any) => {
if (val) {
this.sendFilter.emit(val);
}
});
setTimeout(() => {
componentRef.instance.destroyComponent.subscribe((val: any) => {
if (val) {
viewContainerRef.clear();
}
});
}, 0);
}
}