A common Angular beginner error is forgetting to unsubscribe from observables. This leak may not be noticeable at first, but will eventually lead to a sluggish application, or other unexpected behaviours.

One can manually keep track of all subscriptions, in order to properly unsubscribe in ngOnDestroy. However, this is tedious, and error prone.

Depending on your subscription context, there are two solutions that you may like.

For a subscription which is a one shot, you need to retrieve your data, and then fortget it, the RxJS first operator combined if straightforward.

myObservable.pipe(first()).subscribe(...);

If you’re expecting several events, and need to unsubscribe only when the component gets destroyed, then @ngneat/until-destroy, is « a neat way to unsubscribe from observables when the component destroyed« 

The @UntilDestroy({ arrayName: ‘subscriptions’ }) is a nice way to both explicit the requirement for observables to be unsubsribeds, while minimizing boilerplate code.

Nicolas Riousset

Président et fondateur de NeoLegal, développe des solutions logicielles qui facilitent le quotidien des professionnels du droit des sociétés.

nicolas.riousset.com

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.

Nicolas Riousset

Président et fondateur de NeoLegal, développe des solutions logicielles qui facilitent le quotidien des professionnels du droit des sociétés.

nicolas.riousset.com