You can do this by using onCompleted callback in subscription. For example, let’s say you show loading bar when user press report button; loadCompanies(): void { this._companyService.getCompanies().subscribe( response => { this.companiesModel = response; }, err => { console.log(err); //closeLoadingBar(); }, () => { //do whatever you want //closeLoadingBar() } ) } generateReport() { //showLoadingBar() this.loadCompanies(); … Read more
If you need to invoke an async function within interceptor then the following approach can be followed using the rxjs from operator. import { MyAuth} from ‘./myauth’ import { from, lastValueFrom } from “rxjs”; @Injectable() export class AuthInterceptor implements HttpInterceptor { constructor(private auth: MyAuth) {} intercept(req: HttpRequest<any>, next: HttpHandler) { // convert promise to observable … Read more
1 It’s all about separation of concern in Angular One major benefit of using catchError is to separate the whole data retrieval logic including all errors that can occur along the way from the presentation of the data. 1.1 Let Components only care about the presentation of data Components should only care about data (whether … Read more
Don’t overthink it. @ViewChild(‘button’) button; clicks$:Observable<any>; ngOnInit() { this.clicks$ = Observable.fromEvent(this.button.nativeElement, ‘click’); }
Assume DynamicFormService.getAnswers(‘CAR00PR’) is asynchronous(probably it is), using async Pipe to pass asynchronous result is on the right way, but you cannot expect to get the asynchronous result right now when DynamicFormComponent is created(at ngOnInit) because of Asynchonous. The result isn’t ready yet when running your below line of code. this.form = this.qcs.toFormGroup(this.answers); There are several … Read more
You can simply mock Observable throw error object like Observable.throw({status: 404})and test error block of observable. const xService = fixture.debugElement.injector.get(SomeService); const mockCall = spyOn(xService, ‘method’).and.returnValue(Observable.throw({status: 404})); Update 2019 : Since some people are lazy to read comment let me put this here : It’s a best practice to use errors for Rxjs import { throwError … Read more
# is template reference variable. It defers to DOM element and cannot be used like that. Local variables aren’t implemented in Angular as of now, this closed issue can be monitored for the references to related issues. Since Angular 4 the syntax of ngIf and ngFor directives was updated to allow local variables. See ngIf … Read more
Rxjs v 6.* It got simplified with newer version of rxjs . 1) Operators import {map} from ‘rxjs/operators’; 2) Others import {Observable,of, from } from ‘rxjs’; Instead of chaining we need to pipe . For example Old syntax : source.map().switchMap().subscribe() New Syntax: source.pipe(map(), switchMap()).subscribe() Note: Some operators have a name change due to name collisions … Read more
Operators first() and take(1) aren’t the same. The first() operator takes an optional predicate function and emits an error notification when no value matched when the source completed. For example this will emit an error: import { EMPTY, range } from ‘rxjs’; import { first, take } from ‘rxjs/operators’; EMPTY.pipe( first(), ).subscribe(console.log, err => console.log(‘Error’, … Read more