Monday, November 28, 2022
HomeC#High 7 Options of Angular 14

High 7 Options of Angular 14


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.

Angular DataGrid in Angular 14 app

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 boardsassist portal, or suggestions portal. We’re at all times completely satisfied to help you!

Thanks for studying this weblog!

Associated blogs

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments