Directive like *ngIf

app.component.html

<h1 *appAuthorization="{resource:'app',operation:'read'}">You now have access to read the resource app</h1>

authorization.directive.ts

import {
  Directive,
  EmbeddedViewRef,
  Input,
  TemplateRef,
  ViewContainerRef,
} from "@angular/core"

class AuthorizationContext {
  public resource: any = null
  public operation: any = null
}

@Directive({
  selector: "[appAuthorization]",
})
export class AuthorizationDirective {
  @Input()
  set appAuthorization({ resource, operation }: any) {
    this._context.resource = resource
    this._context.operation = operation
    this.updateView()
  }

  private _context: AuthorizationContext = new AuthorizationContext()
  private _thenTemplateRef: TemplateRef<AuthorizationContext> | null = null
  private _thenViewRef: EmbeddedViewRef<AuthorizationContext> | null = null
  constructor(
    private _viewContainer: ViewContainerRef,
    templateRef: TemplateRef<AuthorizationContext>,
  ) {
    this._thenTemplateRef = templateRef
  }
  private updateView() {
    const isAuthorized = this.isAuthorized()
    if (isAuthorized) {
      this._viewContainer.clear()
      if (this._thenTemplateRef) {
        this._thenViewRef = this._viewContainer.createEmbeddedView(
          this._thenTemplateRef,
          this._context,
        )
      }
    }
  }
  private isAuthorized() {
    return (
      this._context.resource === "crud" && this._context.operation === "read"
    )
  }
}