Category: Angular

Use of Enums in Angular 8+ HTML template

in the TS

import { SomeEnum } from 'path-to-file';

public get SomeEnum() {
  return SomeEnum; 
}

in the HTML use

*ngIf="SomeEnum.someValue === 'abc'"

EDIT: Time goes by and we learn more as a developer, the approach I’m using right now doesn’t use the get method. Both solutions work, just choose the one you like the most.

in the TS

import { SomeEnum } from 'path-to-file';

export class ClassName {
  readonly SomeEnum = SomeEnum;
}

in the HTML use

*ngIf="SomeEnum.someValue === 'abc'"

From: Use of Enums in Angular 8 HTML template for *ngIf – Stack Overflow

Angular – How to force reload components with router navigation

(Tested in Angular 11 project)

One trick is to “double” navigate to force components to destroy and “update” their lifecycle.

E.g.:

/// Navigates to detail view
navigateToDetail(id: string) {

  // Navigates to start page first to "destroy" detail components if on same url
  this.router.navigate(['/']).then(() => {
    // Then navigates to desired url 
    let navigationExtras: NavigationExtras = { queryParams: { 'id': id} };
    this.router.navigate(['/view'], navigationExtras);
  });

}

I also added this to app-routing.module.ts: (not sure if it makes a difference with the above code)

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload',
  })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

 

How to force Angular to reload components when navigating to same url

Tested in Angular 11:

In module config for route module:

@NgModule({
imports: [RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload',
})],
exports: [RouterModule],
})

Set onSameUrlNavigation to ‘reload’

Whan using router.navigate() force url to update by adding a unique query parameter:

let navigationExtras: NavigationExtras = {
  queryParams: {
     refreshToken: (new Date).getTime(); //pass a dummy parameter (i.e. the time in milliseconds since 1970 or use the npm uuid library), forces reload of unique url
  },
};
this.router.navigate(['/detail'], navigationExtras);

More info:

https://github.com/angular/angular/issues/13831

https://angular.io/api/router/Router

https://angular.io/api/router/RouteReuseStrategy

Angular 10+ Strict Mode

From Angular 10 (experimental) / 11 (default on create new app) you can get strict mode. In summary it reduces the bundle size (by 75%!) and increases the maintainability by disabling you to create objects of type ‘any’ (no untyped types)…

Angular 11+ CLI creates all new workspaces and projects with strict mode enabled.

Strict mode improves maintainability and helps you catch bugs ahead of time. Additionally, strict mode applications are easier to statically analyze and can help the ng update command refactor code more safely and precisely when you are updating to future versions of Angular.

Specifically, strict mode does the following:

More info:
https://angular.io/guide/strict-mode

Angular CLI Strict Mode. In Angular, we strongly believe in… | by Minko Gechev | Angular Blog

Angular state inspector – Chrome Extension

Helps you debug Angular component state. Supports Angular 1/2+/Ivy! Angular State Inspector for Angular Supports all versions of Angular: – AngularJs – Angular 2+ – Angular Ivy – Hybrid apps (AngularJs + Angular) Extends the Chrome Developer Tools for Angular web apps. Adds new panel “State” to Elements tab, that displays the state of selected element. Prints state of selected element in console by calling “$state” variable. Depending on angular version it can show: – Component state – Directives – Context, like ngForOf or ngIf values – Event listeners If they are applicable to the current element.

Angular State Inspector also allows you to modify the values in the “State” panel (double click on value)

Source: Angular state inspector – Chrome Web Store

Angular tips debugger – Pause Your Code With Breakpoints In Chrome DevTools

You can use this in Angular development for instance.
Just place till code on a line you wish to debug (e.g. in an component.ts file):

debugger;

Chrome will pause on that breakpoint.

Source: How To Pause Your Code With Breakpoints In Chrome DevTools

Binding select element to object in Angular

Component.ts file:

Component.ts file: 

@Component({
   selector: 'myApp',
   template: 'myApp.html'
})
export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"},
       {id: 4, name: "Brazil"},
       {id: 5, name: "England"}
     ];
    selectedValue = null; //the current selected option id
}

Template:

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitz example

NOTE: you can use [ngValue]=”c” instead of [ngValue]=”c.id” where c is the complete country object.

Source: html – Binding select element to object in Angular – Stack Overflow