Angular: template reference variable with directives

Question

I read in the Angular docs that we can use a template reference variable on a custom component and we can get access to the public methods and properties of this component.

I tried the same on an element with a directive and it does not work.

<table #myTable my-directive>
    <tr>
       <th>Name</th>
    </tr>
    <tr>
        <!--test value is a prop of my directive -->
        <td>Some text: {{ myTable.testValue }}</td> 
    </tr>
</table>

Is it possible to use a template reference variable with a directive to get access to this directive's properties?

Abinesh Devadas · Accepted Answer · 2018-05-09 19:41:26Z

12

Yes, you can use exportAs property of Directive metadata declartion

@Directive({
  selector: '[my-directive]',
  exportAs: "myDirective"
})
export class MyDirective {
  name: string = "Hello World";
  constructor() { }
}

Then in your html you should access as follows

<div my-directive #t=myDirective>
  {{ t.name }}
</div>

answered May 9, 2018 at 19:41

Abinesh Devadas

1,55713 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Angular: template reference variable with directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related