Interaction between components can be indeed achieved using services. You will need to inject the service use for inter-component communication into all the components which will need to use it (all the caller components and the callee method) and make use of the properties of Observables. The shared service can look something like this: import … Read more
ViewChild() works fine on latest plunker Angular version with the scenario you describe. Demonstration in this plunker : https://plnkr.co /edit/KzWnkE5Hvp7NUow6YAxy EDIT: Here is a replacement StackBlitz for the above Plunker: https://stackblitz.com/edit/angular-ivy-pzaglm component : ngAfterViewInit() { console.log(this.testView); // correctly outputs the element in console, not undefined } Check that ElementRef and ViewChild are correctly imported from … Read more
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);
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