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
– Ankit Singh, Commented Apr 30, 2016 at 8:16
here it is an example of my problem. plnkr.co/edit/PAudXulH5VzecE9fYT1l?p=preview as you could see the button outside the component does not work ... — Antonio
– Antonio, Commented Apr 30, 2016 at 9:13
exportAs is used for directives, see: plnkr.co/edit/IlLtBY7Ic9yKiRIpjukf?p=preview — born2net
– born2net, Commented Oct 5, 2016 at 16:56

Community · Accepted Answer · 2017-05-23 11:46:44Z

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, 2017 at 11:46

CommunityBot

11 silver badge

answered May 1, 2016 at 14:45

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

born2net · Accepted Answer · 2016-10-05 16:57:58Z

1

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", "");
  }
}

answered Oct 5, 2016 at 16:57

born2net

25.1k22 gold badges72 silver badges107 bronze badges

Comments

user84 · Accepted Answer · 2020-05-06 15:35:02Z

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 6, 2020 at 15:35

user84

9051 gold badge15 silver badges46 bronze badges

Collectives™ on Stack Overflow

try to use exportAs in angular2 component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related