try to use exportAs in angular2 component

Question

Is exportAs property defined for a component. How can I access outside the component to a method of it? I tried this example

<my-app #my="myApp">
loading...
</my-app>


<button (click)="my.displayMessage()" class="ui button">
  Display popup for message element
</button>

Here the component class

 import {Component} from 'angular2/core'

 @Component({
 selector: 'my-app',
 providers: [],
 template: `
  <div>
    <h2>Hello {{name}}</h2>

  </div>
  `,
  directives: [],
   exportAs: "myApp"
})
export class App {
  constructor() {
   this.name = 'Angular2'
  }

  displayMessage():void {
   console.log('called from component')
  }
}

why do you need `exportAs` ? You can do the same thing by just writing `#my` instead of `#my="myApp"` — Ankit Singh, Apr 30 '16 at 08:16
here it is an example of my problem. https://plnkr.co/edit/PAudXulH5VzecE9fYT1l?p=preview as you could see the button outside the component does not work ... — Antonio, Apr 30 '16 at 09:13
exportAs is used for directives, see: https://plnkr.co/edit/IlLtBY7Ic9yKiRIpjukf?p=preview — born2net, Oct 05 '16 at 16:56

score 3 · Accepted Answer · edited May 23 '17 at 11:46

3

That is not supposed to work. You can't have any #xxx, (xxx) or any other kind of Angular binding outside the template of you root component (App).

You might be looking for something like How to dynamically create bootstrap modals as Angular2 components?

edited May 23 '17 at 11:46

Community

1
1

answered May 01 '16 at 14:45

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · answered Oct 05 '16 at 16:57

exportAs is used for directives, see: http://plnkr.co/edit/IlLtBY7Ic9yKiRIpjukf?p=preview

@Directive({
  selector: "div",
  exportAs: "myDiv"
})
class MyDiv {

  constructor(private element: ElementRef, private renderer: Renderer) {
  }

  toUpper() {
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", "uppercase");
  }

  toLower() {
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", "lowercase");
  }

  reset() {
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", "");
  }
}

score 0 · Answer 3 · answered May 06 '20 at 15:35

0

exportAs was introduced, and has been available from Angular 5.

Angular 2,4 dont have it. Here is the link to Angular.io blog for Angular5

answered May 06 '20 at 15:35

Ali Saberi

864
1
10
33

try to use exportAs in angular2 component

3 Answers3