release: cut the v7.2.4 release

This reverts commit a6fd118f79.

.bazelrc

@@ -42,6 +42,16 @@ build --watchfs
 run --nolegacy_external_runfiles
 test --nolegacy_external_runfiles
 
+# Turn on --incompatible_strict_action_env which was on by default
+# in Bazel 0.21.0 but turned off again in 0.22.0. Follow
+# https://github.com/bazelbuild/bazel/issues/7026 for more details.
+# This flag is needed to so that the bazel cache is not invalidated
+# when running bazel via `yarn bazel`.
+# See https://github.com/angular/angular/issues/27514.
+build --incompatible_strict_action_env
+run --incompatible_strict_action_env
+test --incompatible_strict_action_env
+
 ###############################
 # Release support             #
 # Turn on these settings with #
@@ -49,9 +59,7 @@ test --nolegacy_external_runfiles
 ###############################
 
 # Releases should always be stamped with version control info
-# This command assumes node on the path and is a workaround for
-# https://github.com/bazelbuild/bazel/issues/4802
-build:release --workspace_status_command="node ./tools/bazel_stamp_vars.js"
+build:release --workspace_status_command=./tools/bazel_stamp_vars.sh
 
 ###############################
 # Output                      #

.buildkite/provision-windows-buildkite.ps1

@@ -5,9 +5,9 @@
 
 # VM creation:
 # In Google Cloud Platform, create a Compute Engine instance.
-# We recommend machine type n1-standard-16 (16 vCPUs, 60 GB memory).
-# Use a recent windows boot disk with container support such as
-# "Windows Server version 1803 Datacenter Core for Containers", and add a 128GB disk.
+# We recommend machine type n1-highcpu-16 (16 vCPUs, 14.4 GB memory).
+# Use a windows boot disk with container support such as
+# "Windows Server version 1803 Datacenter Core for Containers".
 # Give it a name, then click "Create".
 
 # VM setup:
@@ -54,8 +54,6 @@ Write-Host "Installing Git for Windows."
 Invoke-WebRequest -Uri https://github.com/git-for-windows/git/releases/download/v2.19.1.windows.1/Git-2.19.1-64-bit.exe -OutFile git.exe
 .\git.exe /VERYSILENT /NORESTART /NOCANCEL /SP- /CLOSEAPPLICATIONS /RESTARTAPPLICATIONS /COMPONENTS="icons,ext\reg\shellhere,assoc,assoc_sh" /DIR="C:\git"
 Add-Path "C:\git\bin"
-# Sleep for 15s while git is installed. Trying to remove the git.exe before it finishes install causes an error.
-Start-Sleep -s 15
 Remove-Item git.exe
 
 # Download NSSM (https://nssm.cc/) to run the BuildKite agent as a service.

.circleci/bazel.rc

@@ -2,6 +2,10 @@
 # We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
 # See documentation in /docs/BAZEL.md
 
+# Save downloaded repositories in a location that can be cached by CircleCI. This helps us
+# speeding up the analysis time significantly with Bazel managed node dependencies on the CI.
+build --repository_cache=/home/circleci/bazel_repository_cache
+
 # Don't be spammy in the logs
 # TODO(gmagolan): Hide progress again once build performance improves
 # Presently, CircleCI can timeout during bazel test ... with the following

.circleci/config.yml

@@ -11,10 +11,19 @@
 # needed for jobs that run tests without Bazel. Bazel runs tests with browsers that will be
 # fetched by the Webtesting rules. Therefore for jobs that run tests with Bazel, we don't need a
 # docker image with browsers pre-installed.
-# **NOTE**: If you change the version of the docker images, also change the `cache_key` suffix.
+# **NOTE 1**: If you change the version of the `*-browsers` docker image, make sure the
+#             `CI_CHROMEDRIVER_VERSION_ARG` env var (in `.circleci/env.sh`) points to a ChromeDriver
+#             version that is compatible with the Chrome version in the image.
+# **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
 var_1: &default_docker_image circleci/node:10.12
 var_2: &browsers_docker_image circleci/node:10.12-browsers
-var_3: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-node-10.12
+# We don't want to include the current branch name in the cache key because that would prevent
+# PRs from being able to restore the cache since the branch names are always different for PRs.
+# The cache key should only consist of dynamic values that change whenever something in the
+# cache changes. For example:
+# 1) yarn lock file changes --> cached "node_modules" are different.
+# 2) bazel repository definitions change --> cached bazel repositories are different.
+var_3: &cache_key v2-angular-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "packages/bazel/package.bzl" }}-node-10.12
 
 # Define common ENV vars
 var_4: &define_env_vars
@@ -45,7 +54,13 @@ var_7: &post_checkout
 var_8: &yarn_install
   run:
     name: Running Yarn install
-    command: yarn install --frozen-lockfile --non-interactive
+    command: |
+      # Yarn's requests sometimes take more than 10mins to complete.
+      # Print something to stdout, to prevent CircleCI from failing due to not output.
+      while true; do sleep 60; echo "[`date`] Keeping alive..."; done &
+      KEEP_ALIVE_PID=$!
+      yarn install --frozen-lockfile --non-interactive
+      kill $KEEP_ALIVE_PID
 
 var_9: &setup_circleci_bazel_config
   run:
@@ -157,9 +172,9 @@ jobs:
         # (Run before unit and e2e tests, which destroy the `dist/` directory.)
       - run: yarn --cwd aio payload-size
         # Run unit tests
-      - run: yarn --cwd aio test --watch=false
+      - run: yarn --cwd aio test --progress=false --watch=false
         # Run e2e tests
-      - run: yarn --cwd aio e2e
+      - run: yarn --cwd aio e2e --configuration=ci
         # Run unit tests for Firebase redirects
       - run: yarn --cwd aio redirects-test
 
@@ -197,9 +212,22 @@ jobs:
         # (Run before unit and e2e tests, which destroy the `dist/` directory.)
       - run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
         # Run unit tests
-      - run: yarn --cwd aio test --watch=false
+      - run: yarn --cwd aio test --progress=false --watch=false
         # Run e2e tests
-      - run: yarn --cwd aio e2e
+      - run: yarn --cwd aio e2e --configuration=ci
+
+  test_aio_local_ivy:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - attach_workspace:
+          at: dist
+      - *define_env_vars
+        # Build aio with Ivy (using local Angular packages)
+      - run: yarn --cwd aio build-with-ivy --progress=false
 
   test_aio_tools:
     <<: *job_defaults
@@ -278,14 +306,16 @@ jobs:
           name: Wait for preview and run tests
           command: node aio/scripts/test-preview.js $CI_PULL_REQUEST $CI_COMMIT $CI_AIO_MIN_PWA_SCORE
 
-  # This job exists only for backwards-compatibility with old scripts and tests
-  # that rely on the pre-Bazel dist/packages-dist layout.
-  # It duplicates some work with the job above: we build the bazel packages
-  # twice. Even though we have a remote cache, these jobs will typically run in
-  # parallel so up-to-date outputs will not be available at the time the build
+
+  # The `build-npm-packages` tasks exist for backwards-compatibility with old scripts and
+  # tests that rely on the pre-Bazel `dist/packages-dist` output structure (build.sh).
+  # Having multiple jobs that independently build in this manner duplicates some work; we build
+  # the bazel packages more than once. Even though we have a remote cache, these jobs will
+  # typically run in parallel so up-to-date outputs will not be available at the time the build
   # starts.
-  # No new jobs should depend on this one.
-  build-packages-dist:
+
+  # Build the view engine npm packages. No new jobs should depend on this.
+  build-npm-packages:
     <<: *job_defaults
     resource_class: xlarge
     steps:
@@ -306,6 +336,29 @@ jobs:
           root: dist
           paths:
             - packages-dist
+
+
+  # Build the ivy npm packages.
+  build-ivy-npm-packages:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - *define_env_vars
+      - *setup_circleci_bazel_config
+      - *yarn_install
+      - *setup_bazel_remote_execution
+
+      - run: scripts/build-ivy-npm-packages.sh
+
+      # Save the npm packages from //packages/... for other workflow jobs to read
+      # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
+      - persist_to_workspace:
+          root: dist
+          paths:
             - packages-dist-ivy-aot
 
   # We run the integration tests outside of Bazel for now.
@@ -481,7 +534,7 @@ workflows:
       - lint
       - test
       - test_ivy_aot
-      - build-packages-dist
+      - build-npm-packages
       - test_aio
       - legacy-unit-tests-local
       - legacy-unit-tests-saucelabs
@@ -490,19 +543,19 @@ workflows:
             - test_aio
       - legacy-e2e-tests:
           requires:
-            - build-packages-dist
+            - build-npm-packages
       - legacy-misc-tests:
           requires:
-            - build-packages-dist
+            - build-npm-packages
       - test_aio_local:
           requires:
-            - build-packages-dist
+            - build-npm-packages
       - test_aio_tools:
           requires:
-            - build-packages-dist
+            - build-npm-packages
       - test_docs_examples:
           requires:
-            - build-packages-dist
+            - build-npm-packages
       - aio_preview:
           # Only run on PR builds. (There can be no previews for non-PR builds.)
           filters:
@@ -513,7 +566,7 @@ workflows:
             - aio_preview
       - integration_test:
           requires:
-            - build-packages-dist
+            - build-npm-packages
       - publish_snapshot:
           # Note: no filters on this job because we want it to run for all upstream branches
           # We'd really like to filter out pull requests here, but not yet available:
@@ -526,10 +579,11 @@ workflows:
             - integration_test
             # Only publish if `aio`/`docs` tests using the locally built Angular packages pass
             - test_aio_local
+            # - test_aio_local_ivy
             - test_docs_examples
-            # Get the artifacts to publish from the build-packages-dist job
+            # Get the artifacts to publish from the build-npm-packages job
             # since the publishing script expects the legacy outputs layout.
-            - build-packages-dist
+            - build-npm-packages
             - legacy-e2e-tests
             - legacy-misc-tests
             - legacy-unit-tests-local

.circleci/env-helpers.inc.sh

@@ -15,7 +15,7 @@
 #
 # Usage: `setPublicVar <name> <value>`
 function setPublicVar() {
-  setSecretVar $1 $2;
+  setSecretVar $1 "$2";
   echo "$1=$2";
 }
 

.circleci/env.sh

@@ -18,6 +18,11 @@ setPublicVar PROJECT_ROOT "$(pwd)";
 setPublicVar CI_AIO_MIN_PWA_SCORE "95";
 # This is the branch being built; e.g. `pull/12345` for PR builds.
 setPublicVar CI_BRANCH "$CIRCLE_BRANCH";
+# ChromeDriver version compatible with the Chrome version included in the docker image used in
+# `.circleci/config.yml`. See http://chromedriver.chromium.org/downloads for a list of versions.
+# This variable is intended to be passed as an arg to the `webdriver-manager update` command (e.g.
+# `"postinstall": "webdriver-manager update $CI_CHROMEDRIVER_VERSION_ARG"`).
+setPublicVar CI_CHROMEDRIVER_VERSION_ARG "--versions.chrome 2.45";
 setPublicVar CI_COMMIT "$CIRCLE_SHA1";
 # `CI_COMMIT_RANGE` will only be available when `CIRCLE_COMPARE_URL` is also available (or can be
 # retrieved via `get-compare-url.js`), i.e. on push builds (a.k.a. non-PR, non-scheduled builds and

.github/CODEOWNERS

@@ -54,6 +54,7 @@
 #  kara - Kara Erickson
 #  kyliau - Keen Yee Liau
 #  matsko - Matias Niemelä
+#  mgechev - Minko Gechev
 #  mhevery - Misko Hevery
 #  ocombe - Olivier Combe
 #  petebacondarwin - Pete Bacon Darwin
@@ -113,6 +114,7 @@
 #   - alexeagle
 #   - kyliau
 #   - IgorMinar
+#   - mgechev
 
 
 # ===========================================================
@@ -122,6 +124,7 @@
 #   - alexeagle
 #   - filipesilva
 #   - hansl
+#   - mgechev
 
 
 # ===========================================================

CHANGELOG.md

@@ -1,23 +1,34 @@
-<a name="8.0.0-beta.1"></a>
-# [8.0.0-beta.1](https://github.com/angular/angular/compare/8.0.0-beta.0...8.0.0-beta.1) (2019-01-22)
+<a name="7.2.4"></a>
+## [7.2.4](https://github.com/angular/angular/compare/7.2.3...7.2.4) (2019-02-06)
 
 
 ### Bug Fixes
 
-* **bazel:** increase node memory limit for ng_module rule to prevent OOM for big modules ([#28237](https://github.com/angular/angular/issues/28237)) ([73616ab](https://github.com/angular/angular/commit/73616ab))
-* **router:** `skipLocationChange` with named outlets ([#28300](https://github.com/angular/angular/issues/28300)) ([50df897](https://github.com/angular/angular/commit/50df897)), closes [#27680](https://github.com/angular/angular/issues/27680) [#28200](https://github.com/angular/angular/issues/28200)
+* **bazel:** Bazel builder resolves with require.resolve() ([#28478](https://github.com/angular/angular/issues/28478)) ([d85d396](https://github.com/angular/angular/commit/d85d396))
+* **bazel:** fix integration test for bazel-schematics ([#28460](https://github.com/angular/angular/issues/28460)) ([449da8c](https://github.com/angular/angular/commit/449da8c))
 
 
-### Features
+### Performance Improvements
 
-* **bazel:** Add support for SASS ([#28167](https://github.com/angular/angular/issues/28167)) ([f59f18c](https://github.com/angular/angular/commit/f59f18c))
-* **compiler-cli:** resolve generated Sass/Less files to .css inputs ([#28166](https://github.com/angular/angular/issues/28166)) ([a58fd21](https://github.com/angular/angular/commit/a58fd21))
-* **forms:** add `markAllAsTouched()` to `AbstractControl` ([#26812](https://github.com/angular/angular/issues/26812)) ([45bf911](https://github.com/angular/angular/commit/45bf911)), closes [#19400](https://github.com/angular/angular/issues/19400)
+* pngcrush all pngs ([#28479](https://github.com/angular/angular/issues/28479)) ([1a25144](https://github.com/angular/angular/commit/1a25144)), closes [#18243](https://github.com/angular/angular/issues/18243)
 
 
-### Reverts
 
-* "ci: use image based cache for windows BuildKite ([#27990](https://github.com/angular/angular/issues/27990))" ([#28160](https://github.com/angular/angular/issues/28160)) ([7bdf3fe](https://github.com/angular/angular/commit/7bdf3fe))
+<a name="7.2.3"></a>
+## [7.2.3](https://github.com/angular/angular/compare/7.2.2...7.2.3) (2019-01-30)
+
+
+### Bug Fixes
+
+* **bazel:** add [@npm](https://github.com/npm)//tslib dep to e2e ts_library target in bazel-workspace schematic ([#28358](https://github.com/angular/angular/issues/28358)) ([8cee56e](https://github.com/angular/angular/commit/8cee56e))
+* **bazel:** Bazel-workspace schematics should run in ScopedTree ([#28349](https://github.com/angular/angular/issues/28349)) ([260ac20](https://github.com/angular/angular/commit/260ac20))
+* **bazel:** Builder should invoke local bazel/iblaze ([#28303](https://github.com/angular/angular/issues/28303)) ([12b8a6e](https://github.com/angular/angular/commit/12b8a6e))
+* **bazel:** ng-new should run yarn install ([#28381](https://github.com/angular/angular/issues/28381)) ([a9d46e4](https://github.com/angular/angular/commit/a9d46e4))
+
+
+### Performance Improvements
+
+* yarn version upgrade ([#28360](https://github.com/angular/angular/issues/28360)) ([cc1b2a5](https://github.com/angular/angular/commit/cc1b2a5))
 
 
 
@@ -38,38 +49,6 @@
 
 
 
-<a name="8.0.0-beta.0"></a>
-# [8.0.0-beta.0](https://github.com/angular/angular/compare/7.2.0...8.0.0-beta.0) (2019-01-16)
-
-
-### Bug Fixes
-
-* **bazel:** Add [@bazel](https://github.com/bazel)/bazel to dev deps ([#28032](https://github.com/angular/angular/issues/28032)) ([5a0deb8](https://github.com/angular/angular/commit/5a0deb8))
-* **bazel:** Add /bazel-out to .gitignore ([#27874](https://github.com/angular/angular/issues/27874)) ([b05baa5](https://github.com/angular/angular/commit/b05baa5))
-* **bazel:** Add ibazel to deps of Bazel project ([#28090](https://github.com/angular/angular/issues/28090)) ([605f450](https://github.com/angular/angular/commit/605f450))
-* **bazel:** Bazel schematics should add router package ([#28141](https://github.com/angular/angular/issues/28141)) ([06e5bf1](https://github.com/angular/angular/commit/06e5bf1))
-* **bazel:** flat module misses AMD module name on windows ([#27839](https://github.com/angular/angular/issues/27839)) ([935ce63](https://github.com/angular/angular/commit/935ce63))
-* **bazel:** incorrectly always uses ngc-wrapped from "npm" workspace ([#28137](https://github.com/angular/angular/issues/28137)) ([d12db4e](https://github.com/angular/angular/commit/d12db4e))
-* **bazel:** ng_package creates invalid typings reexport on windows ([#27829](https://github.com/angular/angular/issues/27829)) ([4caf654](https://github.com/angular/angular/commit/4caf654))
-* **bazel:** packager not properly removing amd directives on windows ([#27829](https://github.com/angular/angular/issues/27829)) ([8473d68](https://github.com/angular/angular/commit/8473d68))
-* **bazel:** protractor rule does not run spec files with underscore ([#28022](https://github.com/angular/angular/issues/28022)) ([65e72e9](https://github.com/angular/angular/commit/65e72e9))
-* **bazel:** protractor utils cannot start server on windows ([#27915](https://github.com/angular/angular/issues/27915)) ([9de9c8a](https://github.com/angular/angular/commit/9de9c8a))
-* **bazel:** replay compilation uses wrong compiler for building esm5 ([#28053](https://github.com/angular/angular/issues/28053)) ([cd04513](https://github.com/angular/angular/commit/cd04513))
-* **bazel:** ts_web_test_suite now properly includes init_browser_spec.js ([#27965](https://github.com/angular/angular/issues/27965)) ([ce51dfb](https://github.com/angular/angular/commit/ce51dfb))
-* **service-worker:** navigation urls backwards compatibility ([#27244](https://github.com/angular/angular/issues/27244)) ([d49d1e7](https://github.com/angular/angular/commit/d49d1e7))
-
-
-### Features
-
-* **forms:** export NumberValueAccessor & RangeValueAccessor directives ([#27743](https://github.com/angular/angular/issues/27743)) ([ac15717](https://github.com/angular/angular/commit/ac15717))
-
-
-### Performance Improvements
-
-* **platform-server:** use shared `DomElementSchemaRegistry` instance ([#28150](https://github.com/angular/angular/issues/28150)) ([#28151](https://github.com/angular/angular/issues/28151)) ([ce3a746](https://github.com/angular/angular/commit/ce3a746))
-
-
-
 <a name="7.2.1"></a>
 ## [7.2.1](https://github.com/angular/angular/compare/7.2.0...7.2.1) (2019-01-16)
 

WORKSPACE

@@ -62,8 +62,8 @@ local_repository(
 load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
 
 # Bazel version must be at least v0.21.0 because:
-#   - 0.21.0 --experimental_strict_action_env flag turned on by default which fixes cache when
-#            running `yarn bazel` (see https://github.com/angular/angular/issues/27514#issuecomment-451438271)
+#   - 0.21.0 Using --incompatible_strict_action_env flag fixes cache when running `yarn bazel`
+#            (see https://github.com/angular/angular/issues/27514#issuecomment-451438271)
 check_bazel_version("0.21.0", """
 You no longer need to install Bazel on your machine.
 Angular has a dependency on the @bazel/bazel package which supplies it.

aio/angular.json

@@ -104,6 +104,9 @@
             },
             "archive": {
               "browserTarget": "site:build:archive"
+            },
+            "ci": {
+              "progress": false
             }
           }
         },
@@ -166,6 +169,11 @@
           "options": {
             "protractorConfig": "tests/e2e/protractor.conf.js",
             "devServerTarget": "site:serve"
+          },
+          "configurations": {
+            "ci": {
+              "devServerTarget": "site:serve:ci"
+            }
           }
         },
         "lint": {

aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts

@@ -1,71 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by, protractor } from 'protractor';
-
-describe('Event binding example', function () {
-
-  beforeEach(function () {
-    browser.get('');
-  });
-
-  let saveButton = element.all(by.css('button')).get(0);
-  let onSaveButton = element.all(by.css('button')).get(1);
-  let myClick = element.all(by.css('button')).get(2);
-  let deleteButton = element.all(by.css('button')).get(3);
-  let saveNoProp = element.all(by.css('button')).get(4);
-  let saveProp = element.all(by.css('button')).get(5);
-
-
-  it('should display Event Binding with Angular', function () {
-    expect(element(by.css('h1')).getText()).toEqual('Event Binding');
-  });
-
-  it('should display 6 buttons', function() {
-    expect(saveButton.getText()).toBe('Save');
-    expect(onSaveButton.getText()).toBe('on-click Save');
-    expect(myClick.getText()).toBe('click with myClick');
-    expect(deleteButton.getText()).toBe('Delete');
-    expect(saveNoProp.getText()).toBe('Save, no propagation');
-    expect(saveProp.getText()).toBe('Save with propagation');
-  });
-
-  it('should support user input', function () {
-    let input = element(by.css('input'));
-    let bindingResult = element.all(by.css('h4')).get(1);
-    expect(bindingResult.getText()).toEqual('Result: teapot');
-    input.sendKeys('abc');
-    expect(bindingResult.getText()).toEqual('Result: teapotabc');
-  });
-
-  it('should hide the item img', async () => {
-    let deleteButton = element.all(by.css('button')).get(3);
-    await deleteButton.click();
-    browser.switchTo().alert().accept();
-    expect(element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none');
-  });
-
-  it('should show two alerts', async () => {
-    let parentDiv = element.all(by.css('.parent-div'));
-    let childDiv = element.all(by.css('div > div')).get(1);
-    await parentDiv.click();
-    browser.switchTo().alert().accept();
-    expect(childDiv.getText()).toEqual('Click me too! (child)');
-    await childDiv.click();
-    expect(browser.switchTo().alert().getText()).toEqual('Click me. Event target class is child-div');
-    browser.switchTo().alert().accept();
-  });
-
-  it('should show 1 alert from Save, no prop, button', async () => {
-    await saveNoProp.click();
-    expect(browser.switchTo().alert().getText()).toEqual('Saved. Event target is Save, no propagation');
-    browser.switchTo().alert().accept();
-  });
-
-  it('should show 2 alerts from Save w/prop button', async () => {
-    await saveProp.click();
-    expect(browser.switchTo().alert().getText()).toEqual('Saved.');
-    browser.switchTo().alert().accept();
-    expect(browser.switchTo().alert().getText()).toEqual('Saved.');
-    browser.switchTo().alert().accept();
-  });
-});

aio/content/examples/event-binding/src/app/app.component.css

@@ -1,25 +0,0 @@
-.group {
-  background-color: #dae8f9;
-  padding: 1rem;
-  margin: 1rem 0;
-}
-
-.parent-div {
-  background-color: #bdd1f7;
-  border: solid 1px rgb(25, 118, 210);
-  padding: 1rem;
-}
-
-.parent-div:hover {
-  background-color: #8fb4f9;
-}
-
-.child-div {
-  margin-top: 1rem;
-  background-color: #fff;
-  padding: 1rem;
-}
-
-.child-div:hover {
-  background-color: #eee;
-}

aio/content/examples/event-binding/src/app/app.component.html

@@ -1,53 +0,0 @@
-<h1 id="event-binding">Event Binding</h1>
-
-<div class="group">
-  <h3>Target event</h3>
-  <!-- #docregion event-binding-1 -->
-  <button (click)="onSave($event)">Save</button>
-  <!-- #enddocregion event-binding-1 -->
-
-  <!-- #docregion event-binding-2 -->
-  <button on-click="onSave($event)">on-click Save</button>
-  <!-- #enddocregion event-binding-2 -->
-
-  <!-- #docregion custom-directive -->
-  <h4>myClick is an event on the custom ClickDirective:</h4>
-  <button (myClick)="clickMessage=$event" clickable>click with myClick</button>
-  {{clickMessage}}
-  <!-- #enddocregion custom-directive -->
-
-</div>
-
-<div class="group">
-  <h3>$event and event handling statements</h3>
-  <h4>Result: {{currentItem.name}}</h4>
-
-  <!-- #docregion event-binding-3-->
-  <input [value]="currentItem.name"
-         (input)="currentItem.name=$event.target.value" >
-  without NgModel
-  <!-- #enddocregion event-binding-3-->
-</div>
-
-<div class="group">
-  <h3>Binding to a nested component</h3>
-  <h4>Custom events with EventEmitter</h4>
-  <!-- #docregion event-binding-to-component -->
-  <app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
-    <!-- #enddocregion event-binding-to-component -->
-
-
-  <h4>Click to see event target class:</h4>
-<div class="parent-div" (click)="onClickMe($event)" clickable>Click me (parent)
-  <div class="child-div">Click me too! (child) </div>
-</div>
-
-<h3>Saves only once:</h3>
-<div (click)="onSave()" clickable>
-  <button (click)="onSave($event)">Save, no propagation</button>
-</div>
-
-<h3>Saves twice:</h3>
-<div (click)="onSave()" clickable>
-  <button (click)="onSave()">Save with propagation</button>
-</div>

aio/content/examples/event-binding/src/app/app.component.spec.ts

@@ -1,27 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-  it(`should have as title 'Featured product:'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('Featured product:');
-  }));
-  it('should render title in a p tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('p').textContent).toContain('Featured product:');
-  }));
-});

aio/content/examples/event-binding/src/app/app.component.ts

@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-import { Item } from './item';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-
-  currentItem = { name: 'teapot'} ;
-  clickMessage = '';
-
-  onSave(event: KeyboardEvent) {
-    const evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
-    alert('Saved.' + evtMsg);
-    if (event) { event.stopPropagation(); }
-  }
-
-  deleteItem(item: Item) {
-    alert(`Delete the ${item}.`);
-  }
-
-  onClickMe(event: KeyboardEvent) {
-    const evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
-    alert('Click me.' + evtMsg);
-  }
-
-}

aio/content/examples/event-binding/src/app/app.module.ts

@@ -1,22 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-
-import { AppComponent } from './app.component';
-import { ItemDetailComponent } from './item-detail/item-detail.component';
-import { ClickDirective } from './click.directive';
-
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    ItemDetailComponent,
-    ClickDirective
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

aio/content/examples/event-binding/src/app/click.directive.ts

@@ -1,18 +0,0 @@
-/* tslint:disable use-output-property-decorator directive-class-suffix */
-import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
-
-@Directive({selector: '[myClick]'})
-export class ClickDirective {
-  @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
-
-  toggle = false;
-
-  constructor(el: ElementRef) {
-    el.nativeElement
-      .addEventListener('click', (event: Event) => {
-        this.toggle = !this.toggle;
-        this.clicks.emit(this.toggle ? 'Click!' : '');
-      });
-  }
-}
-

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.css

@@ -1,11 +0,0 @@
-.detail {
-  border: 1px solid rgb(25, 118, 210);
-  padding: 1rem;
-  margin: 1rem 0;
-}
-
-img {
-  max-width: 100px;
-  display: block;
-  padding: 1rem 0;
-}

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html

@@ -1,9 +0,0 @@
-<div class="detail">
-  <p>This is the ItemDetailComponent</p>
-  <!-- #docregion line-through -->
-  <img src="{{itemImageUrl}}" [style.display]="displayNone">
-  <span [style.text-decoration]="lineThrough">{{ item.name }}
-  </span>
-  <button (click)="delete()">Delete</button>
-  <!-- #enddocregion line-through -->
-</div>

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ItemDetailComponent } from './item-detail.component';
-
-describe('ItemDetailComponent', () => {
-  let component: ItemDetailComponent;
-  let fixture: ComponentFixture<ItemDetailComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ItemDetailComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ItemDetailComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts

@@ -1,30 +0,0 @@
-/* tslint:disable use-input-property-decorator use-output-property-decorator */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { Item } from '../item';
-
-@Component({
-  selector: 'app-item-detail',
-  styleUrls: ['./item-detail.component.css'],
-  templateUrl: './item-detail.component.html'
-})
-export class ItemDetailComponent {
-
-  @Input() item;
-  itemImageUrl = 'assets/teapot.svg';
-  lineThrough = '';
-  displayNone = '';
-  @Input() prefix = '';
-
-  // #docregion deleteRequest
-  // This component makes a request but it can't actually delete a hero.
-  @Output() deleteRequest = new EventEmitter<Item>();
-
-  delete() {
-    this.deleteRequest.emit(this.item.name);
-    this.displayNone = this.displayNone ? '' : 'none';
-    this.lineThrough = this.lineThrough ? '' : 'line-through';
-  }
-  // #enddocregion deleteRequest
-
-}

aio/content/examples/event-binding/src/app/item.ts

@@ -1,4 +0,0 @@
-export class Item {
-  name: '';
-}
-

aio/content/examples/event-binding/src/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>EventBinding</title>
-  <base href="/">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>

aio/content/examples/event-binding/src/main.ts

@@ -1,12 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));

aio/content/examples/event-binding/stackblitz.json

@@ -1,10 +0,0 @@
-{
-  "description": "Event Binding",
-  "files": [
-    "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[1,2].*"
-  ],
-  "file": "src/app/app.component.ts",
-  "tags": ["Event Binding"]
-}

aio/content/examples/toh-pt6/src/app/hero.service.ts

@@ -42,7 +42,7 @@ export class HeroService {
         // #enddocregion getHeroes-2
         tap(_ => this.log('fetched heroes')),
         // #docregion getHeroes-2
-        catchError(this.handleError<Hero[]>('getHeroes', []))
+        catchError(this.handleError('getHeroes', []))
       );
   // #docregion getHeroes-1
   }
@@ -97,7 +97,7 @@ export class HeroService {
   /** POST: add a new hero to the server */
   addHero (hero: Hero): Observable<Hero> {
     return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
-      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+      tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
       catchError(this.handleError<Hero>('addHero'))
     );
   }

aio/content/guide/aot-compiler.md

@@ -453,7 +453,7 @@ The compiler understands all syntax forms that the _collector_ supports, but it
 
 The compiler can only reference _exported symbols_.
 
-Decorated component class members must be public. You cannot make an `@Input()` property private or protected.
+Decorated component class members must be public. You cannot make an `@Input()` property private or internal.
 
 Data bound properties must also be public.
 
@@ -1508,7 +1508,7 @@ done manually.
 
 When `true`, this option tells the compiler not to check the TypeScript version.
 The compiler will skip checking and will not error out when an unsupported version of TypeScript is used.
-Setting this option to `true` is not recommended because unsupported versions of TypeScript might have undefined behaviour.
+Setting this option to `true` is not recommended because unsupported versions of TypeScript might have undefined behavior.
 
 This option is `false` by default.
 

aio/content/guide/architecture.md

@@ -73,7 +73,7 @@ Angular provides predefined pipes for common transformations, and you can also d
 
 ## Services and dependency injection
 
-For data or logic that isn't associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows other providers to be **injected** as dependencies into your class.
+For data or logic that isn't associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows your service to be *injected* into client components as a dependency.
 
  *Dependency injection* (DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.
 

aio/content/guide/build.md

@@ -273,8 +273,8 @@ The CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure c
 You may find it necessary to target specific browsers or exclude certain browser versions from your build.
 
 Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/browserslist/browserslist) to figure out which browsers to support with prefixing. 
-Browserlist looks for configuration options in a `browserlist` property of the package configuration file, or in a configuration file named `.browserslistrc`. 
-Autoprefixer looks for the Browserlist configuration when it prefixes your CSS. 
+Browserlist looks for configuration options in a `browserslist` property of the package configuration file, or in a configuration file named `.browserslistrc`. 
+Autoprefixer looks for the `browserslist` configuration when it prefixes your CSS. 
 
 * You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, `package.json`:
 ```

aio/content/guide/file-structure.md

@@ -53,7 +53,7 @@ Workspace-wide `node_modules` dependencies are visible to this project.
 | `app/`                 | Contains the component files in which your app logic and data are defined. See details in [App source folder](#app-src) below. |
 | `assets/`              | Contains image files and other asset files to be copied as-is when you build your application. | 
 | `environments/`        | Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations. |
-| `browserlist`          | Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserlist on GitHub](https://github.com/browserslist/browserslist) for more information.  |
+| `browserslist`          | Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserslist on GitHub](https://github.com/browserslist/browserslist) for more information.  |
 | `favicon.ico`          | An icon to use for this app in the bookmark bar. |
 | `index.html`           | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or` <link>` tags here manually. |
 | `main.ts`              | The main entry point for your app. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. |

aio/content/guide/lifecycle-hooks.md

@@ -124,7 +124,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
 
       Respond after Angular checks the component's views and child views / the view that a directive is in.
 
-      Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked()`.
+      Called after the `ngAfterViewInit()` and every subsequent `ngAfterContentChecked()`.
 
     </td>
   </tr>

aio/content/guide/router.md

@@ -1055,7 +1055,7 @@ The default route should redirect to the `HeroListComponent` _only_ when the _en
 Remember to restore the redirect to `pathMatch = 'full'`.
 
 Learn more in Victor Savkin's
-[post on redirects](http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes).
+[post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
 
 
 </div>

aio/content/guide/template-syntax.md

@@ -797,6 +797,7 @@ content harmlessly.
 
 
 <hr/>
+
 {@a other-bindings}
 
 ## Attribute, class, and style bindings
@@ -943,44 +944,56 @@ Note that a _style property_ name can be written in either
 
 {@a event-binding}
 
-## Event binding `(event)`
+## Event binding  ( <span class="syntax">(event)</span> )
 
-Event binding allows you to listen for certain events such as
-keystrokes, mouse movements, clicks, and touches. For an example
-demonstrating all of the points in this section, see the <live-example name="event-binding">event binding example</live-example>.
+The bindings directives you've met so far flow data in one direction: **from a component to an element**.
 
-Angular event binding syntax consists of a **target event** name
+Users don't just stare at the screen. They enter text into input boxes. They pick items from lists.
+They click buttons. Such user actions may result in a flow of data in the opposite direction:
+**from an element to a component**.
+
+The only way to know about a user action is to listen for certain events such as
+keystrokes, mouse movements, clicks, and touches.
+You declare your interest in user actions through Angular event binding.
+
+Event binding syntax consists of a **target event** name
 within parentheses on the left of an equal sign, and a quoted
-template statement on the right.
+[template statement](guide/template-syntax#template-statements) on the right.
 The following event binding listens for the button's click events, calling
 the component's `onSave()` method whenever a click occurs:
 
-<figure>
-  <img src='generated/images/guide/event-binding/syntax-diagram.svg' alt="Syntax diagram">
-</figure>
+<code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
+</code-example>
 
 ### Target event
 
-As above, the target is the button's click event.
+A **name between parentheses** &mdash; for example, `(click)` &mdash;
+identifies the target event. In the following example, the target is the button's click event.
 
-<code-example path="event-binding/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
+<code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-Alternatively, use the `on-` prefix, known as the canonical form:
+Some people prefer the `on-` prefix alternative, known as the **canonical form**:
 
-<code-example path="event-binding/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html" linenums="false">
+<code-example path="template-syntax/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html" linenums="false">
 </code-example>
 
 Element events may be the more common targets, but Angular looks first to see if the name matches an event property
 of a known directive, as it does in the following example:
 
-<code-example path="event-binding/src/app/app.component.html" region="custom-directive" header="src/app/app.component.html" linenums="false">
+<code-example path="template-syntax/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html" linenums="false">
 </code-example>
 
+<div class="alert is-helpful">
+
+The `myClick` directive is further described in the section
+on [aliasing input/output properties](guide/template-syntax#aliasing-io).
+
+</div>
+
 If the name fails to match an element event or an output property of a known directive,
 Angular reports an “unknown directive” error.
 
-
 ### *$event* and event handling statements
 
 In an event binding, Angular sets up an event handler for the target event.
@@ -990,73 +1003,72 @@ The template statement typically involves a receiver, which performs an action
 in response to the event, such as storing a value from the HTML control
 into a model.
 
-The binding conveys information about the event. This information can include data values such as an event object, string, or number named `$event`.
+The binding conveys information about the event, including data values, through
+an **event object named `$event`**.
 
-The target event determines the shape of the `$event` object.
+The shape of the event object is determined by the target event.
 If the target event is a native DOM element event, then `$event` is a
 [DOM event object](https://developer.mozilla.org/en-US/docs/Web/Events),
 with properties such as `target` and `target.value`.
 
 Consider this example:
 
-<code-example path="event-binding/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html" linenums="false">
+<code-example path="template-syntax/src/app/app.component.html" region="without-NgModel" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-This code sets the `<input>` `value` property by binding to the `name` property.
-To listen for changes to the value, the code binds to the `input`
-event of the `<input>` element.
+This code sets the input box `value` property by binding to the `name` property.
+To listen for changes to the value, the code binds to the input box's `input` event.
 When the user makes changes, the `input` event is raised, and the binding executes
 the statement within a context that includes the DOM event object, `$event`.
 
 To update the `name` property, the changed text is retrieved by following the path `$event.target.value`.
 
-If the event belongs to a directive&mdash;recall that components
-are directives&mdash;`$event` has whatever shape the directive produces.
+If the event belongs to a directive (recall that components are directives),
+`$event` has whatever shape the directive decides to produce.
 
+{@a eventemitter}
 
-### Custom events with `EventEmitter`
+{@a custom-event}
+
+### Custom events with <span class="syntax">EventEmitter</span>
 
 Directives typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter).
 The directive creates an `EventEmitter` and exposes it as a property.
 The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
 Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
 
-Consider an `ItemDetailComponent` that presents item information and responds to user actions.
-Although the `ItemDetailComponent` has a delete button, it doesn't know how to delete the hero. It can only raise an event reporting the user's delete request.
+Consider a `HeroDetailComponent` that presents hero information and responds to user actions.
+Although the `HeroDetailComponent` has a delete button it doesn't know how to delete the hero itself.
+The best it can do is raise an event reporting the user's delete request.
 
-Here are the pertinent excerpts from that `ItemDetailComponent`:
+Here are the pertinent excerpts from that `HeroDetailComponent`:
 
-
-<code-example path="event-binding/src/app/item-detail/item-detail.component.html" linenums="false" header="src/app/item-detail/item-detail.component.ts (template)" region="line-through">
+<code-example path="template-syntax/src/app/hero-detail.component.ts" linenums="false" header="src/app/hero-detail.component.ts (template)" region="template-1">
 </code-example>
 
-<code-example path="event-binding/src/app/item-detail/item-detail.component.ts" linenums="false" header="src/app/item-detail/item-detail.component.ts (deleteRequest)" region="deleteRequest">
+<code-example path="template-syntax/src/app/hero-detail.component.ts" linenums="false" header="src/app/hero-detail.component.ts (deleteRequest)" region="deleteRequest">
 </code-example>
 
-
 The component defines a `deleteRequest` property that returns an `EventEmitter`.
 When the user clicks *delete*, the component invokes the `delete()` method,
-telling the `EventEmitter` to emit an `Item` object.
+telling the `EventEmitter` to emit a `Hero` object.
 
-Now imagine a hosting parent component that binds to the `deleteRequest` event
-of the `ItemDetailComponent`.
+Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
 
-<code-example path="event-binding/src/app/app.component.html" linenums="false" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component">
+<code-example path="template-syntax/src/app/app.component.html" linenums="false" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component">
 </code-example>
 
-When the `deleteRequest` event fires, Angular calls the parent component's
-`deleteItem()` method, passing the *item-to-delete* (emitted by `ItemDetail`)
-in the `$event` variable.
+When the `deleteRequest` event fires, Angular calls the parent component's `deleteHero` method,
+passing the *hero-to-delete* (emitted by `HeroDetail`) in the `$event` variable.
 
 ### Template statements have side effects
 
-Though [template expressions](guide/template-syntax#template-expressions) shouldn't have [side effects](guide/template-syntax#avoid-side-effects), template
-statements usually do. The `deleteItem()` method does have
-a side effect: it deletes an item.
+The `deleteHero` method has a side effect: it deletes a hero.
+Template statement side effects are not just OK, but expected.
 
-Deleting an item updates the model, and depending on your code, triggers
-other changes including queries and saving to a remote server.
-These changes propagate through the system and ultimately display in this and other views.
+Deleting the hero updates the model, perhaps triggering other changes
+including queries and saves to a remote server.
+These changes percolate through the system and are ultimately displayed in this and other views.
 
 
 <hr/>

aio/content/guide/testing.md

@@ -2398,7 +2398,7 @@ So when you call `createComponent()`, the `TestBed` compiles implicitly.
 
 That's not a problem when the source code is in memory.
 But the `BannerComponent` requires external files
-that the compiler must read from the file system,
+that the compile must read from the file system,
 an inherently _asynchronous_ operation.
 
 If the `TestBed` were allowed to continue, the tests would run and fail mysteriously

aio/content/images/guide/event-binding/syntax-diagram.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 600 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(0.469484,0,0,0.469925,-158.685,-184.211)"><text x="374px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;">&lt;button</text><text x="607.094px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#df002d;">(click)</text><text x="774.156px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;">=&quot;</text><text x="834.25px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#0022be;">onSave()</text><text x="1093.94px" y="472px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;">&quot;&gt;Save&lt;/button&gt;</text></g><path d="M142.827,95.824l-6.663,-3.032l17.828,-39.26l-6.187,-2.815l13.842,-5.191l5.195,13.852l-6.187,-2.815l-17.828,39.261Z" style="fill:#df002d;"/><path d="M337.08,93.548l-6.915,2.399l-13.342,-38.531l-6.422,2.228l6.458,-13.308l13.3,6.453l-6.421,2.228l13.342,38.531Z" style="fill:#3345cc;"/><g><rect x="23.005" y="76.128" width="197.653" height="31.485" style="fill:#fff;stroke:#000;stroke-width:0.7px;"/><text x="31.989px" y="98.214px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:22.556px;fill:#df002d;">target even<tspan x="144.743px " y="98.214px ">t</tspan> name</text></g><g><rect x="275.117" y="76.128" width="228.169" height="31.955" style="fill:#fff;stroke:#000;stroke-width:0.7px;"/><text x="293.078px" y="98.214px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:22.556px;fill:#3345cc;">template st<tspan x="403.3px " y="98.214px ">a</tspan>tement</text></g></svg>