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.

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 !”.