title: Angular11 using function in *ngIf in the template is getting invoked many times. how to avoid
body: <p>I have the following code. I am using a function in *ngIf and it is being called many times. How to fix this? Can anyone help me with this?</p>
  <pre><code>        &lt;button
              type=&quot;button&quot;
              class=&quot;button primary&quot;
              *ngIf=&quot;canComplete() | async&quot;
              (click)=&quot;complete()&quot;
          &gt;
              &lt;span *ngIf=&quot;!userCanCompleteAudit&quot;&gt;Complete assigned sections&lt;/span&gt;
              &lt;span *ngIf=&quot;userCanCompleteAudit&quot;&gt;Complete audit&lt;/span&gt;
          &lt;/button&gt;
  
  canComplete() {
      return this.service.sub$.pipe(
          takeUntil(this.cancel$),
          take(1),
          map(
              (responses) =&gt;
                  responses.every((r) =&gt; r.valid)
          )
      );
  }
  </code></pre>