Category: Angular

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

(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 {}