With your Angular application growing, you will bump into the following warning :

WARNING in budgets: bundle initial-es2015 exceeded maximum budget. Budget 2 MB was not met by 169 kB with a total of 2.16 MB.

Fixing it is quite easy, simply edit your angular.json file, locate the “budgets” node, and incrase the limit :

"budgets": [
                 {
                   "type": "initial",
                   "maximumWarning": "3mb",
                   "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
               ]

Obviously, this is only valid if you’re getting just above the limit, or don’t care about application loading time. Because the warning is here for a reason, and you may eventually have to find out why your application is getting heavier, and how to trim it.

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.

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.