Only call method once when binding attribute in Angular

Question

In the [data] attribute in the object tag, a method is called that returns a link to a PDF, which then the browsers default PODF viewer. The problem that I am encountering is that the PDF viewer keeps flashing because the method keeps getting called and returning the URL. Is there a way I can only fire this method once?

 <div *ngSwitchCase="'pdf'"
       id="pdf"
       class="pdf">

    <object style="width: 100%; height: 100%;"
            [data]="returnEncodedLink()"> </object>

  </div>

call this method in your .ts and store response in a variable and pass that variable in this [data] attribute. — Farhat Zaman
– Farhat Zaman, Commented Jun 16, 2022 at 9:33

Chris Hamilton · Accepted Answer · 2022-06-16 10:17:57Z

1

Every time change detection fires it will check all variables in your template to see if they have changed.

If you provide a function, change detection will need to call the function in order to see if it returns a different value.

If you only want your function to be called once, then just call it in the ngOnInit lifecycle hook, and assign the result to a variable. Then change detection can simply check the identity of this variable rather than calling your function.

In component ts file

encodedLink = '';

ngOnInit(){
   this.encodedLink = this.returnEncodedLink();
}

html

<div *ngSwitchCase="'pdf'" id="pdf" class="pdf">
  <object
    style="width: 100%; height: 100%"
    [data]="encodedLink"
  ></object>
</div>

answered Jun 16, 2022 at 10:17

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zrelli Majdi · Accepted Answer · 2022-06-16 15:54:15Z

1

Use getter method and it will be only trigger if its return value changed. Ts file:

encodedLinkData = ''
...
get returnEncodedLink(){
return encodedLinkData
}

Html file:

 <div *ngSwitchCase="'pdf'"
       id="pdf"
       class="pdf">

    <object style="width: 100%; height: 100%;"
            [data]="returnEncodedLink"> </object>

  </div>

edited Jun 16, 2022 at 15:54

answered Jun 16, 2022 at 9:56

Zrelli Majdi

1,2682 gold badges11 silver badges16 bronze badges

2 Comments

Zrelli Majdi Over a year ago

sorry for mistake ..I have edited it to [data]="returnEncodedLink"

Khaled Ayed Over a year ago

good approach to use getter function, that's a good way to Intercept every change automatically.

Collectives™ on Stack Overflow

Only call method once when binding attribute in Angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related