Posts

Showing posts with the label Rxjs

Angular5: Need To Prevent NgbTooltip From Rendering Before Data Is Returned From Observable

Answer : Look into using OnInit lifecycle hook which is processed first when a component is loaded. Documentation For ngOnInit Thats simple enough, then move that call to the service as seen below into the life cycle hook. Give the class a public variable ie public toolTipData: string; (moved into OnInit) this.planService.getAuditDetails(planId, fieldName, fieldValue) .subscribe((auditDetail: AuditDetail) => { this.tooTipData = auditDetail.toolTipInfo // (guessing at name) this.auditDetail = auditDetail; this.loadCompleted = true); }, (errors) => { console.log(errors) // api error status code. } }); In the HTML set the tool tip value to [ngbTooltip]="toolTipData" This should help populate the tool tip appropriately. The asynchronous changes aren't showing up because NgbTooltip window uses ChangeDetectionStrategy.OnPush and the only way to trigger change detection is calling open() on a closed tooltip. In order t...

Angular 4+ NgOnDestroy() In Service - Destroy Observable

Answer : OnDestroy lifecycle hook is available in providers. According to the docs: Lifecycle hook that is called when a directive, pipe or service is destroyed. Here's an example: @Injectable() class Service implements OnDestroy { ngOnDestroy() { console.log('Service destroy') } } @Component({ selector: 'foo', template: `foo`, providers: [Service] }) export class Foo implements OnDestroy { constructor(service: Service) {} ngOnDestroy() { console.log('foo destroy') } } @Component({ selector: 'my-app', template: `<foo *ngIf="isFoo"></foo>`, }) export class App { isFoo = true; constructor() { setTimeout(() => { this.isFoo = false; }, 1000) } } Notice that in the code above Service is an instance that belongs to Foo component, so it can be destroyed when Foo is destroyed. For providers that belong to root injector this will happen on application destroy, t...

BehaviorSubject Vs Observable?

Image
Answer : BehaviorSubject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable. The unique features of BehaviorSubject are: It needs an initial value as it must always return a value on subscription even if it hasn't received a next() Upon subscription, it returns the last value of the subject. A regular observable only triggers when it receives an onnext at any point, you can retrieve the last value of the subject in a non-observable code using the getValue() method. Unique features of a subject compared to an observable are: It is an observer in addition to being an observable so you can also send values to a subject in addition to subscribing to it. In addition, you can get an observable from behavior subject using the asObservable() method on BehaviorSubject . Observable is a Generic, and BehaviorSubject is technically a sub-type of Observable because BehaviorSubject is an observable wi...