refactor: deprecate the attribute usage of the permission directive

npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts

@@ -1,10 +1,10 @@
 import {
+  ChangeDetectorRef,
   Directive,
   ElementRef,
   Input,
   OnChanges,
   OnDestroy,
-  OnInit,
   Optional,
   Renderer2,
   SimpleChanges,
@@ -17,43 +17,47 @@ import { PermissionService } from '../services/permission.service';
 @Directive({
   selector: '[abpPermission]',
 })
-export class PermissionDirective implements OnInit, OnDestroy, OnChanges {
+export class PermissionDirective implements OnDestroy, OnChanges {
   @Input('abpPermission') condition: string;
 
   subscription: Subscription;
 
   constructor(
-    private elRef: ElementRef,
+    private elRef: ElementRef<HTMLElement>,
     private renderer: Renderer2,
     @Optional() private templateRef: TemplateRef<any>,
     private vcRef: ViewContainerRef,
     private permissionService: PermissionService,
+    private cdRef: ChangeDetectorRef,
   ) {}
 
   private check() {
     if (this.subscription) {
       this.subscription.unsubscribe();
     }
+
     this.subscription = this.permissionService
       .getGrantedPolicy$(this.condition)
       .subscribe(isGranted => {
-        if (this.templateRef && isGranted) {
+        if (this.templateRef) this.initStructural(isGranted);
-          this.vcRef.clear();
+        else this.initAttribute(isGranted);
-          this.vcRef.createEmbeddedView(this.templateRef);
+
-        } else if (this.templateRef && !isGranted) {
+        this.cdRef.detectChanges();
-          this.vcRef.clear();
-        } else if (!isGranted && !this.templateRef) {
-          this.renderer.removeChild(
-            (this.elRef.nativeElement as HTMLElement).parentElement,
-            this.elRef.nativeElement,
-          );
-        }
       });
   }
 
-  ngOnInit() {
+  private initStructural(isGranted: boolean) {
-    if (this.templateRef && !this.condition) {
+    this.vcRef.clear();
-      this.vcRef.createEmbeddedView(this.templateRef);
+
+    if (isGranted) this.vcRef.createEmbeddedView(this.templateRef);
+  }
+
+  /**
+   * @deprecated Will be deleted in v5.0
+   */
+  private initAttribute(isGranted: boolean) {
+    if (!isGranted) {
+      this.renderer.removeChild(this.elRef.nativeElement.parentElement, this.elRef.nativeElement);
     }
   }
 
@@ -61,9 +65,7 @@ export class PermissionDirective implements OnInit, OnDestroy, OnChanges {
     if (this.subscription) this.subscription.unsubscribe();
   }
 
-  ngOnChanges({ condition }: SimpleChanges) {
+  ngOnChanges() {
-    if ((condition || { currentValue: null }).currentValue) {
+    this.check();
-      this.check();
-    }
   }
 }