I had this issue. I imported MatFormFieldModule at my main module, but forgot to add MatInputModule to the imports array, like so: import { MatFormFieldModule, MatInputModule } from ‘@angular/material’; @NgModule({ imports: [ MatFormFieldModule, MatInputModule ] }) export class AppModule { } More info here.
As usual in Angular, you can rely on dependency injection: import { DatePipe } from ‘@angular/common’; class MyService { constructor(private datePipe: DatePipe) {} transformDate(date) { return this.datePipe.transform(date, ‘yyyy-MM-dd’); } } Add DatePipe to your providers list in your module; if you forget to do this you’ll get an error no provider for DatePipe: providers: [DatePipe,…] … Read more
Angular 6.1 and later: Angular 6.1 (released on 2018-07-25) added built-in support to handle this issue, through a feature called “Router Scroll Position Restoration”. As described in the official Angular blog, you just need to enable this in the router configuration like this: RouterModule.forRoot(routes, {scrollPositionRestoration: ‘enabled’}) Furthermore, the blog states “It is expected that this … Read more
Open angular.json file and find budgets keyword. It should look like: “budgets”: [ { “type”: “initial”, “maximumWarning”: “2mb”, “maximumError”: “5mb” } ] As you’ve probably guessed you can increase the maximumWarning value to prevent this warning, i.e.: “budgets”: [ { “type”: “initial”, “maximumWarning”: “4mb”, <=== “maximumError”: “5mb” } ] What does budgets mean? A performance … Read more
Since this is at least the third time I’ve wasted more than 5 min on this problem I figured I’d post the Q & A. I hope it helps someone else down the road… probably me! I typed in instead of of in the ngFor expression. Befor 2-beta.17, it should be: <div *ngFor=”#talk of talks”> … Read more
Try one of these: ApplicationRef.tick() – similar to AngularJS’s $rootScope.$digest() — i.e., check the full component tree NgZone.run(callback) – similar to $rootScope.$apply(callback) — i.e., evaluate the callback function inside the Angular zone. I think, but I’m not sure, that this ends up checking the full component tree after executing the callback function. ChangeDetectorRef.detectChanges() – similar … Read more
(change) event bound to classical input change event. https://developer.mozilla.org/en-US/docs/Web/Events/change You can use (change) event even if you don’t have a model at your input as <input (change)=”somethingChanged()”> (ngModelChange) is the @Output of ngModel directive. It fires when the model changes. You cannot use this event without ngModel directive. https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124 As you discover more in the … Read more
If you don’t need two-way data-binding: <select (change)=”onChange($event.target.value)”> <option *ngFor=”let i of devices”>{{i}}</option> </select> onChange(deviceValue) { console.log(deviceValue); } For two-way data-binding, separate the event and property bindings: <select [ngModel]=”selectedDevice” (ngModelChange)=”onChange($event)” name=”sel2″> <option [value]=”i” *ngFor=”let i of devices”>{{i}}</option> </select> export class AppComponent { devices=”one two three”.split(‘ ‘); selectedDevice=”two”; onChange(newValue) { console.log(newValue); this.selectedDevice = newValue; // … … Read more
Angular Concepts imports makes the exported declarations of other modules available in the current module declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported. providers … Read more
Import it from the file where it is declared directly instead of the barrel. I don’t know what exactly causes the issue but I saw it mentioned several times (probably some kind of circular dependency). It should also be fixable by changing the order of the exports in the barrel (don’t know details, but was … Read more