0

I am using Angular CLI 6.1.4 and i am currently struggeling with the following issue:

I created a structural directive which should work similar to *ngIf but taking html-element name or id attribute values to decide whether its shown or not.

The problem is that i just cant get my <button>'s name attribute passed to my structural directive.

My Button:

<button name="bla" *ngIfVisible="this.name">TEST</button> //this is not working!

My structural directive

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
import { UserPermissionService } from '../services/user-permission.service';

@Directive({
  selector: '[ngIfVisible]'
})
export class NgIfVisible {

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

  @Input()
  set ngIfVisible(name: any) {
      if (this.userPermissionService.isElementVisible(name)) {
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainer.clear();
      }
  }
}

I simply want that the name bla is passed to the directive...

I already tried:

<button #name="bla" *ngIfVisible="name">TEST</button>

and

<button name="bla" *ngIfVisible="$(this).attr('name')">TEST</button>

But none of them works... Please Help!

CrazyEight
  • 147
  • 1
  • 18

1 Answers1

0

Try:

<button *ngIfVisible="name;name:'bla'">TEST</button>

And in your directive, read the extra name property as ngIfVisibleName (notice how it is Name here and not name) as an Input just like you're doing with ngIfVisible.

How to use Angular structural directive with multiple inputs

AliF50
  • 16,947
  • 1
  • 21
  • 37
  • this would probably work, but then i am passing a undefined value to my directive property and `bla` to my `@Input`... when the name attribute of the button changes then i have to fix this in name attribute and also in `*ngIfVisible="name;name:'bla'"`. Wouldnt it be better if i could pass the actual `name` attribute of the button? – CrazyEight Mar 16 '20 at 13:24
  • https://stackoverflow.com/questions/41299046/structural-directive-finding-the-element-it-is-placed-on Apparently you can't get a handle on the element if you are using a structural directive. – AliF50 Mar 16 '20 at 13:34