Angular 2. Bind data from directive to template

Question

It's possible bind data from directive to template, where directive was add? For example I want display dirText:

[plunker][1]

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div my-dir>Text from dir: {{dirText}}</div>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Its component text`
  }
}

@Directive({
  selector: '[my-dir]'
})

export class MyDir{
  dirText: string;
  constructor(){
    this.dirText = 'Text from Dir';
  }
}

Closing it as the question is not meaningful.. you can use a component instead of directive. why specifically you use directive? — Aravind
– Aravind, Commented Jun 17, 2017 at 19:26

yurzui · Accepted Answer · 2017-06-17 19:36:24Z

4

You can use exportAs property. It is name under which the component instance is exported in a template

my.directive.ts

@Directive({
  selector: '[my-dir]',
  exportAs: 'myDir'
})
export class MyDir {
  ...

parent.html

<div my-dir #x="myDir">Text from dir: {{x.dirText}}</div>

Plunker Example

answered Jun 17, 2017 at 19:36

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

2 Comments

Max Koretskyi Over a year ago

the exportAs is used to provide a way to reference a directive in a template, correct? something like <form #heroForm="ngForm"><input [disabled]="!heroForm.form.valid">.... It doesn't provide any additional value inside the parent component instance since we can use @ViewChild(MyDir) even if the directive doesn't define exportAs?

yurzui Over a year ago

Yes, that is. We can use @ViewChild(MyDir) without exportAs

Collectives™ on Stack Overflow

Angular 2. Bind data from directive to template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related