CODEWITHSUNDEEP
javascriptangularangular2-directives
Arpit
Arpit

Reputation: 601

angular2 structural directive with String as input

I am trying to create a structural directive with the example given here

Just with a modification to pass string as a Input here, I got 'undefined' as input value while calling this directive form markup. 

@Input() set myUnless(value: String) {
    if (value=== 'something') {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

Any help to achieve this?

Edit: Idea is to create a hasRole directive which accept a Role as String and return boolean on the basis of if this found in roles stored in local storage.

Implementation code is:

 <a routerLink="/list" *unless="ADMIN">
          <i class="fa fa-list"></i> <span>List</span>
 </a>

and code for directive is like:

import { Directive, Input } from '@angular/core';
import { TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[unless]' })
export class Unless {
    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) { }
    @Input() set unless(role: String) {
        return localStorage.getItem('roles').indexOf(role) > -1;
    }
}

Upvotes: 3

Views: 1400

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658037

The property ADMIN of your component is actually undefined ;-)

Use instead

*unless="'ADMIN'"

Upvotes: 3

Related Questions