It looks like you forgot to import the MatDialogModule into your AppModule (at least I don’t see it in the list of imports provided). For future reference, the first line of the API documentation tab will tell you the module(s) you need to import.
In the component you can do somthing like this. Create RxJS Subject, In search method which is called on keyup event, do .next() on this Subject you have created. Then subscribe in ngOnInit() will debounce for 1 second, as in below code. searchTextChanged = new Subject<string>(); constructor(private http:Http) { } ngOnInit(): void { this.subscription = … Read more
You can wrap them in a form and listen to changes this.myForm = fb.group({ ‘sku’: [”, Validators.required] }); this.sku = this.myForm.controls[‘sku’]; this.sku.valueChanges.subscribe( (value: string) => { console.log(‘sku changed to: ‘, value); } ); this.myForm.valueChanges.subscribe( (value: string) => { console.log(‘form changed to: ‘, value); } ); http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/ or @Component({ …, template: ‘<input (change)=”onChange($event.target.value)”>’ }) class MyComponent … Read more
Deprecated reverse overload add(unit: unitOfTime.DurationConstructor, amount: number|string) creates ambiguity. You can fix this by defining type of units to be DurationConstructor instead of string: let units: moment.unitOfTime.DurationConstructor=”month”; moment().add(1, units); Another option is just to use const instead of let, so literal type will be inferred: const units=”month”; moment().add(1, units);
To bring it to the point in the most simple terms, i would say a pipe is to manipulate data, while a directive is more for DOM manipulation. A pipe gets data as an input, transforms it and outputs this data in another way. A directive gets a DOM element it’s “attached” to and enhances … Read more
In my case I just removed the formControlName: <input type=”file” (change)=”onFileChange($event)”> And .ts: onFileChange(event) { const reader = new FileReader(); if (event.target.files && event.target.files.length) { const [file] = event.target.files; reader.readAsDataURL(file); reader.onload = () => { this.data.parentForm.patchValue({ tso: reader.result }); // need to run CD since file load runs outside of zone this.cd.markForCheck(); }; } }
Don’t bind to a method …keys() in the template. It will be called every time change detection runs. object.keys() returns a new object every time it is called and Angular recognizes this as an unexpected change, which leads to your error. You can fix it like someMethod() { this.bindedAuthorsKeys = this.bindedAuthors.keys(); } *ngFor=”let author of … Read more
Here’s a way where you can share the subscription and not have to make any custom pipe: <ng-container *ngIf=”{value: obs$ | async} as context”> {{context.value}} </ng-container> The *ngIf will evaluate to true no matter what (I believe) and then you can do your own tests on the value in the context object. …would be better … Read more
You need to apply the limit to the retry signal, for instance if you only wanted 10 retries: loadSomething(): Observable<SomeInterface> { return this.http.get(this.someEndpoint, commonHttpHeaders()) .retryWhen(errors => // Time shift the retry errors.delay(500) // Only take 10 items .take(10) // Throw an exception to signal that the error needs to be propagated .concat(Rx.Observable.throw(new Error(‘Retry limit exceeded!’)) … Read more