Tag Archives: angular

Angular kanban component

While looking for some components to implement a kanban board, I found the @angular/cdk/drag-drop module, but I also stumbled upon this incredible work done by Trung Vo, a JIRA clone done in Angular : https://trungk18.com/experience/angular-jira-clone/, whose live demo can be seen here : https://jira.trungk18.com/project/board.

It’s so clean and neat, that you can’t help thinking “holy fuck,it’s open source ? I can use it even commercially ? I have to use it !”.

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