Modify Page Title:

Accessible Buttons and Icons

Icon only:

Icon with text:

Icon inline with link text:

Edit Settings

Icon by itself:

Button styled as a link:

Inaccessible examples: what not to do

These buttons cannot be accessed using the keyboard and are announced with the wrong roles:

Mouse users only!
No role!

This button is announced as "new underscore releases" (no ARIA label):

This button will submit form input on Spacebar or Enter (no type attribute):

Hello, {{name}}
HERE: {{testDate}}

PRINTING

Hello, {{context.world}}!




File reader component

Contents are:
  1. {{val}}

Cross-tab communications example

To test, open this sandbox in a second browser tab. Enter something in the input box below, then switch to the other tab and click anywhere on the page. You should see the message that you sent to the other browser tab.

message received: {{sbChannelText}}


HELLO {{userContext.hello}}

Your range is: {{myRange.value | json}}
Your datetime is: {{myTimeForm.get('datetime').value | json}}


Grid with filtering

PCRUD auto flesh and FormatService detection

Fingerprint: {{aMetarecord}}

Do you like template-driven forms?

The best libraries are: {{bestOnes.value | json}}
Result: {{kingdom | json}}
ngModel: {{dateObject.toLocaleDateString()}}

Or perhaps reactive forms interest you?

Choose your favorite law of library science:
That isn't a real law of library science!

Another reactive form!

Too many fancy libraries!
Are you sure you want to confirm {numThings, plural, =1 {this thing} other {these {{numThings}} things}}?
Simple Combobox using [(ngModel)]
Combobox Value: {{simpleCombo ? simpleCombo.label : ''}}

Inline FM Editor

Add Patron Penalty

Grid Stock Selector Display and Filtering

Item (Copy) Location Selector

Selected ID: {{locId}}
valueChange Handler Produced: {{aLocation ? aLocation.name() : '(none)'}}

Due Date Pipe Examples

Due Date Daily Duration:
{{circDaily | egDueDate}}
Due Date Hourly Duration:
{{circHourly | egDueDate}}