How to lazy load Syncfusion Angular component style?
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 the "styles" section of the "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's style bundle during the initialization of a 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 };
}
}
Refer to the working sample for additional details and implementation:[Sample]
Conclusion
The style resource of the component is loaded only when that specific component is loaded in the application.
