How to cache component and reuse based on custom directive in Angular?

Question

I'm having a custom directive that evaluates user's permission to access a component, let say ngIfPerm.

set ngIfPerm(val) {
  // set val
  if (/*true condition*/) {
    this.viewContainer.createEmbbededView(this.templateRef)
  } else {
    this.viewContainer.clear()
  }
}

This directive is put in some buttons that are duplicated on rows of a table to decide if the button should be rendered and displayed. For example, this button appears on every row of a table if the user has EDIT permission:

<button *ngIfPerm="EDIT" (click)="edit(rowData)>Edit</button>

The problem is, Angular re-render this button instead of reuse it on the second row of the table. This cause the performance of the application decrease drastically if the button is placed in multiple places.

My question is, is there a mechanism that helps caching this button after first successful render and reuse it anytime it is called again? (like a cached template)

I've read about templateCache but it is for AngularJS, and I'm using Angular9 with TypeScript.

Thanks in advance.