What’s New in Angular 14?

1
(No Transcript)
2
Whats New in Angular 14?
Angular 14 Important Features and Examples

• The TypeScript-based web application framework,
  Angular 14, was released on June 2, 2022.
  Compared to earlier iterations of Angular 13,
  Angular 14 is regarded as Angular's systematic,
  pre-planned improvement.
• With new Angular 14 capabilities like stand-alone
  components, which do away with the need for ng
  modules, web app development has become simple
  and rapid.
• Just a quick summary of Angular 14's new
  features. We have developed comprehensive
  information and examples to make dealing with
  Angular development simple for developers.

3
(No Transcript)
4
Angular 14 Features

• As we all are aware of what is Angular, its time
  to explore the Angular 14 features introduced
  officially by the Angular development community.
• Standalone Components
• Typed Angular Forms
• Streamlined Page Title
• Extended Developer Diagnostics
• Banana-in-a-box Error
• Catch nullish coalescing
• Angular CLI Enhancements
• Offline Angular DevTools

5
Standalone Components

• The components are referred to as Angular 14
  standalone components because they are
  independent of any other components.
• The ngModules were a prerequisite for all Angular
  13 and earlier version components. Therefore, you
  must import all such items in the module file if
  you want to utilize or include any more modules,
  pipes, services, or even directories in the
  component.
• However, the situation is fundamentally different
  in Angular 14. How? Let's look at a
  straightforward example of building a solo
  Angular 14 component. First, we'll use the
  command to independently construct one component,
  "HomeComponent".

6

• Standalone Components

7

• ng generate component HomeComponent standalone
• You'll find "standalone true" in the
  HomeComponent file, indicating that this is the
  application's standalone component
• Therefore, you can quickly import any content
  into this component, including services,
  directories, and pipes.
• However, developers can quickly import individual
  services or directories into a given component
  with Angular 14. This standalone component has
  the disadvantage of having an unstable API, which
  increases the risk of possible changes.

8
Typed Angular Forms

• As we all know, Template-Driven and Reactive
  Forms are the norms in Angular. So far, in the
  reactive forms of Angular 13. Imagine you've
  defined a type of reactive form and wish to
  change the value of that form's field. It's
  straightforward, however, because Angular
  exclusively uses the TypeScript programming
  language, it's not a smart practice.

9

• Typed Angular Forms were introduced in Angular 14
  to simplify things for developers. It employs
  rigorously typing and completely avoids the
  Angular Reactive Forms Package's implementation
  of the strict type.
• The Typed forms feature in Angular 14 aims to
  provide type safety for all values contained in
  form controls, groups, and arrays. In particular
  for deeply nested complex scenarios, it aids
  Angular developers in enabling safer forms.
• The great thing about Angular 14 is that if
  developers don't want to use Typed Forms, they
  may use "UnTyped FormGroup."

10
Streamlined Page Title Accessibility
Extended Developer Diagnostics

• It was difficult for developers to modify the
  titles of various pages in the application in
  Angular 13 and the preceding version. With the
  help of the "title" property in Angular 14,
  developers can add the title to each page.

• This Angular 14 functionality is a great benefit
  for Angular developers. For instance, it won't
  throw an error if there is a mistake in any file
  other than the template file. Sounds amazing?
• A framework that can be expanded by the new
  extended diagnostics offers you more information
  about the errors in your templates and makes
  recommendations for how to fix them. Diagnostics
  provide accurate, actionable advice for your
  templates at build time, discovering errors
  before run time.

11
Banana in a box Error

• When dealing with two-way data binding features,
  Angular developers working for AngularJS
  development businesses often employ brackets and
  parentheses.
• Youll get a syntax error by writing () instead
  of (). As () looks like a banana and looks
  like a box, it is represented as banana in a
  box.
• Even though this mistake uses proper syntax, our
  CLI can tell that this is rarely how developers
  intend it. Because of this, we added through
  messaging on this error and instructions on how
  to fix it to the CLI and your code editor in the
  v13.2 release.

12
Catch nullish coalescing on non-nullable values

• In most cases, enhanced diagnostics raise issues
  for (??) - nullish coalescing operators while
  developers are working with Angular templates.
• This Angular 14 feature appears when the
  particular input is "not nullable. When its type
  is undefined or does not include null, to put it
  simply.
• Additionally, the enhanced diagnostic features
  display warnings for ng build, ng serve, and the
  Angular Language Service in real time. The main
  file where developers may deal with fundamental
  configurations and determine whether diagnostics
  should be a warning, error, or suppressed is
  tsconfig.json.

13

• Nullish Coalescing on Non-Nullable Values

14
Angular CLI Enhancements

• With the release of Angular 14, standardized CLI
  argument parsing has given developers more
  uniformity throughout the Angular CLI.
  Additionally, developers are free to add the
  -lower-skewer-case format to each flag.
• With the release of Angular 14, a feature was
  introduced that removed support for deprecated
  camel case arguments and provided support for the
  use of combined aliases.
• ng completion
• ng analytics
• ng cache

15
Angular DevTools is Available Offline and in
Firefox
How To Install Angular 14?

• Keith Li made a community contribution that
  enabled offline use of the Angular DevTools
  debugging extension. Users of Firefox can locate
  the extension under the Mozilla Add-ons section.

• The first step is to install Angular 14 using
  npm. Just execute the following command in the
  CLI.
• D \gt npm install - - global _at_angular/cli_at_next

16
How to Upgrade to Angular 14?
Additional Summary

• To upgrade your Angular application to Angular
  v14, see the guidelines on its official website
  https//update.angular.io/

• With this release, the public Angular 14 roadmap
  has been updated to reflect the state of ongoing
  and upcoming team initiatives and explorations.
• Versions of TypeScript before to 4.6.0 are no
  longer supported.
• FormControl and FormGroup, reactive form types,
  now contain generic type parameters and infer
  stricter types. Existing usages will be migrated
  to new Untyped-prefixed aliases while maintaining
  the current behaviour.
• Be sure to use Node 14.15.0 or a later version.

17
Conclusion

• As we've seen, the developer-friendly features of
  Angular 14 range from typed forms and Angular 14
  standalone components to new primitives in the
  Angular CDK, making it more powerful than ever
  (component dev kit)
• We read through the in-depth descriptions of each
  feature, each of which was illustrated with
  examples, to learn more about the Angular 14
  features.
• With the newest Angular14 version, I hope this
  will assist you with your current or next project.

18
Thank You
Contact Us (91) 991-308-8360 / 1 (912)
528-5566 inquiry_at_albiorixtech.com
For More Information Visit Us At www.albiorixtech
.com