Crestron Components Lib - Showcase App

ch5-list: using ngNonBindable

ch5-list used in Angular

This example documents show the usages of the ngNonBindable directive in Angular 2+ for a ch5-list.

The usage of ngNonBindable is required only in Angular 2+, the example here is for demonstrative purposes only.

Preview

When using a computed property {{ idx }}, Angular tries to process it as an embedded expression, adding ngNonBindable to the template will force Angular to ignore it

HTML
JS
CSS

    <p>When using a computed property <b>{{ idx }}</b>, Angular tries to process it as an embedded expression,
        adding ngNonBindable to the
        template will force Angular to ignore it</p>

    <ch5-list id="demo-list-1"
              size="500"
              maxHeight="400px"
              indexId="idx">
        <template ngNonBindable>
            <div class="horizontal-list-item">
                <span>item_{{idx}}</span>
            </div>
        </template>
    </ch5-list>

.horizontal-list-item {
    display: table;
    width: 100%;
    height: 100%;
}
.horizontal-list-item span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Execute JS before HTML