DEV Community: Sandeep Balachandran

⭐Angular 18 Features ⭐

Sandeep Balachandran — Thu, 23 May 2024 06:24:30 +0000

Hey there,

Version 18.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ Experimental support for zoneless change detection

✅ Angular.dev is now the new home for Angular developers

✅ Material 3, deferrable views, built-in control flow are now stable

✅ Server-side rendering improvements such as i18n hydration support

✅ More Additional features

How to update to version 18

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 18

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

What’s in this release?

✅ Evolving change detection

You can try the experimental zoneless support in Angular starting today! Add provideExperimentalZonelessChangeDetection to your application bootstrap

bootstrapApplication(App, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

After adding the provider, remove zone.js from your polyfills in angular.json
Moving forward, zoneless opens many doors for developers:
- Improving composability for micro-frontends and interoperability with other frameworks
- Faster initial render and runtime
- Smaller bundle size and faster page loads
- More readable stack traces
The best way to use zoneless in your components is with signals:


@Component({
  ...
  template: `
    <h1>Hello from {{ name() }}!</h1>
    <button (click)="handleClick()">Go Zoneless</button>
  `,
})
export class App {
  protected name = signal('Angular');

  handleClick() {
    this.name.set('Zoneless Angular');
  }
}

In the example above, clicking the button invokes the handleClick method, which updates the signal value and updates the UI.
This works similarly to an application using zone.js, with few differences.
With zone.js, Angular ran change detection any time application state might have changed.
Without zones, Angular limits this checking to fewer triggers, such as signal updates.
This change also includes a new scheduler with coalescing to avoid checking for changes multiple times consecutively.

✅ New home for Angular developers

Today, angular.dev has became the official documentation website for Angular!
On top of the new, modern look and feel you can find
- an interactive hands-on tutorial based on WebContainers,
- interactive playground with examples,
- improved search powered by Algolia,
- refreshed guides,
- simplified navigation
All requests to angular.io now automatically redirect to angular.dev

✅ Stablilty Updates

Material 3 is now stable!

You can check it out right here 👉 material.angular.io

Signal APIs in developer preview

Find how to use the APIs in signals guide Guide

Deferrable views are now stable

Built-in control flow is now stable

✅ Improvements in server-side rendering

one of the main blockers to get even more people to take advantage of hydration was lack of i18n support
i18n blocks is available in developer preview mode in Angular v18!

✅ Improved debugging experience

Angular’s hydration process can be visulize in Angular DevTools.
Next to each component you can find an icon representing the component’s hydration status.
To preview which components Angular hydrated on the page you can also enable an overlay mode.
If your app has any hydration errors, Angular DevTools will visualize them in the component explorer.

✅ More Additional features

👉 Specifying a fallback content for ng-content

In v18 specifying default content for ng-content is available

@Component({
  selector: 'app-profile',
  template: `
    <ng-content select=".greeting">Hello </ng-content>

    <ng-content>Unknown user</ng-content>
  `,
})
export class Profile {}

Now we can use the component:

<app-profile>
  <span class="greeting">Good morning </span>
</app-profile>

Which will result in:

<span class="greeting">Good morning </span>
Unknown user

👉 Unified control state change events

FormControl, FormGroup and FormArray classes from Angular forms now expose a property called events, which allows you to subscribe to a stream of events for this form control.
Using it you can track changes in value, touch state, pristine status, and the control status.

Now you can use:

const nameControl = new FormControl<string|null>('name', Validators.required);
nameControl.events.subscribe(event => {
  // process the individual events
});

👉 Automating the migration to the application builder

In Angular v17 we announced “application builder” as stable and enabled it by default for new projects.
Under the hood it uses Vite with esbuild to replace the previous webpack experience.

👉 Route redirects as functions

To enable higher flexibility when dealing with redirects, in Angular v18 redirectTo now accepts a function which returns a string.
For example, if you’d like to redirect to a route that depends on some runtime state you can implement a more complicated logic in a function:

const routes: Routes = [
  { path: "first-component", component: FirstComponent },
  {
    path: "old-user-page",
    redirectTo: ({ queryParams }) => {
      const errorHandler = inject(ErrorHandler);
      const userIdParam = queryParams['userId'];
      if (userIdParam !== undefined) {
        return `/user/${userIdParam}`;
      } else {
        errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));
        return `/not-found`;
      }
    },
  },
  { path: "user/:userId", component: OtherComponent },
];

👉 TypeScript 5.4

Angular updated the dependency on TypeScript letting you take advantage of all the latest TypeScript 5.4 features!

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

⭐Angular 17 Features ⭐

Sandeep Balachandran — Thu, 23 May 2024 03:20:47 +0000

Hey there,

Version 17.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ Future-looking identity

✅ Built-in control flow

✅ Deferrable views

✅ Revamped hybrid rendering experience

✅ New @angular/ssr package

✅ New lifecycle hooks

✅ Vite and esbuild the default for new projects

✅ Dependency injection debugging in DevTools

✅ Improving Developer Experience

How to update to version 17

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 17

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

What’s in this release?

✅ Future-looking identity

With Angular 17, developers can now access an updated documentation platform hosted on angular.dev
The new website has new structure, new guides, improved content, and built a platform for an interactive learning journey that will let you learn Angular and the Angular CLI at your own pace, directly in the browser.
Currently it is in beta preview and planning to make it the default website for Angular in v18.
Read more about it here 👉 Blog post

✅ Built-in control flow

The built-in control flow is available in v17 under developer preview today!
Angular 17 introduces a new block template syntax, enhancing the developer experience by offering powerful features
A new block template syntax that gives you powerful features with simple, declarative APIs are released
Under the hood, the Angular compiler transforms the syntax to efficient JavaScript instructions that could perform control flow, lazy loading, and more.
The built-in control flow enables:
- More ergonomic syntax that is closer to JavaScript, thus more intuitive requiring fewer documentation lookups
- Better type checking thanks to more optimal type narrowing
- It’s a concept that primarily exists at build-time, which reduces the runtime footprint (making it “disappearing”) which could drop your bundle size by up to 30 kilobytes and further improve your Core Web Vital scores
- It is automatically available in your templates without additional imports

✅ Conditional statements

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>

With the built-in if statement, this condition will look like:

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

Being able to provide the content for @else directly is a major simplification compared to the else clause of the legacy *ngIf alternative.
The current control flow also makes it trivial to have @else if, which historically has been impossible.
The improved ergonomics is even more visible with *ngSwitch:

<div [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

which with the built-in control flow turns into:

@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}

The new control flow enables significantly better type-narrowing in the individual branches in @switch which is not possible in *ngSwitch.

✅ Built-in for loop

@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}

We often see performance problems in apps due to the lack of trackBy function in *ngFor.
A few differences in @for are that track is mandatory to ensure fast diffing performance.
In addition, it’s way easier to use since it’s just an expression rather than a method in the component’s class.
The built-in @for loop also has a shortcut for collections with zero items via an optional @empty block.
The @for statement uses a new diffing algorithm and has more optimal implementation compared to *ngFor, which makes it up to 90% faster runtime for community framework benchmarks!

✅ Deferrable views

Angular 17 introduces a concept known as deferrable views or @defer blocks
Deferrable views are available in developer preview in v17
Deferrable views bring performance and developer experience to the next level because they enable declarative and powerful deferred loading with unprecedented ergonomics.

@defer (on viewport) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}

There’s a ton of complexity under the hood that Angular manages for you.
Deferrable views offer a few more triggers:
- on idle — lazily load the block when the browser is not doing any heavy lifting
- on immediate — start lazily loading automatically, without blocking the browser
- on timer() — delay loading with a timer
- on viewport and on viewport() — viewport also allows to specify a reference for an anchor element. When the anchor element is visible, Angular will lazily load the component and render it
- on interaction and on interaction() — enables you to initiate lazy loading when the user interacts with a particular element
- on hover and on hover() — triggers lazy loading when the user hovers an element
- when — enables you to specify your own condition via a boolean expression
Deferrable views also provide the ability to prefetch the dependencies ahead of rendering them.
Adding prefetching is as simple as adding a prefetch statement to the defer block and supports all the same triggers.

@defer (on viewport; prefetch on idle) {
  <comment-list />
}

✅ Revamped hybrid rendering experience

Angular 17 brings a revitalized hybrid rendering experience, offering robust server-side rendering (SSR) and static site generation (SSG) support

✅ New @angular/ssr package

Angular Universal repository is moved to the Angular CLI repository and made server-side rendering an even more integral part
To add hybrid rendering support to your existing application run:

ng add @angular/ssr

✅ New lifecycle hooks

2 new life cycle hooks introduced in this release
- afterRender — register a callback to be invoked each time the application finishes rendering
- afterNextRender — register a callback to be invoked the next time the application finishes rendering
Only the browser will invoke these hooks, which enables you to plug custom DOM logic safely directly inside your components.
✅ Vite and esbuild the default for new projects
esbuild plus Vite powered build experience is enabled by default for all new applications
Benefits
- A 67% improvement in build time.
- An 87% speed improvement with SSR and SSG.
- A lightweight and efficient build process.

✅ Dependency injection debugging in DevTools

brand new debugging APIs are introduced that allow us to plug into the framework’s runtime and inspect the injector tree.
Based on these APIs we built an inspection user interface that allows you to preview the:
- Dependencies of your components in the component inspector
- Injector tree and dependency resolution path
- Providers declared within the individual injectors

✅ Improving Developer Experience

Input value transforms

A common pattern is having a component which receives a boolean input.
This, however, sets constraints on how you can pass a value to such a component.
For example if we have the following definition of an Expander component:

@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input() expanded: boolean = false;
}

and we try to use it as

<my-expander expanded/>

You’ll get an error that “string is not assignable to boolean”.
Input value transforms allow you to fix this by configuring the input decorator:

@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input({ transform: booleanAttribute }) expanded: boolean = false;
}

Style and styleUrls as strings

Angular components support multiple stylesheets per component.
However, the vast majority of cases when I want to style my components I create an array with a single element pointing to the inline styles or referencing an external stylesheet
A new feature enables you to switch from *

@Component({
  styles: [`
    ...
  `]
})

@Component({
  styleUrls: ['styles.css']
})

to the simpler and more logical

@Component({
  styles:``
})

@Component({
  styleUrl: 'styles.css'
})

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

⭐Angular 16 Features ⭐

Sandeep Balachandran — Thu, 23 May 2024 03:04:14 +0000

Hey there,

I know I am a little late at this point. Also It has been a long since I have posted something here. So here it goes.

Version 16.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ New reactivity model

✅ Angular Signals

✅ Server-side rendering and hydration

✅ Improved tooling for standalone components, directives, and pipes

✅ Advancing developer tooling

✅ Improving Developer Experience

How to update to version 16

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 16

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

What’s in this release?

✅ New reactivity model

As part of the v16 release Angular team share a developer preview of a brand new reactivity model for Angular which brings significant improvements to performance and developer experience
It’s entirely backward compatible and interoperable with the current system, and enables:
- Better run time performance by reducing the number of computations during change detection.
- Brings a simpler mental model for reactivity

👉 Signals

The Angular signals library allows you to define reactive values and express dependencies between them.
A signal is a value with explicit change semantics.
In Angular a signal is represented by a zero argument getter function returning the current signal value:
Signals are fundamentally read-only: we can ask for the current value and observe change notification.

@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    {{ fullName() }} <button (click)="setName('John')">Click</button>
  `,
})
export class App {
  firstName = signal('Jane');
  lastName = signal('Doe');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    effect(() => console.log('Name changed:', this.fullName()));
  }

  setName(newName: string) {
    this.firstName.set(newName);
  }
}

The snippet above creates a computed value fullName, which depends on the signals firstName and lastName.
We also declare an effect, which callback will execute every time we change the value of any of the signals it reads — in this case fullName, which means it transitively also depends on firstName and lastName.
When we set the value of firstName to ”John”, the browser will log into the console:

"Name changed: John Doe"

✅ Server-side rendering and hydration

In the new full app non-destructive hydration, Angular no longer re-renders the application from scratch.
Instead, the framework looks up existing DOM nodes while building internal data structures and attaches event listeners to those nodes.
Features
- No content flickering on a page for end users
- Better Web Core Vitals in certain scenarios
- Future-proof architecture that enables fine-grained code loading with primitives
- Easy integration with existing apps
- Incremental adoption of hydration with the ngSkipHydration attribute in templates for components performing manual DOM manipulation

Non-destructive hydration is still at the developer preview stage.
But you can enable it by adding provideClientHydration() as a provider when bootstrapping the application.

import {
 bootstrapApplication,
 provideClientHydration,
} from '@angular/platform-browser';

...

bootstrapApplication(RootCmp, {
 providers: [provideClientHydration()]
});

You can find more details on how it works in the documentation right here 👉 Hydration.

✅ Improved tooling for standalone components, directives, and pipes

Angular 14 started supporting standalone components, which are independent of modules.
Angular 16 takes this to the next level by supporting standalone project creation.

ng new --standalone

You’ll get a simpler project output without any NgModules.
Additionally, all the generators in the project will produce standalone directives, components, and pipes!
Zone.js can be configured with the new bootstrapApplication API.

bootstrapApplication(App, {
  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
});

✅ Advancing developer tooling

👉 Developer preview of the esbuild-based build system

In ng serve angular now using Vite for the development server, and esbuild powers both development and production builds
Angular CLI relies on Vite exclusively as a development server.
To support selector matching, the Angular compiler needs to maintain a dependency graph between components which requires a different compilation model than Vite.
You can give Vite + esbuild a try by updating your angular.json:

...
"architect": {
  "build": {                     /* Add the esbuild suffix  */
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...

👉 Better unit testing with Jest and Web Test Runner

Jest is one of the most loved testing frameworks and test runners.
Experimental Jest support is added with Angular 16.
Planning to move all the existing Karma projects to Web Test Runner in future updates.
You can experiment with Jest in new projects by installing Jest with

npm install jest --save-dev

and updating your angular.json file

{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }
      }
    }
  }
}

More unit testing strategies can be found right here 👉 Blog Post

👉 Autocomplete imports in templates

The language service now allows auto-import components and pipes.
In v16 TypeScript 5.0 support is added, with support for ECMAScript decorators , removing the overhead of ngcc , adding support for service workers and app shell in standalone apps, expanding CSP support in the CLI

✅ Improving Developer Experience

👉 Required inputs

In Angular 16, you can now define input values as required.
You can either use the @Input decorator or the @Component decorator inputs array to define one.

@Component(...)
export class App {
  @Input({ required: true }) title: string = '';
}

Passing router data as component inputs

Now you can pass the following data to a routing component’s inputs
- Route data — resolvers and data properties
- Path parameters
- Query parameters *

const routes = [
  {
    path: 'about',
    loadComponent: import('./about'),
    resolve: { contact: () => getContact() }
  }
];

@Component(...)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}

You can enable this feature by using withComponentInputBinding as part of the provideRouter.

👉 CSP support for inline-styles

The ngCspNonce attribute is useful if you have access to server-side templating that can add the nonce both to the header and the index.html when constructing the response.

<html>
<body>
  <app ngCspNonce="{% nonce %}"></app>  
</body>
</html>

👉 Self-closing tags

A highly requested feature we recently implemented allows you to use self-closing tags for components in Angular templates

<super-duper-long-component-name [prop]="someVar"/>

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

⭐Angular 15 Features ⭐

Sandeep Balachandran — Fri, 18 Nov 2022 13:55:34 +0000

Hey there,

Version 15.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ Simplifying Angular with Stable Standalone APIs

✅ Router and HttpClient tree-shakable standalone APIs

✅ Directive composition API

✅ Image directive is now stable!

✅ Router unwraps default imports

✅ Better stack traces

✅ Automatic imports in language service

✅ Angular CLI enhancements

✅ Deprecation

How to update to version 15

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 15

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

What’s in this release?

✅ Simplifying Angular with Stable Standalone API 👌

Angular standalone components aim to streamline the authoring of Angular applications by reducing the need for NgModules.
Standalone alone APIs are no longer in developer preview and are now part of the stable API surface

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';

@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
     <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}
bootstrapApplication(PhotoAppComponent);

👉 In v14, standalone components are in developer preview.
👉 They are not stable API yet and will be potentially changed. But available to exploration and development.
As per the official announcement an example of usage can be found over here. 👈

✅Router and HttpClient tree-shakable standalone APIs

👉 It is possible to build a multi-route application using the new router standalone APIs

import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

export const appRoutes: Routes = [{
  path: 'lazy',
  loadChildren: () => import('./lazy/lazy.routes').then(routes => routes.lazyRoutes)
}];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});

👉 provideRouter API is tree-shakable
Bundlers can remove unused features of the router at build-time

✅ Directive composition API

👉 The directive composition API enables developers to enhance host elements with directives and equips Angular with a powerful code reuse strategy
👉 The directive composition API only works with standalone directives
This feature was inspired by the most popular feature request on GitHub asking for the functionality to add directives to a host element.

@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}

✅ Image directive is now stable!

The v15 release also includes a few new features for the image directive
- 👉 Automatic srcset generation
  - The directive ensures that an appropriately sized image is requested by generating the srcset attribute for you.
  - This can reduce download times for your images.
- 👉 Fill mode [experimental]
  - This mode causes the image to fill its parent container, removing the requirement to declare the image’s width and height.
  - It’s a handy tool if you don’t know the sizes of your images or if you’d like to migrate CSS background images to use the directive.
The standalone NgOptimizedImage directive can be used directly in the component or NgModule:

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule
@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}

// ... or a standalone Component
@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

To use it within a component just replace the image’s src attribute with ngSrc and make sure you specify the priority attribute for your LCP images

✅ Router unwraps default imports

To make the router simpler and reduce boilerplate further, the router now auto-unwraps default exports when lazy loading
Before this change, to lazy load a standalone component

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file').then(m => m.LazyComponent),
}

Now the router will look for a default export and if it finds it, use it automatically, which simplifies the route declaration to

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file'),
}

✅ Better stack traces

More understandable stack errors
👉 Instead of showing errors from third party dependencies error messages are more focused on code that developer has authored.

✅Automatic imports in language service

The language service now can automatically import components that you’re using in a template but haven’t added to a standalone component or an NgModule.

✅ CLI improvements

Now you can generate a new standalone component via ng g component --standalone

✅ Deprecations

providedIn: 'any' - The NgModule injector that receives the resolution.
providedIn: NgModule
Team will stop publishing new releases of @angular/flex-layout

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

⭐Angular 14 Features ⭐

Sandeep Balachandran — Fri, 03 Jun 2022 16:51:19 +0000

Hey there,

Version 14.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ Simplifying Angular with Standalone Components

✅ Typed Angular Forms

✅ Streamlined best practices

✅ Extended developer diagnostics

✅ Built-in improvements

✅ Angular material component updates

✅ Angular CLI enhancements

✅ Docs Updated | Docs updating | Docs will be updated

How to update to version 14

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 14

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

What’s in this release?

✅ Simplifying Angular with Standalone Components 👌

Angular standalone components aim to streamline the authoring of Angular applications by reducing the need for NgModules.
👉 In v14, standalone components are in developer preview.
👉 They are not stable API yet and will be potentially changed. But available to exploration and development.
As per the official announcement an example of usage can be found over here. 👈

👉 In component decorator you are able to make directives and pipes standalone by standalone: true flag which allows you to add imports directly in your @Component() without an @NgModule()
Explore stackblitz demo 👈 for more
We can create standalone component using CLI as follows

  ng generate component <name> --standalone

✅Typed Angular Forms

👉 This feature was under the radar for a while now. The issue can be found here
👉 Typed forms ensure that the values inside of form controls, groups, and arrays are type safe across the entire API surface.
👉 This enables safer forms, especially for deeply nested complex cases.
Official gist is available here

Motivation behind typed angular forms can be found 👉 here

✅ Streamlined best practices

✅ 👉 Streamlined page title accessibility
- It is a best practice to ensure that your app’s page titles uniquely communicate the page’s contents.
- v13.2 streamlines this with the new Route.title property in the Angular Router.
- Adding a title now requires no additional imports and is strongly typed
- gist can be found here
- In these examples,
  - 👉 navigating to ‘/about’ will set the document title to ‘My App — About Me’
  - 👉 while navigating to ‘/home’ will set the document title to ‘My App — Home’.

✅ Extended developer diagnostics

New extended diagnostics provide an extendable framework that gives you more insight into your templates and how you might be able to improve them.
Diagnostics give compile-time warnings with precise, actionable suggestions for your templates, catching bugs before run-time.

👉 Catch the invalid “Banana in a box” error on your two-way data bindings 👉 here

Official Reference

👉 Catch nullish coalescing on non-nullable values 👉 here

Official Refernce

👉 Tree-shakeable error messages

✅ More built-in improvements

Bind to protected component members - you can now bind to protected component members directly from your templates,
Optional injectors in Embedded Views
NgModel OnPush - NgModel changes are reflected in the UI for OnPush components.

✅ Angular CLI enhancements

Now every flag uses --lower-skewer-case format
Removed deprecated camel case arguments support and added support for combined aliases usage
👉 ng completion
- v14 introduces real-time type-ahead autocompletion for command such as ng serve!
👉 ng analytics
- The CLI’s analytics command allows you to control analytics settings and print analytics information
👉 ng cache
- ng cache provides a way to control and print cache information from the command line.

✅ Angular DevTools is available offline and in Firefox

The Angular DevTools debugging extension now supports offline use
For Firefox users, find the extension in the Add-ons for Mozilla.

✅ Experimental ESM Application Build

Finally, v14 introduces an experimental esbuild-based build system for ng build, which compiles pure ESM output.

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

⭐Angular 13 Features ⭐

Sandeep Balachandran — Thu, 04 Nov 2021 07:18:50 +0000

Hey there,

Version 13.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ View Engine is no longer available in Angular as of v13

✅ Changes to the Angular Package Format (APF)

✅ Component API updates

✅ End of IE11 support

✅ Improvements to the Angular CLI

✅ Framework changes and dependency updates ( TypeScript 4.4, Rxjs 7.4)

✅ Improvements to Angular tests

✅ Angular material component updates

✅ PR merges from community

✅ Docs Updated | Docs updating | Docs will be updated

How to update to version 13

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 13

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

What’s in this release?

✅ Ivy is the default engine available in v13 👌

The Angular team already mentioned they will be removing View Engine from future major releases.
Read about this from Minko Gechev right here
👉 Removing View Engine also means that Angular can reduce its reliance on ngcc (Angular compatibility compiler)

✅ Changes to the Angular Package Format (APF)

👉 Libraries built with the latest version of the APF ( Angular package format) will no longer require the use of ngcc because of standardization on more modern JS formats such as ES2020.
As a result of these changes library developers can expect leaner package output and faster execution
Removed older output formats, including View Engine specific metadata from APF in v13
update in APF to support Node Package Exports which help developers from inadvertently relying on internal APIs that may change.

✅ Component API update

Before the changes in Angular v13, dynamically creating components required a lot of boilerplate code.
👉 The new API removes the need for ComponentFactoryResolver being injected into the constructor.
👉 Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without creating an associated factory.

Creating components with previous versions of Angular

With the new API, this code can become:

✅ End of IE11 support 🎉

This allows Angular to leverage modern browser features such as CSS variables and web animations via native web APIs.
👉 Apps will be smaller and load faster because we can remove IE specific polyfills and code paths.
It also removes the need for differential loading
Running ng update will automatically drop these IE-specific polyfills and reduce bundle size during project migration
👉 Developers who still need to support IE11 users for existing projects can continue to use Angular v12 and it will be supported until November 2022

✅ Improvements to the Angular CLI

👉 Angular now supports the use of persistent build cache by default for new v13 projects. Read it here
To enable this features developers can add this configuration to angular.json:

Read more about it here

✅ Framework changes and dependency update

👉 Support for TypeScript 4.4 . Read it here 🎉
👉 RxJS 7.4 is now the default for v13
Existing apps using RxJS v6.x will have to manually update using the npm install rxjs@7.4 command. Migration instructions can be read it here
From angular 11 support for inline google font was introduced
👉 Now in v13 support extended to Adobe Fonts
Inlining fonts can improve your app performance by speeding up the First Contentful Paint (FCP)
This change is now enabled for everyone by default! All you need to do is ng update

✅ Improvements to Angular test

👉 TestBed that now does a better job of tearing down test modules and environments after each test
The DOM is now cleaned after every test and developers can expect faster, less memory-intensive, less interdependent, and more optimized tests

✅ Angular material component updates

All the MDC-based components have been evaluated to meet elevated a11y standards on areas such as contrast, touch targets, ARIA, and more
👉 Pull requests regarding Accessibility (a11y) standard can be read here

✅ PR merges from community

👉 Dynamically enable/disable validators - #42565 🎉
👉 Making the SwUpdate API a little more ergonomic - #43668 🎉
👉 Language Service config to enable auto-apply optional chaining on nullable symbol - #1469 🎉
👉 Router emit activate/deactivate events when an outlet gets attached/detached - #4333 🎉
👉 Restore history after canceled navigation - #38884 🎉
- Router flag to restore the computed value of the browser history when set to computed

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

🤷‍♂️ How to build and deploy angular application to surge using github actions

Sandeep Balachandran — Sun, 24 Oct 2021 15:02:14 +0000

Hey there, 🖐

Suppose you have an angular application and need to automate building and deployment also you are looking for how to do it.

You are in the right place.

Requirements

👉 Angular application
👉 Github account
👉 surge token and domain name

Prerequisite

👉 Push your application to github repo
👉 Add a folder .github/workflows/ in the root location and create a file with an extension of yml inside of it . Lets say (deplyment.yml) ( .github/workflows/)

✅ Add name for your workflow

  name : Build and Deploy

If you omit name inside the workflow file, GitHub will set workflow name to the workflow file path relative to the root of the repository.

✅ Setup trigger

A workflow trigger is required for a workflow. We need to provide event that trigger the workflow
Read more about it right here

on:
  push:
    branches:
      - 'master'

So on pushing the master branch. Change as you want.

✅ Create angular build

In GitHub Actions, jobs are defined by a series of steps that are executed on a runner.
Each job runs on a different workspace, meaning that files and job side effects are not kept between jobs.

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

The latest version of Ubuntu GitHub-hosted runner is utilized for this job
Jobs will not pull the source code by default, you need to explicitly tell the job to do so

- name: Checkout
  uses: actions/checkout@v1

This action checks-out your repository , so your workflow can access it. More about actions/checout@v1 right here

✅ Setup Node.js

- name: Use Node 12.x
  uses: actions/setup-node@v1
  with:
    node-version: '12.x'

This action sets by node environment for use in actions by:
- Optionally downloading and caching a version of node - npm by version spec and add to PATH
- Registering problem matchers for error output
- Configuring authentication for GPR or npm
Read it here

✅ Run build

- name: Install dependencies
  run: npm install
- name: Build
  run: npm run build

✅ Upload artifact

To expose the results of the current job to the next job, we can configure build job to upload the build artifacts

- name: Archive build
  if: success()
  uses: actions/upload-artifact@v1
  with:
    name: deploy_dist
    path: dist

if: success() is used to make sure upload artifact only runs if all the previous steps passed

✅ Create Deploy Job

deploy:
  runs-on: ubuntu-latest
  needs: build
  steps:
      - name: Checkout
        uses: actions/checkout@v1

needs: build is used to tell GitHub to only execute deploy job when build and test job completed successfully.

✅ Download build artifact

- name: Download build
  uses: actions/download-artifact@v1
  with:
    name: deploy_dist

✅ Install surge

- name: Install surge a
    uses: actions/setup-node@v1
    with:
        node-version: '12.x'
        - run: npm install -g surge

✅ Deployment

- run: surge ./deploy_dist/projectname ${{ secrets.SURGE_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }}

SURGE_DOMAIN

DOMAIN_NAME - Set the secret in settings -> Secrets -> New repository secret

SURGE_TOKEN

TOKEN - Set the secret in settings -> Secrets -> New repository secret

Type in terminal as follows to get surge token

surge token

✅ Conclusion

name: Build and Deploy

on:
  push:
    branches:
      - 'master'

jobs:
  build:
    name: Build and Test
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Use Node 12.x
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive build
        if: success()
        uses: actions/upload-artifact@v1
        with:
          name: deploy_dist
          path: dist
  deploy:
    runs-on: ubuntu-latest
    needs: build
    name: Deploying to surge
    steps:
      - uses: actions/checkout@v2
      - name: Download build
        uses: actions/download-artifact@v1
        with:
          name: deploy_dist
      - name: Install surge and fire deployment
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - run: npm install -g surge
      - run: surge ./deploy_dist/projectname ${{ secrets.SURGE_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }}

⭐Angular 12 Now Available ⭐

Sandeep Balachandran — Thu, 13 May 2021 05:39:44 +0000

Hey there,

Version 12.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ Moving closer to IVY engine and get rid of view engine

✅ Getting rid of protractor. Adding support to Cypress, WebdriverIO, and TestCafe

✅ Nullish Coalescing in templates

✅ Docs Updated | Docs updating | Docs will be updated

✅ Stylish improvements

✅ Strict mode by default

✅ Ivy-based Language Service

✅ Experimental support for Webpack 5

✅ supporting TypeScript version to 4.2 ( 4.3 is in beta)

✅ Bye bye IE11 - New deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13

✅ PR merges from community

How to update to version 12

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 12

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

What’s in this release?

✅ Moving closer to IVY engine 👌

View Engine is basically deprecated, it will be removed in a future major release
Current libraries using View Engine will still work with Ivy apps (no work is required by developers), but library authors should start planning to transition to Ivy.

👉 Read about this from Minko Gechev right here

✅ Goodbye to Protractor

Angular 12 opted to not include protractor in new projects and, instead, provide options with popular 3rd party solutions in the Angular CLI. Angular team currently working with Cypress, WebdriverIO, and TestCafe
New things to learn 🎉🎉

✅ Nullish Coalescing

We can use nullish coalescing in angular components

✅ Documentation updates

✅ Stylish Improvements

Angular components will now support inline Sass . Previously, Sass was only available in external resources due to the Angular compiler
To enable this feature in your existing applications add

"inlineStyleLanguage": "scss”

to angular.json. Otherwise, it will be available to new projects using SCSS

In the v11.2 release, added support for Tailwind CSS.

install the tailwindcss package from npm
initialize Tailwind to create the tailwind.config.jsin your project.
Now, teams are ready to start using Tailwind in Angular.

✅ Great Features

👉 ng build now defaults to production which saves teams some extra steps and helps to prevent accidental development builds in production . ng build === ng build --prod
👉 Strict mode is enabled by default in the CLI
👉 The Ivy-based Language Service is moving from opt-in to on by default
👉 Added experimental support for Webpack 5
👉 Updating the supported TypeScript version to 4.

✅ Bye Bye IE11

👉 New IE11 deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13

✅ Multiple code merges

👉 #25839
👉 #25751
👉 #39063
👉 #33222

For more let us hear it from the creators

Credits : Official Announcement 😄

Journey from 2020 to 2021

Sandeep Balachandran — Sun, 03 Jan 2021 16:52:30 +0000

Hey there 🖐,
It is that time of the year again. Happy holidays. Sun had to witness earth rotating for nothing again. Also i thought adding a post summarizing what i have done throughout the year and some of the objectives for the future year to come.

I changed my job 🏢

Published 46 posts in dev.to until now ✍

Machine learning (22)
Angular(7)
Laravel(2)
Javascript(1)
Miscellaneous(14)

Started maintaining a number of open-source projects. 🎉

ngx-sand-typeahead ✅ Go to Github
- A typeahead package for angular framework
Pytheract ✅ Go to Github
- An Image extraction tool using tesseract and pytesseract wrapper.
Pythonophobia ✅Go to Github
- A collection of python programs listed with beginners,average, advanced developers.

What I learned in 2020

Angular
- Basic unit testing using Jasmine and Karma
- Angular library creation
- Authentication with keycloak
- Keycloak theme customization
- Concepts of multitenancy with keycloak
Basic understandings of data Science with Python
Basics of
- Numpy
- Matplotlib
- pandas
Machine Learning concepts
- Basics of scikit
- Intro to tensorflow.
Morse code ( a little ). Required pen and paper 🤣
More spanish lesssons and vocabulary 💪
Juggling with 3 and 4 balls 🥎🥎🥎🥎

What I want to learn/do in 2021

Data structures and algorithms
System design
Tensorflow 2 concepts
Angular Advanced Concepts
- Microfrontend
- Multitenancy
- Server side rendering.
Advancing in spanish language.
Starting my own blog.
To build a good workstation

Thtats pretty much the end of it. Share your achievements and objectives if interested.

Later then .

How to use Streamlit :The fastest way to build and share data apps.

Sandeep Balachandran — Thu, 31 Dec 2020 13:35:18 +0000

Hey there 🖐,
Before moving on to the content , take a quick look. 👀

Streamlit is an open-source Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science. 🤩
In just a few minutes you can build and deploy powerful data apps 🚀🚀 - so let’s get started!

Make sure that you have Python 3.6 or greater installed.
Install Streamlit using PIP and run the ‘hello world’ app:

pip install streamlit
streamlit hello

Create your first Streamlit app

First, we’ll create a new Python script and import Streamlit.

Create a new Python file named app.py, then open it with your IDE or text editor.

Next, import Streamlit

import streamlit as st
# To make things easier later, we're also importing numpy and pandas for
# working with sample data.
import numpy as np
import pandas as pd

Run your app. A new tab will open in your default browser. It’ll be blank for now. That’s OK.

streamlit run app.py

Write a data frame
Along with magic commands, st.write() is Streamlit’s “Swiss Army knife”. You can pass almost anything to st.write(): text, data, Matplotlib figures, Altair charts, and more. Don’t worry, Streamlit will figure it out and render things the right way.

st.title('My first app')
st.write("Here's our first attempt at using data to create a table:")
st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))

output will be like

Draw charts and maps

Streamlit supports several popular data charting libraries like Matplotlib, Altair, deck.gl, and more. In this section, you’ll add a bar chart, line chart, and a map to your app.

Draw a line chart
You can easily add a line chart to your app with st.line_chart(). We’ll generate a random sample using Numpy and then chart it.

chart_data = pd.DataFrame(
     np.random.randn(20, 3),
     columns=['a', 'b', 'c'])
st.line_chart(chart_data)

Plot a map

With st.map() you can display data points on a map. Let’s use Numpy to generate some sample data and plot it on a map of San Francisco.

map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(map_data)

Show progress

When adding long running computations to an app, you can use st.progress() to display status in real time.

First, let’s import time. We’re going to use the time.sleep() method to simulate a long running computation:

import time

Then add the code

left_, right_ = st.beta_columns(2)
latest_iteration = st.empty()
bar = st.progress(0)
pre = left_.button('Start counter')
if pre:
  bar.progress(0)
  for i in range(100):
    # Update the progress bar with each iteration.
    latest_iteration.text(f'Iteration {i+1}')
    bar.progress(i + 1)
    time.sleep(0.1)

Share your app

After you’ve built a Streamlit app, it’s time to share it! To show it off to the world you can use Streamlit sharing to deploy, manage, and share your app for free.
Streamlit sharing is currently invitation only so request an invite .

It works in 3 simple steps: 🥳

Put your app in a public Github repo (and make sure it has a requirements.txt!)
Sign into share.streamlit.io
Click ‘Deploy an app’ and then paste in your GitHub URL

That’s it! 🎈You now have a publicly deployed app that you can share with the world. 💪

Read more about how to make apps - Official docs

Read more about how to share - Official workflow

Thats it for now.

This was my very last post on the year 2020. What an interesting and weired year it has been in all the worst ways lads!!!

So in retrospect, in 2015, not a single person got the answer right to "Where do you see yourself 5 years from now?"

On the bright side, I got to write more contents on this year than any other year.

It is finaly over. I wanted to say thank to each one of you.

Thanks for reading my contents. If you learned something new from my posts please let me know.

Dont hesitate to share if there any mistakes that i need to correct or topics that i have to research more.

See you next year

Hasta Pronto ! 🙌🙌

MkDocs : Static HTML sites and documentation preparation tool that you can host on GitHub pages

Sandeep Balachandran — Mon, 21 Dec 2020 13:39:23 +0000

Hey there,
I have been doing R&D for upcoming project which seem relatively large compared to other works . So i was looking for a document preparation tool to organize everything. At first google docs was a good option which was very quick , easy to use and maintain. But as the content of the research increases it becomes harder to track each points.
so I came up with MkDocs which seems good.

Let us see how to set it up in no time.

Introduction

MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation.
Documentation source files are written in Markdown, and configured with a single YAML configuration file.
The built-in dev-server allows you to preview your documentation as you're writing it. It will even auto-reload and refresh your browser whenever you save your changes.

Manual Installation

$ python --version
Python 3.8.5
$ pip --version
pip 20.3.3 from C:\Users\username\Anaconda3\lib\site-packages\pip (python 3.8)

pip install --upgrade pip

Installing MkDocs

pip install mkdocs

$ mkdocs --version
mkdocs, version 1.1.2

Getting Started


mkdocs new demo
cd demo

There's a single configuration file named mkdocs.yml, and a folder named docs that will contain your documentation source files.
Right now the docs folder just contains a single documentation page, named index.md.
MkDocs comes with a built-in dev-server that lets you preview your documentation as you work on it.
Make sure you're in the same directory as the mkdocs.yml configuration file, and then start the server by running the mkdocs serve command:


$ mkdocs serve
INFO    -  Building documentation...
INFO    -  Cleaning site directory
[I 160402 15:50:43 server:271] Serving on http://127.0.0.1:8000
[I 160402 15:50:43 handlers:58] Start watching changes
[I 160402 15:50:43 handlers:60] Start detecting changes

Open up http://127.0.0.1:8000/ in your browser, and you'll see the default home page being displayed:
The dev-server also supports auto-reloading
Open the docs/index.md document in your text editor of choice, change the initial heading to your choice, and save your changes
Now try editing the configuration file: mkdocs.yml. Change the site_name setting to what you always wanted to view and save the file.

Adding pages

As our documentation site will include some navigation headers, you may want to edit the configuration file and add some information about the order, title, and nesting of each page in the navigation header by adding a nav setting:

site_name: MkLorum
nav:
    - Home: index.md
    - About: about.md

Save your changes and you'll now see a navigation bar with Home and About items on the left as well as Search, Previous, and Next items on the right.

Theming our documentation

Now change the configuration file to alter how the documentation is displayed by changing the theme. Edit the mkdocs.yml file and add a theme setting:

site_name: MkLorum
nav:
    - Home: index.md
    - About: about.md
theme: readthedocs

Building the site

That's looking good. You're ready to deploy the first pass of your MkLorum documentation. First build the documentation:

mkdocs build

This will create a new directory, named site. Take a look inside the directory:

$ ls site
about  fonts  index.html  license  search.html
css    img    js          mkdocs   sitemap.xml

Notice that your source documentation has been output as two HTML files named index.html and about/index.html.
You also have various other media that's been copied into the site directory as part of the documentation theme.
You even have a sitemap.xml file and mkdocs/search_index.json.
If you're using source code control such as git you probably don't want to check your documentation builds into the repository. * Add a line containing site/ to your .gitignore file.

Other Commands and Options

mkdocs --help
mkdocs build --help

For more information check out official docs : Officil site

If you have more suggestions about document preparation please consider sharing your thoughts in the comment section.

Thats it for now. Hasta Pronto ! 🙌🙌

Angular 11 Now Available

Sandeep Balachandran — Thu, 12 Nov 2020 07:25:50 +0000

Hey there,

Version 11.0.0 is here and it has some great updates for Angular developers everywhere. This release has updates across the platform including the framework, the CLI and components.

TL;DR

Easily use Hot Module Replacement just setting the '--hrm' flag in ng serve
In the CLI now inlining fonts to ensure apps load as fast as possible
The CLI build output is much more helpful and well strucutured
Experimental opt in preview support for webpack v 5.
Bug fixes and new features.
How to update to version 11
Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 11

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

What’s in this release?

Updated Hot Module Replacement (HMR) Support

ng serve --hmr

Angular has offered support for HMR but enabling it required configuration and code changes making it less than ideal to quickly include in Angular projects. Read about HMR right here

Updates on Operation Byelog

In Angular’s Roadmap, one of the items was Operation Byelog where committed to putting a significant engineering effort towards triaging issues and PRs until have a clear understanding of the broader community needs.
Going forward all new issues reported will be triaged within 2 weeks.

Automatic Inlining of Fonts

To make your apps even faster by speeding up their first contentful paint, introducing automatic font inlining. During compile time Angular CLI will download and inline fonts that are being used and linked in the application.

Component Test Harnesses

Read about it right here

Improved Reporting and Logging

Bringing in new CLI output updates to make logs and reports easier to read.

Updated Language Service Preview

The updated language service provides a more powerful and accurate experience for developers

Now, the language service will be able to correctly infer generic types in templates the same way the TypeScript compiler does. For example, in the screenshot below we’re able to infer that the iterable is of type string.

For more lets hear it from the creators

Credits : Official Announcement 😄