Angular 2 dynamic component click event

Question

I'm trying to create components dynamically but i want to add a click action to it and i don't know how. I was trying to do this:

  constructor(public navCtrl: NavController, private resolver: ComponentFactoryResolver) {
    this.lastSelectedResource = this.defaultImage;
  }

  public createNew() {
    this.container.detach(0);
  }

  ngAfterContentInit() {
    let widgetFactory = this.resolver.resolveComponentFactory(CreateComponent);
    let widgetReference = this.container.createComponent(widgetFactory);
    widgetReference.instance.click = this.createNew;
  }

but isn't the way do that. Anybody knows how?

Community · Accepted Answer · 2017-05-23 12:25:43Z

3

You can inject the renderer and use

this.renderer.listen(widgetReference.location.nativeElement, 'click', (event) => { this.createNew(e);});

Similar to Angular2 - catch/subscribe to (click) event in dynamically added HTML

(widgetReference.location provides the ElementRef)

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Nov 21, 2016 at 17:13

Günter Zöchbauer

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

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

1 Comment

luisurrutia Over a year ago

Thanks u, this is the solution that i was looking for! :D

Collectives™ on Stack Overflow

Angular 2 dynamic component click event

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related