How to make a dynamic modal using angular 2

Question

I want to make a custom modal. The problem is I dont know how to dynamically load the template url into the modal. I can do everything but dynamically load the url or another similar approach.

Thanks, MW

Answer 1

It's simple! Just create a component that represents your modal and use ngTransclusion to insert html inside the component. Example:

// my-modal.component.ts
import {Component} from 'angular2/core';

@Component({
  selector: 'my-modal',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `
})
export class MyModal{}

using the modal:

// app.component.ts
import {Component} from 'angular2/core';
import {MyModal} from './my-modal.component';

@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <my-modal>
        This is my transcluded content inside my modal!
      </my-modal>
    </div>
  `,
  directives: [
    MyModal
  ]
})
export class AppComponent {}

NgTransclusion is a builtin tool, so you don't need to import nothing!