<commit_before>.l-main-section
  h2#section-responding-to-user-input Responding to user input with event syntax

  p.
    You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: <code>(event)</code>. A controller function is then assigned to the event name: <code>(event)="controllerFn()"</code>.
  p.
    For a particular control like an input you can have it call methods on your controller on keyup event like so:

  code-example(language="html").
    &lt;input (keyup)="myControllerMethod()"&gt;

  h3#local-variables Local variables
  p.
    As in previous examples, you can make element references available to other parts of the template as a local
    variable using the <code>#var</code> syntax.  With this and events, we can do the old "update text as you type" example:

  code-example(language="html").
    &lt;input #myname (keyup)&gt;
    &lt;p&gt;{{myname.value}}&lt;/p&gt;

  p.text-body(ng-non-bindable).
    The <code>#myname</code> creates a local variable in the template that we'll refer to below in the
    <code>&lt;p&gt;</code> element.  The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
    event.  And the <code>{{myname.value}}</code> binds the text node of the  <code>&lt;p&gt;</code> element to the
    input's value property.
  p Let's do something a little more complex where users enter items and add them to a list like this:

  figure.image-display
    img(src='/resources/images/examples/user-input-example1.png' alt="Example of Todo App")


.l-ain-section
  h2#section-create-an-array-property Create an array property
  p.
    With the default bootstrapping in place, create a controller class that will manage interactions with the
    list. Inside the controller, add an array with an initial list of items.  Then add a method that pushes new items
    on the array when called.
<commit_msg>fix(guide): add callout to broken example<commit_after>.l-main-section
  h2#section-responding-to-user-input Responding to user input with event syntax

  p.
    You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: <code>(event)</code>. A controller function is then assigned to the event name: <code>(event)="controllerFn()"</code>.
  p.
    For a particular control like an input you can have it call methods on your controller on keyup event like so:

  code-example(language="html").
    &lt;input (keyup)="myControllerMethod()"&gt;

  h3#local-variables Local variables
  p.
    As in previous examples, you can make element references available to other parts of the template as a local
    variable using the <code>#var</code> syntax.  With this and events, we can do the old "update text as you type" example:

  .callout.is-helpful
    header Broken Example
    p
      span This specific example is currently broken, pending resolution of&nbsp;
      a(href="https://github.com/angular/angular/issues/2019") 2019

  code-example(language="html").
    &lt;input #myname (keyup)&gt;
    &lt;p&gt;{{myname.value}}&lt;/p&gt;

  p.text-body(ng-non-bindable).
    The <code>#myname</code> creates a local variable in the template that we'll refer to below in the
    <code>&lt;p&gt;</code> element.  The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
    event.  And the <code>{{myname.value}}</code> binds the text node of the  <code>&lt;p&gt;</code> element to the
    input's value property.
  p Let's do something a little more complex where users enter items and add them to a list like this:

  figure.image-display
    img(src='/resources/images/examples/user-input-example1.png' alt="Example of Todo App")


.l-ain-section
  h2#section-create-an-array-property Create an array property
  p.
    With the default bootstrapping in place, create a controller class that will manage interactions with the
    list. Inside the controller, add an array with an initial list of items.  Then add a method that pushes new items
    on the array when called.

{'fraction_non_alphanumeric': 0.09475465313028765, 'fraction_numerical': 0.0038675368624607204, 'mean_word_length': 3.856807511737089, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2483487', 'n_tokens_mistral': 1205, 'n_tokens_neox': 1163, 'n_words': 508}