46 lines
1.3 KiB
HTML
46 lines
1.3 KiB
HTML
|
|
<div>
|
|
<h1>Binding syntax</h1>
|
|
<hr />
|
|
|
|
<div>
|
|
<h2>Button disabled state bound to isUnchanged property</h2>
|
|
<!-- #docregion disabled-button -->
|
|
<!-- Bind button disabled state to `isUnchanged` property -->
|
|
<button [disabled]="isUnchanged">Save</button>
|
|
<!-- #enddocregion disabled-button -->
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div (keyup)="0">
|
|
<h2>HTML attributes and DOM properties</h2>
|
|
<p>1. Use the inspector to see the HTML attribute and DOM property values. Click the buttons to log values to the console.</p>
|
|
|
|
<label>HTML Attribute Initializes to "Sarah":
|
|
<input type="text" value="Sarah" #bindingInput></label>
|
|
<div>
|
|
<button (click)="getHTMLAttributeValue()">Get HTML attribute value</button> Won't change.
|
|
</div>
|
|
|
|
<div>
|
|
<button (click)="getDOMPropertyValue()">Get DOM property value</button> Changeable. Angular works with these.
|
|
</div>
|
|
|
|
<p>2. Change the name in the input and click the buttons again.</p>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div>
|
|
<h3>Disabled property vs. attribute</h3>
|
|
<p>Use the inspector to see the Test Button work and its disabled property toggle.</p>
|
|
<div>
|
|
<button id="testButton" (click)="working()">Test Button</button>
|
|
</div>
|
|
<div>
|
|
<button (click)="toggleDisabled()">Toggle disabled property for Test Button</button>
|
|
</div>
|
|
|
|
</div>
|