Angular 4 custom directive to hide element is not working

Question

I am creating a custom directive to hide elements on certain conditions but its not working as per the instruction i found googling.

All other things working but element is not effecting display property

Use of directive:

<div manAuthorized [permission]="'permission-string'" class="col-2 data-object-link">

Actual directive:

@Directive({
  selector: '[manAuthorized]'
})
export class AuthorizedDirective implements OnInit {

  @Input() permission: string;
  private userObservable: Observable<UserAuthorizations>;
  private currentUser: any;

  constructor(private elementRef: ElementRef, private configService: ConfigService, private currentUserService: CurrentUserService) {
    this.userObservable = this.currentUserService.getCurrentUser();
  }

  ngOnInit(): void {
    this.userObservable.subscribe((user) => {
      this.currentUser = user;
      if (!this.authorized()) {
        this.elementRef.nativeElement.display = 'none';
      }
    });
  }

  private authorized() {
    return true;
  }
}

in my opinion better approach would be to use viewcontainerref.clear() a great example here https://netbasal.com/the-power-of-structural-directives-in-angular-bfe4d8c44fb1 — Karan Garg, Jul 17 '17 at 16:21
Another post showing an alternative approach: https://stackoverflow.com/questions/43517660/directive-that-works-as-ng-if-angular-2 — Alexander Nied, Jan 06 '22 at 21:41

score 14 · Accepted Answer · edited Nov 16 '18 at 22:48

14

You need to handle the style property which have display. as you are trying to set display directly, it did not work.

this.elementRef.nativeElement.style.display = 'none';

edited Nov 16 '18 at 22:48

artemnih

4,136
2
18
28

answered Jul 17 '17 at 15:38

Aniruddha Das

20,520
23
96
132

Lot of example available online are directly calling display. let me try this. – Gagandeep Kaur Jul 17 '17 at 15:39
1

may be these were in old version for of angular. – Aniruddha Das Jul 17 '17 at 15:40
2

I was trying to use a `viewContainerRef.clear()` call, but it would not work. Your solution does work. – Stephane May 02 '20 at 10:56

score 1 · Answer 2 · answered Jun 09 '21 at 11:36

1

constructor(private ref: ElementRef<HTMLElement>) {}
ngAfterViewInit(): void {
  if (isTeamsWindow()) this.ref.nativeElement?.remove();
}

should do it but weird that viewContainerRef does not work.

answered Jun 09 '21 at 11:36

Venipa

23
1
1
5

Angular 4 custom directive to hide element is not working

2 Answers2