Archives par étiquette : 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">