Menu
In my web application I have a "Terms and Conditions" popup that opens by link click in the footer (so it's a core component). Popup comprises of several tabs, each of them is a pretty big template file.
I wonder if it's possible to move tab templates to separate chunk and organize their lazy-loading? I'm not sure if default Angular lazy-loading is acceptable for me because I don't want to have separate route for the popup.
383
define where we want to load our component in the template with the ng-template tag, define its view query through ViewChild decorator, which gives us access to the DOM and defines the container to which the component will be added, finally, dynamic import the component and add it to the container.
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items. module').
Lazy loading is the technique used in optimizing your web and mobile apps, this works by rendering only needed or critical user interface items first, then quietly rendering the non-critical items later. As we build code components the application grows, and the bundle gets very cumbersome in size.
Lazy loading is an important Angular feature that helps to reduce the initial load time since it loads only the necessary files first. Other required modules are loaded on demand when you navigate to their particular route. Now, you can take advantage of this feature to improve your app's load time.
You can wait for the user to click on the link and as soon as Click Event occurs, load the required component in the view. Things to keep in mind:
The terms and conditions component needs to be defined as Entry level component for it's Module or the module where it is used.
entryComponents: [
ChildComponent
],
Make sure to refer to the placeholder in your component and attach the terms and condition component dynamically.
<div>
<ng-template #viewContainerRef></ng-template>
</div>
and
@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;
and create the component dynamically:
createComponent() {
let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
let currentComponent = componentRef.instance;
currentComponent.selfRef = currentComponent;
// to track the added component, you can reuse this index to remove it later
currentComponent.index = ++this.index;
// providing parent Component reference to get access to parent class methods
currentComponent.compInteraction = this;
}
there is an example for you here: https://add-or-remove-dynamic-component-parent-child.stackblitz.io
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
