85 lines
2.8 KiB
HTML
85 lines
2.8 KiB
HTML
|
|
|
|
<div>
|
|
<h1>Property Binding with Angular</h1>
|
|
<h2>Binding the src property of an image:</h2>
|
|
<!-- #docregion property-binding -->
|
|
<img [src]="itemImageUrl">
|
|
<!-- #enddocregion property-binding -->
|
|
<h2>Using bind- syntax:</h2>
|
|
<!-- #docregion bind-prefix -->
|
|
<img bind-src="itemImageUrl">
|
|
<!-- #enddocregion bind-prefix -->
|
|
<hr />
|
|
|
|
<h2>Binding to the colSpan property</h2>
|
|
<table border=1>
|
|
<tr><td>Column 1</td><td>Column 2</td></tr>
|
|
<!-- #docregion colSpan -->
|
|
<!-- Notice the colSpan property is camel case -->
|
|
<tr><td [colSpan]="2">Span 2 columns</td></tr>
|
|
<!-- #enddocregion colSpan -->
|
|
</table>
|
|
|
|
|
|
<hr />
|
|
<h2>Button disabled state bound to isUnchanged property:</h2>
|
|
<!-- #docregion disabled-button -->
|
|
<!-- Bind button disabled state to `isUnchanged` property -->
|
|
<button [disabled]="isUnchanged">Disabled Button</button>
|
|
<!-- #enddocregion disabled-button -->
|
|
<hr />
|
|
|
|
<h2>Binding to a property of a directive</h2>
|
|
<!-- #docregion class-binding -->
|
|
<p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
|
|
<!-- #enddocregion class-binding -->
|
|
<hr />
|
|
|
|
<h2>Model property of a custom component:</h2>
|
|
<!-- #docregion model-property-binding -->
|
|
<app-item-detail [childItem]="parentItem"></app-item-detail>
|
|
<!-- #enddocregion model-property-binding -->
|
|
<!-- #docregion no-evaluation -->
|
|
<app-item-detail childItem="parentItem"></app-item-detail>
|
|
<!-- #enddocregion no-evaluation -->
|
|
|
|
<h3>Pass objects:</h3>
|
|
<!-- #docregion pass-object -->
|
|
<app-list-item [items]="currentItem"></app-list-item>
|
|
<!-- #enddocregion pass-object -->
|
|
|
|
<hr />
|
|
<h2>Initialized string:</h2>
|
|
<!-- #docregion string-init -->
|
|
<app-string-init prefix="This is a one-time initialized string."></app-string-init>
|
|
<!-- #enddocregion string-init -->
|
|
|
|
<hr />
|
|
|
|
<h2>Property binding and interpolation</h2>
|
|
<!-- #docregion property-binding-interpolation -->
|
|
<p><img src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
|
|
<p><img [src]="itemImageUrl"> is the <i>property bound</i> image.</p>
|
|
|
|
<p><span>"{{interpolationTitle}}" is the <i>interpolated</i> title.</span></p>
|
|
<p>"<span [innerHTML]="propertyTitle"></span>" is the <i>property bound</i> title.</p>
|
|
<!-- #enddocregion property-binding-interpolation -->
|
|
|
|
<hr />
|
|
|
|
<h2>Malicious content</h2>
|
|
|
|
<!-- #docregion malicious-interpolated -->
|
|
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
|
|
<!-- #enddocregion malicious-interpolated -->
|
|
|
|
<!-- #docregion malicious-content -->
|
|
<!--
|
|
Angular generates a warning for the following line as it sanitizes them
|
|
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
|
|
-->
|
|
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
|
|
<!-- #enddocregion malicious-content -->
|
|
</div>
|