title: Angular 2 Multiple Slot Transclusion
body: <p>As of RC 5 the following syntax worked just fine for multiple slot transclusion in Angular 2</p>
  
  <p>This was the template component with a selector <code>statement-card</code></p>
  
  <pre><code>&lt;div class="statement-card bottom-right-shadow"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div class="statement-card-title"&gt;
                  &lt;!-- title --&gt;
                  &lt;ng-content select="statement-card-title"&gt;&lt;/ng-content&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row statement-card-body"&gt;
          &lt;div class="col-md-4"&gt;
              &lt;!-- statment summary --&gt;
              &lt;ng-content select="statement-card-summary"&gt;&lt;/ng-content&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;!-- payment amount --&gt;
              &lt;ng-content select="statement-card-addition"&gt;&lt;/ng-content&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;!-- payment method --&gt;
              &lt;ng-content select="statement-card-payment-method"&gt;&lt;/ng-content&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row statement-card-footer"&gt;
          &lt;div class="col-md-4 col-md-offset-8"&gt;
              &lt;ng-content select="statement-card-interactions"&gt;&lt;/ng-content&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This was one of the components which filled in the template with data</p>
  
  <pre><code>&lt;statement-card&gt;
      &lt;statement-card-title&gt;
          &lt;div class="schedule-statement-title"&gt;Payment schedule&lt;/div&gt;
      &lt;/statement-card-title&gt;
      &lt;statement-card-summary&gt;
          &lt;h4 class="statement-card-section-title"&gt;Payment frequency:&lt;/h4&gt;
          &lt;div&gt;
              {{frequency}}
          &lt;/div&gt;
          &lt;div&gt;
              Next payment: {{payment?.scheduledDate | date:'MMMM dd, yyyy'}}
          &lt;/div&gt;
      &lt;/statement-card-summary&gt;
      &lt;statement-card-addition&gt;
          &lt;h4 class="statement-card-section-title"&gt;Payment amount:&lt;/h4&gt;
          &lt;div class="addition-line"&gt;&lt;span&gt;Amount&lt;/span&gt;&lt;span&gt;{{payment?.amount}}&lt;/span&gt;&lt;/div&gt;
          &lt;div class="addition-line"&gt;&lt;span&gt;Sales tax&lt;/span&gt;&lt;span&gt;{{payment?.salesTax}}&lt;/span&gt;&lt;/div&gt;
          &lt;hr class="addition-seperator" /&gt;
          &lt;div class="addition-total"&gt;&lt;span&gt;Total&lt;/span&gt;&lt;span&gt;{{getPaymentTotal()}}&lt;/span&gt;&lt;/div&gt;
      &lt;/statement-card-addition&gt;
      &lt;statement-card-payment-method&gt;
          &lt;h4 class="statement-card-section-title"&gt;Payment method:&lt;/h4&gt;
          &lt;img src="images/bank.png" width="48" height="48" class="payment-method-icon" /&gt;
          &lt;div class="payment-method-summary"&gt;
              &lt;div&gt;Bank&lt;/div&gt;
              &lt;div&gt;Account ending in  ••••••••••1234&lt;/div&gt;
          &lt;/div&gt;
      &lt;/statement-card-payment-method&gt;
      &lt;statement-card-interactions&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;a href="#" class="pull-right"&gt;MAKE A PAYMENT&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;a href="#" class="pull-right"&gt;VIEW PAYMENT SCHEDULE&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/statement-card-interactions&gt;
  &lt;/statement-card&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Now that I have upgraded to angular 2 it is throwing an error like this for all of the transclusion slots:</p>
  
  <blockquote>
    <p>'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
        
  </blockquote>
  
  <p>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? </p>