create visible directive

npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts

@@ -2,3 +2,4 @@ export * from './ellipsis.directive';
 export * from './loading.directive';
 export * from './ngx-datatable-default.directive';
 export * from './ngx-datatable-list.directive';
+export * from './visible.directive';

npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts

@@ -0,0 +1,59 @@
+import { OnInit, Directive, OnDestroy, Input, ViewContainerRef, TemplateRef } from '@angular/core';
+import { EMPTY, from, Observable, of, Subscription } from 'rxjs';
+
+@Directive({
+  selector: '[abpVisible]',
+})
+export class AbpVisibleDirective implements OnDestroy, OnInit {
+  conditionSubscription: Subscription | undefined;
+  isVisible: boolean | undefined;
+
+  @Input('abpVisible') set abpVisible(
+    value: boolean | Promise<boolean> | Observable<boolean> | undefined | null,
+  ) {
+    this.condition$ = checkType(value);
+    this.subscribeToCondition();
+  }
+
+  private condition$: Observable<boolean> = of(false);
+
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private templateRef: TemplateRef<unknown>,
+  ) {}
+  ngOnInit(): void {
+    this.updateVisibility();
+  }
+  ngOnDestroy(): void {
+    this.conditionSubscription?.unsubscribe();
+  }
+
+  private subscribeToCondition() {
+    this.conditionSubscription = this.condition$.subscribe(value => {
+      this.isVisible = value;
+      this.updateVisibility();
+    });
+  }
+  private updateVisibility() {
+    this.viewContainerRef.clear();
+    // it should be false not falsy
+    if (this.isVisible === false) {
+      return;
+    }
+    this.viewContainerRef.createEmbeddedView(this.templateRef);
+  }
+}
+
+function checkType(value: boolean | Promise<boolean> | Observable<boolean> | undefined | null) {
+  if (value instanceof Promise) {
+    return from(value);
+  } else if (value instanceof Observable) {
+    return value;
+  } else if (typeof value === 'boolean') {
+    return of(value);
+  } else if (value === undefined || value === null) {
+    return of(true);
+  } else {
+    return EMPTY;
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -36,6 +36,7 @@ import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.t
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
 import { PasswordComponent } from './components/password/password.component';
+import { AbpVisibleDirective } from './directives';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -52,6 +53,7 @@ const declarationsWithExports = [
   NgxDatatableListDirective,
   LoadingDirective,
   ModalCloseDirective,
+  AbpVisibleDirective,
 ];
 
 @NgModule({