Angular errros and solutions

⚠️

These are my quick and dirty notes about the issues I encountered when working with Angular.

This likely means that the library (@angular/material/autocomplete) which declares MatAutocompleteModule is not compatible with Angular Ivy.

MatToolbar throws error when using it with Angular 9 - Stack Overflow

In my case (Ideta’s), just run npm run post-install + reload the working environment VSCode.

Can't bind to 'matAutocomplete' since it isn't a known property of 'textarea’

If adding MatAutocompleteModule to app.module.ts's imports doesn’t help, try to add this module to the parent module of the component you are using the MatAutocompleteModule.

If there is a case where any thing inside your model (your class) has changed but it hasn't reflected the view

You may be using changeDetection: ChangeDetectionStrategy.OnPush or something else that makes the angular ignore the changes on the view.

Any case, use this.cdr.detectChanges() or this.cdr.markForCheck() ← What are their differences?

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

Angular is complaining because we are mixing between Reactive Form and Template driven form.

Disable a reactive form control using custom directive - Trung Vo

How to access ngx bootstrap dropdown programmatically?

1<div #dropdown="bs-dropdown"></div>

1@ViewChild('dropdown') dropdownRef: BsDropdownDirective;
2
3// call it
4this.dropdownRef.hide();