How to lazy load Syncfusion Angular component style?
Overview
This article explains how to lazy load Syncfusion Angular Component style for performance improvement.
Prerequisite
- Node
- Angular CLI
Reason for Lazy loading styles
There might be several components in an Angular application such as Home Component, Contact Component, Admin Component, etc... Loading styles of all these components initially will affect the performance.
But, by loading the styles when the specific component is loaded, you can avoid dumping all CSS resources at once in initial loading.
Creating Angular CLI Application
You can create the angular application using the Angular CLI by referring the following documentation.
Angular CLI Documentation: https://angular.io/cli
Syncfusion Documentation: https://ej2.syncfusion.com/angular/documentation/
Application Structure
We must create two components in the angular application using the “ng generate” command. Created two components in the sample application namely “first” and “second”.
Configuration for Lazy Loading
You must include the following style configuration under “styles” section of “angular.json” file in the root directory of the application.
"styles": [
"src/styles.css",
{
"input": "src/app/first/first.css",
"bundleName": "first",
"inject": false
},
{
"input": "src/app/second/second.css",
"bundleName": "second",
"inject": false
}
],
Loading Component Style
You can load the component style bundle in the initialization of the specific angular component as shown in the following code snippet.
import { Component, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { data } from './datasource';
import { PageSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
public data: object[];
public pageSettings: PageSettingsModel;
constructor(@Inject(DOCUMENT) private document: Document) {}
loadStyle(styleName: string) {
const head = this.document.getElementsByTagName('head')[0];
let themeLink = this.document.getElementById(
'client-theme'
) as HTMLLinkElement;
if (themeLink) {
themeLink.href = `${styleName}.css`;
} else {
const style = this.document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = `${styleName}.css`;
head.appendChild(style);
}
}
ngOnInit(): void {
this.loadStyle('first');
this.data = data;
this.pageSettings = { pageSize: 6 };
}
}
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Lazyloading1991432601
Conclusion
The style resource of the component is loaded only when that specific component is loaded in the application.
