How to install Angular 14?
Angular 14 could be installed via npm using the next flag.
Simply open a new command line interface and run the following command to install the latest version of Angular:
npm install --global @angular/cli@next
This will install the latest version of Angular CLI globally on your development machine. You can also hire angular developer for installation need.
Check the angular CLI version using below command
ng version
Angular 14 Features
1. Standalone Components
With the release of Angular 14, standalone components will, at last, be a feasible option, and Angular modules will no longer be required.
A standalone component is not declared in any existing NgModule, and it directly manages its own dependencies (instead of having them managed by an NgModule) and can be depended upon directly, without the need for an intermediate NgModule.
Key Points
- Standalone component has the flag "standalone" we need to set the value true.
- Not Required to add the standalone component in ngModule.
- We can import the required modules in the component itself.
- Command,
2. Typed Forms
The most common request for an Angular feature on GitHub is for strictly typed forms, which, would improve the framework’s model-driven approach to the process of dealing with forms.
Key Points
- This feature is only for reactive forms.
- For using this feature tsconig.js should be in strict mode.
- Typed forms ensure that the values inside of form control, groups and array are type safe across the entire API surface.
- This helps developer for generating safer forms and it helps in case of complex nested object.
- If you want to use the older version you can use the untyped version.
E.g. create a contact us standalone component and add 4 fields in it (name, number, email, message) and import ReactiveFormsModule in it as shown below,
3. Streamlined page title accessibility (Title Strategy)
Your page title shows the content of your page differently when you are developing applications. In Angular 13, the entire process of adding titles was streamlined with the fresh Route.title property in the Angular router. However, Angular 14 doesn't have more additional imports needed when you are adding a title to your page.
Go to the routing module where we define our routes now. We have a feature to add the title in the route and implement the TitleStrategy by extending the approuting module as shown.
4. Extended developer diagnostics (ng compilation)
This feature from Angular v14 delivers an extendable framework that assists better insights into your templates and offers suggestions for potential boosts. . It also checks the syntax error in our component like in contact us component you remove the reactive
E.g. you type the wrong command like ng sevre then it will give suggestion for right commands
5. Bind to protected component members
In v14, you can now bind to protected component members directly from your templates, thanks to a contribution from Zack Elliott!
6. Optional Injectors in Embedded Views
v14 adds support for passing in an optional injector when creating an embedded view through ViewContainerRef.createEmbeddedView
and TemplateRef.createEmbeddedView
. The injector allows for the dependency injection behavior to be customized within the specific template.
This enables cleaner APIs for authoring reusable components and for component primitives in Angular CDK.
7. NgModel OnPush
And finally, a community contribution by Artur Androsovych closes a top issue and ensures that NgModel changes are reflected in the UI for OnPush components.
I have two components: the first one is a simple child component with some input and basic support of [ngModel]
directive via ControlValueAccesor
interface. The second one is a parent component that has onPush
change detection strategy and populates a value into child component via [ngModel]
directive (right after that it's marked for changes via ChangeDetectorRef
class). When [ngModel]
is updated child component still displays an old value in the template while the component object has actual value in target property.