Angular 18 Features

• Typescript 4.7 Support

  1. Template Literal Typescript
     • Developer can easily define the types of templates and erros fast
  2. Improved readonly support
     • Provide readonly keyword safe way
  3. New Import Types
     • Help to make code more modular, simpler and structured

• Improved performance with Ivy

  1. Improved application performance, reduced build size 30% copare angular V.17 and increased application startup 15%

• New ng-template API

  1. ng-template API the ability to create flexible, reusable and structured template

• Enhanced Form API

  1. Angular V.18 form API provide more control over the form validation process and easily to define form objects and validation rules and ability to manage more complex validatrions scenarios

• Improved debugging tools

  1. Angular V.18 added number of improvements to the debugging tools thats easily debuge angular SPA application using sources map and performance profiles

• Other Features and Improvements

  1. In addition to the features listed above, Angular 18 will also include:
     • Web components support
     • Improved internationalization support
     • A new router API

Types of Directive

1. Component Directive
2. Structural Directive
3. Attribute Directive

• Structural directives shape or reshape the DOM's structure, typically by adding, removing and manipulating the elements to which they are attached.
• Any directive with an * is a structural directive.
  Eg., *ngIf, *ngFor, *ngSwitch, *ngHide, *ngShow

Five common features in angular projects

*ngFor, *ngIf, property Binding [], Event Binding (), Interpolation {{}}

@Input Decorator

The @Input decorator indicates that the property value will be passed in from the component's parent (in the case, the product list component).

Generate routing module

ng generate module app-routing --flat --module=app
--flat puts the file in src/app instead of its own folder.
--module=app tells the CLI to register it in the imports array of the AppModule.

IVY

IVY is new rendering engine produce small bundle size and bazel is new build system.
Enable ivy using cli => ng new angular-project --enable-ivy

Key Parts of Angular

1. Modules
2. Compoents
3. Templates
4. Metadata
5. Data Binding
6. Services
7. Directives
8. Dependancy Injection

JIT vs AOT

Just-in-Time(JIT) => Which compiles your app in the browser at runtime

Ahead-o-Time(AOT) => Which compiles your app at build time

Server Side Rendring (SSR) - Universal Angular

• SSR means render angular application on the server side
• Angular Universal generating static application pages on server which render more quick on browser wihtout bootstrap
• Angular Universal server side static pages fully interactive / dynamic on client side
• Using Angular CLI we can prepare app as SSR
• cmd: @nguniversal/express-engine

HTTP Interceptors

• HTTP Interceptors in angular are classes that implement the HTTPInterceptor interfacse.
• They can be used to perform various tasks related to HTTP requtests and responses, such as adding headers, handling errors, modifying the request or response data, logging, authentication, etc.
• HttpInterceptor define a single method called intercept which takes two parameters: the HttpRequest and the HttpHandler