Monthly Archives: December 2020

Making enum values available to Angular template

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">

Spring Data and JpaRepository method naming convention

Spring Data can infer SQL queries from JpaRepository method name. That’s a great tool to uniformize query generations, and make code more readable. Obviously, this only works for simple SQL queries, wchich is indeed what you should strive for.

The documentation about the JpaRepository method naming convention is available here :

https://docs.spring.io/spring-data/jpa/docs/current/reference/html/#jpa.query-methods

Key points :

  • “Order by” is represented by the keyword “OrderBy”, followed by the name of the entity member variable. Keyword “Asc” and “Desc” indicates the sort direction. You can sort by multiple columns by specifying each colum and its sort direction.
    Ex : findByDossierOrderByDateAscIdAsc(Dossier dossier)

Not using the local TSLint version found

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

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>