user2313300 user2313300 - 28 days ago 12x
AngularJS Question

Angular 2 Multiple Slot Transclusion

As of RC 5 the following syntax worked just fine for multiple slot transclusion in Angular 2

This was the template component with a selector


<div class="statement-card bottom-right-shadow">
<div class="row">
<div class="col-xs-12">
<div class="statement-card-title">
<!-- title -->
<ng-content select="statement-card-title"></ng-content>
<div class="row statement-card-body">
<div class="col-md-4">
<!-- statment summary -->
<ng-content select="statement-card-summary"></ng-content>
<div class="col-md-4">
<!-- payment amount -->
<ng-content select="statement-card-addition"></ng-content>
<div class="col-md-4">
<!-- payment method -->
<ng-content select="statement-card-payment-method"></ng-content>
<div class="row statement-card-footer">
<div class="col-md-4 col-md-offset-8">
<ng-content select="statement-card-interactions"></ng-content>

This was one of the components which filled in the template with data

<div class="schedule-statement-title">Payment schedule</div>
<h4 class="statement-card-section-title">Payment frequency:</h4>
Next payment: {{payment?.scheduledDate | date:'MMMM dd, yyyy'}}
<h4 class="statement-card-section-title">Payment amount:</h4>
<div class="addition-line"><span>Amount</span><span>{{payment?.amount}}</span></div>
<div class="addition-line"><span>Sales tax</span><span>{{payment?.salesTax}}</span></div>
<hr class="addition-seperator" />
<div class="addition-total"><span>Total</span><span>{{getPaymentTotal()}}</span></div>
<h4 class="statement-card-section-title">Payment method:</h4>
<img src="images/bank.png" width="48" height="48" class="payment-method-icon" />
<div class="payment-method-summary">
<div>Account ending in ••••••••••1234</div>
<div class="row">
<div class="col-md-6">
<a href="#" class="pull-right">MAKE A PAYMENT</a>
<div class="col-md-6">
<a href="#" class="pull-right">VIEW PAYMENT SCHEDULE</a>

In Angular 2 RC 5 and below you could specify an ng-content tag with a select attribute in a template component and then in a specific component directly create an html tag that matched the select attribute in the ng-content tag and it would transclude the children html content into the ng-content tag.

Now that I have upgraded to angular 2 it is throwing an error like this for all of the transclusion slots:

'statement-card-title' is not a known element:
1. If 'statement-card-title' is an Angular component, then verify that it is part of this module.
2. If 'statement-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
[ERROR ->]
Payment schedule

Do I now have to make a separate component for all of the transclusion slots?? If not how do I fix my component so that angular recognizes this is multiple transclusion?


This is a known "issue".

You can fix it by passing

 schemas:   [ CUSTOM_ELEMENTS_SCHEMA ],    

to @NgModule(...) to explicitly tell Angular2 it should accept all tag names that fit the custom elements name scheme even when the components are not known to your current Angular2 module.

If you add the component with this selector to directives: [...] of the @NgModule(...) then Angular2 also won't complain anymore.

See also for more details.