Archives de catégorie : Angular

Making enum values available to Angular template

Laisser un commentaire

Let’s say you want to make some enum values available to your Angular template. Angular binding cannot reference directly the enum value. A hack to work this around consists in adding to your component class a member variable initialized with the enum type.

Ex :

import { Component, Input, OnInit } from '@angular/core';


enum TransfertNature {Gerant, Etablissement, Autre};

@Component({
  selector: 'app-transfert-siege',
  templateUrl: './transfert-siege.component.html',
  styleUrls: ['./transfert-siege.component.css']
})
export class TransfertSiegeComponent implements OnInit {

  nature: TransfertNature;

  TransfertNature: any = TransfertNature; // Can be used in the template

  constructor() { }

  ngOnInit(): void {
  }

}

The Angular template will then be able to referece any value using the variable. Ex : 

  <ng-container [ngSwitch]="transfert.nature">
    <ng-container *ngSwitchCase="TransfertNature.Gerant">

Not using the local TSLint version found

Laisser un commentaire

When the following message is displayed by Visual Studio Code for an angular project, it’s time to switch from TSMint to ESLint, as TSLint has been deprecated for a while now.

Not using the local TSLint version found for 'c:/Users/nicol/Documents/GitHub/Bartleby/frontend/src/app/create-dossier/create-dossier.component.ts'
 To enable code execution from the current workspace you must enable workspace library execution.

This documentation from Microsoft describes the process : https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration

Displaying an asycnhronous loader in angular

Laisser un commentaire

To display a loader while waiting for an AJAX call to be processed, use a template, and an *ngIf / else condition on a container.

Example, with ng zorro :

<ng-container *ngIf="!saving else loading">
Will be displayed once the "saving" variable is false.
</ng-container>

<ng-template #loading>
  <div nz-row nzJustify="center">
    <nz-spin nzSimple></nz-spin> Displayed as long as the "saving" variable is true ...
  </div>
</ng-template>