diff --git a/public/docs/ts/latest/guide/user-input.jade b/public/docs/ts/latest/guide/user-input.jade index b739e216b2..8f91da68de 100644 --- a/public/docs/ts/latest/guide/user-input.jade +++ b/public/docs/ts/latest/guide/user-input.jade @@ -55,10 +55,11 @@ include ../../../../_includes/_util-fns We then use [interpolation](./template-syntax.html#interpolation) to display the `values` property back on screen. - Enter the letters "abcd", backspace to remove them, and we should see: + Enter the letters "abc", backspace to remove them, and we should see: code-example(). - a | ab | abc | abcd | abc | ab | a | | - + a | ab | abc | ab | a | | +figure.image-display + img(src='/resources/images/devguide/user-input/keyup1-anim.gif' alt="key up 1") :markdown .l-main-section @@ -113,6 +114,8 @@ code-example(). inside the event expression rather than in the component ... because we can ... even if it is a dubious practice. +makeExample('user-input/ts/src/app/app.ts', 'key-up3-component') +figure.image-display + img(src='/resources/images/devguide/user-input/keyup3-anim.gif' alt="key up 3") .l-main-section :markdown @@ -138,7 +141,7 @@ code-example(). elsewhere on the page. figure.image-display - img(src='/resources/images/devguide/user-input/little-tour.png' alt="Little Tour of Heroes") + img(src='/resources/images/devguide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes") :markdown Below is the entire "Little Tour of Heroes" micro-app in a single component. We'll call out the highlights after we bask briefly in its minimalist glory. diff --git a/public/resources/images/devguide/user-input/keyup1-anim.gif b/public/resources/images/devguide/user-input/keyup1-anim.gif new file mode 100644 index 0000000000..a7095f1174 Binary files /dev/null and b/public/resources/images/devguide/user-input/keyup1-anim.gif differ diff --git a/public/resources/images/devguide/user-input/keyup3-anim.gif b/public/resources/images/devguide/user-input/keyup3-anim.gif new file mode 100644 index 0000000000..054ef17157 Binary files /dev/null and b/public/resources/images/devguide/user-input/keyup3-anim.gif differ diff --git a/public/resources/images/devguide/user-input/little-tour-anim.gif b/public/resources/images/devguide/user-input/little-tour-anim.gif new file mode 100644 index 0000000000..76d320264a Binary files /dev/null and b/public/resources/images/devguide/user-input/little-tour-anim.gif differ