Hi everyone !
I recently faced an issue in my personnal development and had to create a new directive to achieve it. I wanted an ngIf directive but rendering the content only once then caching it.
Here is the description of my module, any comment is appreciated has it is my first contribution :
Tested with :
Angular 5 +
Playground : https://stackblitz.com/edit/ngx-cache-if
Why I did this :
By default ngIf diretive render the component each time you want to display it. And destroy it when you hide it. This cause the lifecycle events to trigger multiple time if you display the same content. (An async call made in ngOnInit for example).
The hidden/shown behaviors renders the element at the rendering of the parent component and hide or display it with css. This cause the lifecycle events to be triggered at the rendering of the parent view. If you have multiples components to load in the same view that can cause a large amount of operations if they are computing all at the same time instead of rendering only when needed.
What do you think about it ?