Load asynchonous data in templates

[Carla Candiotti]

Hello,

I would like to customize schedule's quick infos template.

I saw that directive #quickInfoTemplatesContent and let-data which works fine when displaying data attributes.

But I need to perform a HTTP request to get some additionnal data to display in the template and I have some trouble.

Seems like the template refreshes continually even if nothing changes and subscribes to my HTTP request each time. The result is my async data is continually loading. The subscriptions are never unsubscribed.

See example on stackblitz: https://stackblitz.com/edit/angular-1uns36?file=app.component.html,app.component.ts,app%2Fapp.module.ts,content.txt

Do you have any idea?

Thanks for your response!

[Carla Candiotti]

Hello,

Do someone have an idea?

Thanks

[Ravikumar Venkatesan]

Angular doesn’t know whether the value returned from the methods bound to the template is changed or not. So, the Angular change detection calls the method bound to the template on each change detection. You can resolve the problem by setting up the changeDetection value as highlighted in the snippet.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-quick-info-template-change-detectio?file=app.component.ts

[app.component.ts]

import { Component, ViewChild, ViewEncapsulation, Inject, ChangeDetectionStrategy } from '@angular/core';

 

@Component({

  // tslint:disable-next-line:component-selector

  selector: 'app-root',

  templateUrl: 'app.component.html',

  styleUrls: ['app.component.css'],

  encapsulation: ViewEncapsulation.None,

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class AppComponent {

}

If this post is helpful, consider accepting it as the solution so that other members can locate it more quickly.