Angular 14 was one of the crucial anticipated updates to the enormously in style platform. It was launched in June 2022, and lots of essential and helpful options had been included. This text explains the highest seven options of Angular 14 that each developer ought to know.
Let’s stroll by these options one after the other.
1. Standalone elements, directives, and pipes
In Angular 14, you possibly can create a module-less Angular software utilizing the standalone flag. Proper now, this characteristic is within the developer preview state.
In Angular 13 and older, the NgModule contained element configurations like imports, declarations, pipes, and directives, so there was a necessity so as to add NgModule as a separate file. Nonetheless, in Angular 14, you possibly can create standalone elements with out NgModule.
To allow making a standalone element, you will need to add the standalone flag (standalone: true) contained in the @element decorator and add all of the configurations contained in the decorator. The basis element must be handed as an argument to the bootstrapApplication operate supplied by @angular/platform-browsers.
Seek advice from the next code instance to create a standalone element.
import { Part } from '@angular/core';
import { CommonModule } from '@angular/frequent';
import { bootstrapApplication } from '@angular/platform-browser';
@Part({
selector: 'app-root',
standalone: true,
imports: [
// import standalone Components, Directives, and Pipes
CommonModule // and NgModules
],
template: `
<div>{{identify}}</div>
})
export class SampleComponent {
identify = "Angular 14";
}
// Bootstrap a brand new Angular software utilizing our `SampleComponent` as a root element.
bootstrapApplication(SampleComponent);
2. Typed Angular types
Typed types be certain that the values inside type controls, teams, and arrays are type-safe throughout the whole API floor. This permits safer types, particularly for deeply nested complicated instances. The schematic ng replace supplies backward compatibility in your current types. Syncfusion’s Angular Types elements are suitable with the typed Angular types performance.
Seek advice from the next code to create typed Angular types.
export class SampleComponent {
var contactForm = new FormGroup({
identify: new FormControl<string>('', { nonNullable: true }),
e mail: new FormControl<string>('', { nonNullable: true }),
contactNumber: new FormControl<quantity>(0, { nonNullable: false })
});
}
Syncfusion Angular element suite is the one suite you’ll ever must develop an Angular software quicker.
Discover Now
3. Streamlined web page title accessibility
In Angular 14, we are able to add the router title with none further import on the web page. Seek advice from the next code instance.
const routes: Routes = [{
path: 'home',
component: HomeComponent
title: 'Home page' // <-- Page title
}, {
path: 'about',
component: AboutComponent,
title: 'About page' // <-- Page title
}];
4. Prolonged developer diagnostics
The extendable developer diagnostics characteristic supplies extendable frameworks that assist builders higher perceive the templates and show options for potential enhancements. It helps enhance caching earlier than runtime, present actionable options for a template, and helps diagnose warnings at compile time.
5. Extra built-in enhancements
Angular 14 additionally consists of assist for the newest TypeScript 4.7 launch and now targets ES2020 by default, which permits the CLI to ship smaller code with out paring down options.
6. Bind to protected element members
Now you possibly can bind protected element members straight from the template. Seek advice from the next code instance.
@Part({
selector: 'app-root',
template: '{{ title }}', // Now compiles!
})
export class SampleComponent {
protected title: string = 'Angular 14';
}
This characteristic supplies extra management over the general public API floor of your reusable elements.
7. Optionally available injectors in embedded Views
Angular 14 helps passing in an non-obligatory injector when creating an embedded view by ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView. This injector allows customization of dependency injection conduct inside the particular template.
Seek advice from the next code.
viewContainer.createEmbeddedView(templateRef, context, {
injector: injector,
})
Easy methods to improve to Angular 14
In case you are utilizing Angular 13, run the command ng replace @angular/core@14 @angular/cli@14 to replace all Angular dependencies to Angular 14. Additionally, Angular 14 requires some new conditions to construct an software.
Angular 14 conditions
- Typescript 4.7.
- Node model 14.15.0 or later.
Each property of Syncfusion Angular elements are utterly documented for straightforward entry.
Learn Now
Easy methods to get began simply with Syncfusion Angular 14 elements
Syncfusion Angular packages are distributed in npm because the @syncfusion scoped package deal. Since model 20.2.36, Syncfusion has supplied assist for Angular 14. This part will information you in getting began with the Syncfusion Angular 14 Knowledge Grid.
Putting in the Knowledge Grid element
Use the next command to put in Knowledge Grid packages from the NuGet package deal supervisor.
npm set up @syncfusion/ej2-angular-charts –save
Registering GridModule
Register Syncfusion Angular Grid modules within the software, replace the app.module.ts file as proven under, and import GridModule within the ngmodules.
Seek advice from the next code instance.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the GridModule for the Grid element
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.element';
@NgModule({
//declaration of ej2-angular-grids module into NgModule
imports: [BrowserModule, GridModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Including CSS references
Seek advice from the next code to import the CSS recordsdata within the ../node_modules/@syncfusion package deal folder. This code must be added to [src/styles.css].
@import '../node_modules/@syncfusion/ej2-base/kinds/materials.css'; @import '../node_modules/@syncfusion/ej2-buttons/kinds/materials.css'; @import '../node_modules/@syncfusion/ej2-calendars/kinds/materials.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/kinds/materials.css'; @import '../node_modules/@syncfusion/ej2-inputs/kinds/materials.css'; @import '../node_modules/@syncfusion/ej2-navigations/kinds/materials.css'; @import '../node_modules/@syncfusion/ej2-popups/kinds/materials.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/kinds/materials.css'; @import '../node_modules/@syncfusion/ej2-angular-grids/kinds/materials.css';
Add Knowledge Grid element
Add the Knowledge Grid element within the app.element.ts file. Seek advice from the next code examples.
import { Part, OnInit } from '@angular/core';
@Part({
selector: 'app-root',
template: `<ejs-grid [dataSource]='knowledge'>
<e-columns>
<e-column area='OrderID' headerText="Order ID" textAlign='Proper' width=90></e-column>
<e-column area='CustomerID' headerText="Buyer ID" width=120></e-column>
<e-column area='Freight' headerText="Freight" textAlign='Proper' format="C2" width=90></e-column>
<e-column area='OrderDate' headerText="Order Date" textAlign='Proper' format="yMd" width=120></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public knowledge: object[];
ngOnInit(): void {
this.knowledge = [
{
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
}
];
}
}
See the chances for your self with reside demos of Syncfusion Angular elements.
Strive Now
Run the applying
Serve the applying through the use of the ng serve command, and the output will render within the browser as proven under.
Conclusion
Angular 14 is accessible with an thrilling new set of options to develop functions simpler. This text defined the highest seven options of Angular 14 and the process to create an Angular 14 software with the Syncfusion Knowledge Grid.
Seek advice from the Angular Roadmap to study the long run plans for the platform.
Syncfusion’s Angular UI element library is the one suite you’ll ever must construct an app. It comprises over 75 high-performance, light-weight, modular, and responsive UI elements in a single package deal.
For current prospects, the most recent Important Studio model is accessible for obtain from the License and Downloads web page. In case you are not but a Syncfusion buyer, you possibly can attempt our 30-day free trial to take a look at the accessible options. Additionally, try our demos on GitHub.
In case you have questions, you possibly can contact us by our assist boards, assist portal, or suggestions portal. We’re at all times completely satisfied to help you!
Thanks for studying this weblog!
