Standalone component was introduced along with Angular 14, you can create a module-less Angular application using the standalone flag. Right now, this feature is in the developer preview state.
In Angular 13 and older, the NgModule contained component configurations like imports, declarations, pipes, and directives, so there was a need to add NgModule as a separate file. However, in Angular 14, you can create standalone components without NgModule.
For creating the Syncfusion components in Angular, refer to the getting started documentation.
To enable creating a standalone component, you must add the standalone flag (standalone: true) inside the @component decorator and add all the configurations inside the decorator.
Refer to the following code example to create a standalone component.
import { Component } from '@angular/core';
// import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-root',
standalone: true,
imports: [
GridModule
],
providers: [],
template: `
<h1>
Syncfusion Angular UI Grid!
</h1>
<ejs-grid [dataSource]='data'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
</e-columns>
</ejs-grid>
`
})
export class AppComponent {
public data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
}
];
}The root component should be passed as an argument to the bootstrapApplication function provided by @angular/platform-browsers. Angular 14 allows you to bootstrap the whole application using a standalone component.
Include the bootstrapping code changes in the main.js
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import {bootstrapApplication} from '@angular/platform-browser';
import {AppComponent} from './app/app.component';
if (environment.production) {
enableProdMode();
}
bootstrapApplication(AppComponent);After updating the files, run this application. The component will be render.