Angular 2 Switching Multiple Slots

Question

As with RC 5, the following syntax worked just fine for repeatedly closing an interval in Angular 2

It was a component of a template with a selector statement-card

<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>
        </div>
    </div>
    <div class="row statement-card-body">
        <div class="col-md-4">
            <!-- statment summary -->
            <ng-content select="statement-card-summary"></ng-content>
        </div>
        <div class="col-md-4">
            <!-- payment amount -->
            <ng-content select="statement-card-addition"></ng-content>
        </div>
        <div class="col-md-4">
            <!-- payment method -->
            <ng-content select="statement-card-payment-method"></ng-content>
        </div>
    </div>
    <div class="row statement-card-footer">
        <div class="col-md-4 col-md-offset-8">
            <ng-content select="statement-card-interactions"></ng-content>
        </div>
    </div>
</div>

It was one of the components that populated the template with data.

<statement-card>
    <statement-card-title>
        <div class="schedule-statement-title">Payment schedule</div>
    </statement-card-title>
    <statement-card-summary>
        <h4 class="statement-card-section-title">Payment frequency:</h4>
        <div>
            {{frequency}}
        </div>
        <div>
            Next payment: {{payment?.scheduledDate | date:'MMMM dd, yyyy'}}
        </div>
    </statement-card-summary>
    <statement-card-addition>
        <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>
    </statement-card-addition>
    <statement-card-payment-method>
        <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>Bank</div>
            <div>Account ending in  ••••••••••1234</div>
        </div>
    </statement-card-payment-method>
    <statement-card-interactions>
        <div class="row">
            <div class="col-md-6">
                <a href="#" class="pull-right">MAKE A PAYMENT</a>
            </div>
            <div class="col-md-6">
                <a href="#" class="pull-right">VIEW PAYMENT SCHEDULE</a>
            </div>
        </div>
    </statement-card-interactions>
</statement-card>

In Angular 2 RC 5 and below, you can specify the ng content tag with the select attribute in the template component, and then directly create the html tag in the specific component that matches the select attribute in the ng-content tag and it would move the html content for children to the tag ng-content.

Now that I upgraded to Angular 2, it throws this error for all transition slots:

'statement-card-title' : 1. "statement-card-title" Angular, , . 2. "statement-card-title" -, "CUSTOM_ELEMENTS_SCHEMA" "@NgModule.schema" , . ("     [ → ]              

? , , Angular , ?

Answer 1

.

,

 schemas:   [ CUSTOM_ELEMENTS_SCHEMA ],    

to @NgModule(...), Angular2, , , Angular2.

directives: [...] @NgModule(...), Angular2 .

. https://github.com/angular/angular/issues/11251.

Answer 2

:

<ng-content select="[statement-card-title]"></ng-content>

:

<statement-card>
    <div statement-card-title>
        <div class="schedule-statement-title">Payment schedule</div>
    </div>
    <div statement-card-summary>
        <h4 class="statement-card-section-title">Payment frequency:</h4>
        (...)
    </div>
    (...)
</statement-card>

Answer 3

this problem in Angular 2 does not recognize the tag "statement-card-section-title". "statement-card-section-title" is neither a directive nor a component. A quick way to get around this error is to add the schema metadata property to your module, set the value to NO_ERRORS_SCHEMA in your module file.

@NgModule({
  ...,
  schemas:      [ NO_ERRORS_SCHEMA ] // add this line
})