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.

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

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