Insert child components by reference in angular 2

Question

I'm creating a custom modal component in angular two. It has modalTitle and modalContent strings that I've decorated with @Input so they can be modified.

import { Component, Input } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';

// import {RandomComponent} from './somewhere'

@Component({
    selector: 'custom-modal',
    template: `
<md-card [ngClass]="'dialog-card'">
  <md-card-title>

    {{modalTitle}}

    </md-card-title>
  <md-card-content>

   {{modalContent}}

   <br/>
  </md-card-content>
</md-card>
`
})

export class CustomModal {
    fullName: string = '';

    @Input() modalTitle: string;
    @Input() modalContent: string;

    constructor(public dialogRef: MdDialogRef < TmModal > ) {
        super();
        this.modalTitle = 'modal'
        this.modalContent = "I'm some sample content."

    }

    ngOnInit() {}

    confirm() {
        this.dialogRef.close({
            success: true,
            data: {}
        });
    }

    cancel() {
        this.dialogRef.close({
            success: false
        });
    }
}

Now, this component is being consumed by another as follows:

import { Component, Input } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';

// import {RandomComponent} from './somewhere'


@Component({
    selector: 'custom-modal-instance',
    template: `
   <custom-modal 
      [modalTitle]="modalTitleHere"
      [modalContent]="modalContentHere"
   >
   </custom-modal>
  `
})

export class CustomModalInstance {
    modalTitleHere = 'Custom modal title'
    modalContentHere = 'Custom modal text stuff'
}

So far, so good.

What I want is for the modal content to be an angular component instead of a string. So, in CustomModalInstance, I can import a RandomComponent defined somewhere and have it show inside the CustomModal, where currently there's a string.

Is it possible to achieve?

Any help will be appreciated. Thanks.

Possible duplicate of [How to dynamically create bootstrap modals as Angular2 components?](http://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components) — eko, Jan 10 '17 at 13:11

score 1 · Answer 1 · answered Jan 10 '17 at 20:07

The same can be handled using Projection/Transclusion by means of ng-content directive.

custom-modal.component.ts

import { Component, Input } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';

@Component({
    selector: 'custom-modal',
    template: `
<md-card [ngClass]="'dialog-card'">
  <md-card-title>

    {{modalTitle}}

    </md-card-title>
  <md-card-content>

      <ng-content></ng-content>


   <br/>
  </md-card-content>
</md-card>
`
})

export class CustomModal {
    fullName: string = '';

    @Input() modalTitle: string;
    @Input() modalContent: string;

    constructor(public dialogRef: MdDialogRef < TmModal > ) {
        super();
        this.modalTitle = 'modal'
        this.modalContent = "I'm some sample content."

    }

    ngOnInit() {}

    confirm() {
        this.dialogRef.close({
            success: true,
            data: {}
        });
    }

    cancel() {
        this.dialogRef.close({
            success: false
        });
    }
}

custom-modal-instance.component.ts

    import { Component, Input } from '@angular/core';
    import { MdDialog, MdDialogRef } from '@angular/material';

    import {RandomComponent} from './somewhere'


    @Component({
        selector: 'custom-modal-instance',
        template: `
       <custom-modal 
          [modalTitle]="modalTitleHere"
          [modalContent]="modalContentHere"
       >
         <h5> Send this content to the custom modal component </h5>
         <random></random>
       </custom-modal>
      `
    })

    export class CustomModalInstance {
        modalTitleHere = 'Custom modal title'
        modalContentHere = 'Custom modal text stuff'
    }

Here is a plunker link for example of the same: http://plnkr.co/edit/4Ajw6j?p=preview

Insert child components by reference in angular 2

1 Answers1