CODEWITHSUNDEEP
angularangular5angular-material2
metalkat
metalkat

Reputation: 620

What is the modern way to do Angular content projection?

I've found a lot of old ways to transclude/content project, and I followed the latest method (I assume) found here: https://blog.angular-university.io/angular-ng-content/

I'm trying to include another components html file inside of a modal in another component. They are sibling components, not parent/child, which is why I think its not working.

Can anyone steer me in the right direction?

Dialog html:

<h1 mat-dialog-title>
    Title here
</h1>

<div mat-dialog-content>
    <ng-content></ng-content>
</div>

<div mat-dialog-actions>
    Actions here
</div>

Dialog component:

import {Component, OnInit}                   from '@angular/core';
import {MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA}                     from '@angular/material';

@Component({
    selector    : 'test-dialog',
    templateUrl : 'test-dialog.html',
    styleUrls   : ['./test-dialog.scss']
})
export class Test implements OnInit
{
    constructor(public  dialog: MatDialog) {}

    ngOnInit(){}
}

test.html, What I want to include:

<test-dialog>
    I want to include this content
</test-dialog>

test component:

import {Component, OnInit}      from '@angular/core';
import {Router}                 from '@angular/router';

@Component({
    selector    : 'test-component',
    templateUrl : './test.html'
})

export class TestComponent implements OnInit
{

    constructor(public router: Router) {}

    ngOnInit(){}
}

EDIT: I also already included CUSTOM_ELEMENTS_SCHEMA inside the module of what I want to include

Upvotes: 3

Views: 1544

Answers (1)

metalkat
metalkat

Reputation: 620

I answered this with a help from a friend.

I simply included the selector in the HTML as you would do if you were placing a component: 

<div mat-dialog-content>
    <test-component>
    </test-component>
</div>

The difference being because it is a sibling component, you have to import the module. If you import the component, Angular will complain about you importing it twice (once in the dialog module and once in the test module).

import {TestModule}       from '../test/test.module';

@NgModule({
    imports: [
        TermsOfServiceModule
    ],

And in test.module you have to export the component

exports: [
    TestComponent
],

Slightly tricky nuance that I hope will help someone else in the future.

Upvotes: 1

Related Questions