Angular 2: How to access Template Input Variables in Structural Directives

Question

How do I access Template Input Variables in my own Custom Structural Directive?

@Directive({
   selector: "[myCustomDirective]"
})
export class MyCustomDirective {
}

The documentation says that A template input variable is a variable whose value you can reference within a single instance of the template.

<div *myCustomDirective="let visible = true"></div>

I know that the template now has an input called let-visible but how do I access it?

------------------- EDIT -------------------

I want to be able to accept multiple Inputs using the structural directive. Is that possible?

I want one Input to be assigned to myCustomDirective itself and one to visible thats why I was trying to use the let visible syntax like ngFor does.

You want to access the value of "visible" inside your custom structural directive? — user6801750
– user6801750, Commented Mar 1, 2017 at 16:31

Igor · Accepted Answer · 2017-03-01 16:42:00Z

1

You have to also import Input at the top of your directive module.

@Directive({
   selector: "[myCustomDirective]"
})
export class MyCustomDirective {
  @Input()
  set myCustomDirective(isVisible: boolean): void {
    // do something with isVisible
  }
}

Usage of directive.

<div *myCustomDirective="true"></div>

edited Mar 1, 2017 at 16:42

answered Mar 1, 2017 at 16:35

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

takeradi Over a year ago

But I did mention that I am creating my own custom Structural Directive. Thats why it leads with the * character.

Igor Over a year ago

@takeradi - I removed the comment but I will leave the rest as is considering its applicable to either type of directive.

takeradi Over a year ago

So your answer is not valid for my case. Also I am not sure if you can use a [visible] input on a div. Div is not a custom component so how can you assign an Input to it?

user6801750 · Accepted Answer · 2017-03-01 16:43:27Z

0

You can try the below:

            import { Directive,Input,...} from '@angular/core';
            @Directive({
               selector: "[myCustomDirective]"
            })
            export class MyCustomDirective {

            //using the Input decorator, we can accept the value of the property (in our case, it is myCustomDirective)and //use it inside our directive class.
             @Input('myCustomDirective')
              private visible: boolean;

              //console.log(this.visible);

            }

            // Use it, maybe like this:
            <div *myCustomDirective="true"></div>

answered Mar 1, 2017 at 16:43

user6801750

2423 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular 2: How to access Template Input Variables in Structural Directives

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related