Angular2 ng-bootstrap: Reuse modal template with different data

Question

I am building a dashboard-like interface with a set of entities containing comparable data. Each of these entities have an edit-button which I would like to use to open a modal with the respective data displayed.

I would like to reuse the same modal template, and display the data from the entity who's edit-button was clicked. I am using Angular2 with ng-bootstrap, which relies on Bootstrap 4.

From the ng-bootstrap modal docs, and it's accompanying plunkr, I was able to create my own working modal component like so (simplified for layout):

//editmodal.html

<template #content let-c="close" let-d="dismiss">
  //Modal html content
</template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Edit</button>

//dashboard.html

<template ngbModalContainer></template>
<edit-modal></edit-modal>

//editmodal.component.ts

@Component({
  selector: 'edit-modal',
  templateUrl: 'entity/assets/templates/editmodal.html'
})

export class EditModal {
  //exported class logic
}

The main thing which struck me as odd, coming from the previous bootstrap version, is that the button to open the modal is now displayed within the template itself, encapsulating it. This makes it hard to attach a reference to it so I could figure out what to show from the class logic. How can I achieve this behaviour with Angular2 and ng-bootstrap?

Lev · Accepted Answer · 2017-03-17 22:39:03Z

2

You can open a modal window that holds a component from anywhere with the NgbModal service.

Call this.ngbModalService.open(NgbdModalContent) where NgbdModalContent is the component you are going to display in your modal.

Check out Components as content:

https://ng-bootstrap.github.io/#/components/modal

answered Mar 17, 2017 at 22:39

Lev

16k16 gold badges64 silver badges92 bronze badges

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

2 Comments

Arnaud H Over a year ago

My data is being fetched from the server as a JSON array [{<entity>},{<entity>}], am I supposed to cast each object to a component, and ...? Or is that not the way to go then?

Lev Over a year ago

There is no casting. You can configure the content of your modal by setting the properties of NgbdModalContent. Like NgbdModalContent.name = entity.name. The value will apear in the {{name}} interpolation of NgbdModalContent's template

Marcus Lind · Accepted Answer · 2017-06-08 08:20:49Z

Similar to what Lev wrote in his answer, you can use the NgbModal.open() method and pass it a component to populate the content of a modal.

Now, you don't just want a component. You also want the component to fetch the data from an API. You can do this by combining the NgbModalRef.componentInstance parameter, with the OnInit interface.

So the solution would be something like this:

constructor(
  private modalService: NgbModal
) { }

openModal() {
  const modalRef = this.modalService.open(MyComponent)
  modalRef.componentInstance.mycomponent_id = 1;
}

Your component look like this:

export class PlayerComponent implements OnInit {
  @Input() mycomponent_id;
  myObject: MyObject;

  ngOnInit() {
    this.myService.getObject(mycomponent_id)
      .subscribe(value => this.myObject = value);
  }
  ...
}

So basically to summarize it. You open the modal by passing it the component you want as content. Then you set the mycomponent_id value from outside your component. After this your component will run the ngOnInit() method which allow you to use the mycomponent_id value to fetch the correct data from your API using your service.

Collectives™ on Stack Overflow

Angular2 ng-bootstrap: Reuse modal template with different data

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related