Tag Archives: angular

How to create an Angular 7+ component with two way binding ?

You have an angular component, and would like to have a value with a two way binding similar to ngModel. The easiest way is to :

  • add an Input on your document
  • add an Ouput whose name is the one of the input, suffixed by Change (that’s a required naming convention)

For example :

@Component({
  selector: 'app-select-nature-document',
  template: './select-nature-document.component.html',
  styleUrls: ['./select-nature-document.component.css']
})
export class SelectNatureDocumentComponent implements OnInit {
  @Input()
  natureDocument: NatureDocument;
  @Output()
  natureDocumentChange: EventEmitter<NatureDocument> = new EventEmitter<NatureDocument>();
...

You can then notify the value change using the output event emitter :

  onNatureDocumentSelected() {
    this.natureDocumentChange.emit(this.natureDocument);
  }

And the component can be used like this :

<app-select-nature-document [(natureDocument)]="editedDocument.nature"></app-select-nature-document>

Thanks to https://stackoverflow.com/questions/42006770/angular2-component-input-two-way-binding.

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