How to inject a component instance in angular2

Question

Let's say I want to implement a lightbox component, which uses <dialog> to render its content. Something like:

@Component({
  selector: 'image-popup',
  template: `
  <dialog>
  ...
  </dialog>
`
})
export class ImagePopupComponent {
...
  show(): void {
    this.element.nativeElement.showModal();
  }
}

If I create an instance of this in the main app component, how can I enable its access from other components. For eg., in some descendant component, I have a button where I want the click to trigger show() on this dialog instance. In my use case, this component will have an imageUrl property, and the same component will be used multiple times to show different images.

Use a shared service. There are tons of similar questions with answers. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 20, 2016 at 15:54
Martin's comment below looks correct. Please note that by default service injections are singletons. So you'll be receiving the same instance of 'MyModalService' in all your components. — Dan Rasmuson
– Dan Rasmuson, Commented Feb 20, 2016 at 21:38

martin · Accepted Answer · 2016-02-20 16:35:51Z

2

You can use a service for this.

@Injectable()
export class MyModalService {
    component: MyModal;
}

@Component({
    selector: 'my-modal',
})
export class MyModal {
    constructor(private element: ElementRef, modalService: MyModalService) {
        modalService.component = this;
    }

    show(): void {
        this.element.nativeElement.showModal();
    }
}

Then in some other component:

@Component({
    selector: 'another',
})
export class AnotherComponent {
    constructor(private _modalService: MyModalService) {
    }

    buttonClicked() {
        this._modalService.show();
    }
}

answered Feb 20, 2016 at 16:35

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

1 Comment

Christophe Gigax Over a year ago

With this method, will the MyModal template render automatically ? For exemple if MyModal use a bootstrap modal, and I use this.element.nativeElement.modal(), will the bootstrap modal appear automatically ?

Collectives™ on Stack Overflow

How to inject a component instance in angular2

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related