show/hide div using custom directive Angular 6

Question

I am using a custom directive to show/hide a div

import {
  Directive,
  TemplateRef,
  ViewContainerRef,
  Input,
  OnInit
} from '@angular/core';
import { LocalStorageConstants } from 'src/app/core/constants/local-storage.constants';

@Directive({
  selector: '[isAdminRole]'
})
export class AuthDirective implements OnInit {
  condition: boolean;

  @Input() set isAdminRole(condition: boolean) {
    this.condition = condition;
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  ngOnInit() {
    const privilegeRole = localStorage.getItem(
      LocalStorageConstants.PRIVILEGE_ROLE
    );

    setTimeout(() => {
      if (privilegeRole === 'ADMIN' && this.condition) {
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainer.clear();
      }
    })
  }
}


<div *isAdminRole="true">Hi</div>
<div *isAdminRole="true">Bye</div>

but i am passing true or false from here, which is working the way i expect it too but i want to pass string like ADMIN so that i can have a single check rather than multiple any idea on how to do it

score 0 · Answer 1 · answered Aug 04 '22 at 10:04

here i will recommend simple create an input emitter, not an input setter. and just pass the string from the template. For reference check the below code

 <p *isAdminRole="'ADMIN'">hi</p>
        
  
      @Input('isAdminRole') isAdminRole: string; 
    
      constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
      ) {
    
      
      }
    
      ngOnInit() {
    
        let privilegeRole = localStorage.getItem(
      LocalStorageConstants.PRIVILEGE_ROLE
    );
;
          if (privilegeRole === this.isAdminRole) {
            this.viewContainer.createEmbeddedView(this.templateRef);
          } else {
            this.viewContainer.clear();
          }
      }

Visceras · Answer 2 · 2020-03-26T09:32:54.837

-1

You are setting your condition variable to a boolean .. set it to a string and it should work. You can then use the directive with [adminRole]="role"

//Directive definition
@Directive({
selector: '[adminRole]'
})

//The variable
@Input('adminRole') role:string;

Then use in template like so

['adminRole'] = 'role'

This will help you I believe.

The angular reference on directives.

edited Mar 26 '20 at 09:32

answered Mar 25 '20 at 12:14

Visceras

91
2
8

Nope it didnt work setTimeout(() => { if (this.condition === 'ADMIN') { this.viewContainer.createEmbeddedView(this.templateRef); } else { this.viewContainer.clear(); } }) *adminRole="ADMIN" condition: string; – juhi Mar 25 '20 at 12:21
Use @Input('selectable') role:string; to declare your variable in the template, then invoke the directive in the template using [selectable]="ADMIN". In the variable role you will then have available the string "ADMIN" – Visceras Mar 25 '20 at 12:35
Still not working @Input('selectable') role:string; ngOnInit() { console.log(this.role) }
Hey
– juhi Mar 25 '20 at 12:47
Yeah, your selector is named adminRole and not selectable, as I posted in my comment. Replace 'selectable' with adminRole both in the declaration and invocation in the template. – Visceras Mar 25 '20 at 12:55
Error: StaticInjectorError(AppModule)[NgIf -> TemplateRef]: getting this error @Input('adminRole') role:string; console.log(this.role) [adminRole]="ADMIN" – juhi Mar 25 '20 at 12:59
As the error points out, that has to do with TemplateRef injection. Make sure you got the names right (your selector was isAdminRole not adminRole, not sure if you changed it at the selector declaration) and if the error persists, you need to investigate its cause, as it is not related with the directive. – Visceras Mar 25 '20 at 15:50

show/hide div using custom directive Angular 6

2 Answers2