I'm using the @ng-bootstrap/ng-bootstrap which adds Bootstrap ponents to Angular. You can inject ponents into an opened Modal, so the injected ponent makes up the body/content of the opened modal.

I have a list of Player. When I click a player, I want to open a Modal with the clicked player's data inside of it. I can open a Modal with the injected PlayerComponent like this.

constructor(
  private modalService: NgbModal
) { }

openPlayerModal() {
  const modalRef = this.modalService.open(PlayerComponent)
}

The question is... How do I inject additional data to the ponent to let it know what player's data to fetch? E.g. I might have an OnInit interface on the PlayerComponent that fetches data from an API based on an ID supplied by the modalService.open() call.

I'm using the @ng-bootstrap/ng-bootstrap which adds Bootstrap ponents to Angular. You can inject ponents into an opened Modal, so the injected ponent makes up the body/content of the opened modal.

I have a list of Player. When I click a player, I want to open a Modal with the clicked player's data inside of it. I can open a Modal with the injected PlayerComponent like this.

constructor(
  private modalService: NgbModal
) { }

openPlayerModal() {
  const modalRef = this.modalService.open(PlayerComponent)
}

The question is... How do I inject additional data to the ponent to let it know what player's data to fetch? E.g. I might have an OnInit interface on the PlayerComponent that fetches data from an API based on an ID supplied by the modalService.open() call.

• javascript
• angular
• ng-bootstrap

• I don't think you can do it with that service: github./ng-bootstrap/ng-bootstrap/blob/master/src/modal/… there isn't a parameter for additional data. The only way is to use a shared service it seems. – eko Commented Jun 7, 2017 at 10:57
• Isn't it possible to instantiate the ponent before passing it to the open() method? – Marcus Lind Commented Jun 7, 2017 at 10:59
• It is possible if you are using createComponent and it's resolver to dynamically create a ponent but idk how that works with the library you are using. – eko Commented Jun 7, 2017 at 11:05
• I found a solution. Check it out below. – Marcus Lind Commented Jun 7, 2017 at 11:10
• Glad you figured it out :-) – eko Commented Jun 7, 2017 at 11:10

1 Answer 1

It seems like @ng-angular/ng-angular allow you to touch the ponent instance after it has been instantiated. So you can then modify the values.

So solution would be:

constructor(
  private modalService: NgbModal
) { }

openPlayerModal() {
  const modalRef = this.modalService.open(PlayerComponent)
  modalRef.ponentInstance.player_id = 1;
}

And then make the ponent use an @Input() decorator on player_id.

export class PlayerComponent {
  @Input() player_id;
  ...
}