From 8f0c27ffc31c1e4e6b1f253a48ef8bef7551784d Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Tue, 27 Feb 2024 15:28:00 +0000 Subject: [PATCH] refactor(docs-infra): apply prettier formatting to adev (#54625) Apply prettier formatting to adev code PR Close #54625 --- .ng-dev/format.mts | 1 + adev/karma.conf.js | 18 +- adev/src/app/app.component.ts | 10 +- .../core/services/content-loader.service.ts | 12 +- .../code-mirror-editor.service.spec.ts | 5 +- adev/src/app/editor/constants.ts | 3 +- .../embedded-tutorial-manager.service.spec.ts | 4 +- .../embedded-tutorial-manager.service.ts | 13 +- adev/src/app/editor/index.ts | 11 +- .../node-runtime-sandbox.service.spec.ts | 5 +- .../home/components/home-editor.component.ts | 6 +- .../home/components/views/build-text.ts | 5 +- .../home/components/views/build-view.ts | 5 +- .../features/home/components/views/lines.ts | 5 +- .../playground/playground.component.ts | 6 +- .../cli-reference-details-page.component.ts | 2 +- .../tutorial/tutorial.component.spec.ts | 4 +- .../features/tutorial/tutorial.component.ts | 22 +-- adev/src/app/routes.ts | 8 +- adev/src/app/sub-navigation-data.ts | 2 +- adev/src/assets/previews/previews.ts | 3 +- .../common/ngComponentOutlet/ts/module.ts | 5 +- .../core/ts/change_detect/change-detection.ts | 10 +- .../router_testing_harness_examples.spec.ts | 5 +- .../accessibility/e2e/src/app.e2e-spec.ts | 4 +- .../e2e/src/app.e2e-spec.ts | 12 +- .../src/app/app.component.spec.ts | 8 +- .../animations/e2e/src/app.e2e-spec.ts | 39 +++-- .../examples/animations/e2e/src/auto.po.ts | 4 +- .../animations/e2e/src/enter-leave.po.ts | 4 +- .../animations/e2e/src/filter-stagger.po.ts | 4 +- .../animations/e2e/src/hero-groups.ts | 4 +- .../animations/e2e/src/open-close.po.ts | 4 +- .../animations/e2e/src/querying.po.ts | 4 +- .../animations/e2e/src/status-slider.po.ts | 4 +- .../examples/animations/e2e/src/toggle.po.ts | 4 +- .../examples/animations/e2e/src/util.ts | 7 +- .../animations/src/app/about.component.ts | 4 +- .../animations/src/app/animations.1.ts | 14 +- .../examples/animations/src/app/animations.ts | 84 ++++----- .../animations/src/app/app.component.ts | 26 +-- .../examples/animations/src/app/app.config.ts | 23 ++- .../animations/src/app/app.module.1.ts | 17 +- .../examples/animations/src/app/app.routes.ts | 136 +++++++-------- .../src/app/hero-list-auto-page.component.ts | 10 +- .../src/app/hero-list-auto.component.ts | 40 ++--- .../hero-list-enter-leave-page.component.ts | 10 +- .../app/hero-list-enter-leave.component.ts | 34 +--- .../src/app/hero-list-group-page.component.ts | 10 +- .../src/app/hero-list-groups.component.ts | 94 +++++----- .../src/app/hero-list-page.component.ts | 67 +++---- .../animations/src/app/home.component.ts | 4 +- .../src/app/insert-remove.component.ts | 21 +-- .../animations/src/app/mock-heroes.ts | 20 +-- .../src/app/open-close-page.component.ts | 6 +- .../src/app/open-close.component.1.ts | 63 ++++--- .../src/app/open-close.component.2.ts | 18 +- .../src/app/open-close.component.3.ts | 20 +-- .../src/app/open-close.component.4.ts | 44 ++--- .../src/app/open-close.component.ts | 116 ++++++------ .../animations/src/app/querying.component.ts | 52 +++--- .../src/app/status-slider-page.component.ts | 6 +- .../src/app/status-slider.component.ts | 59 ++++--- .../app/toggle-animations-page.component.ts | 6 +- .../content/examples/animations/src/main.ts | 6 +- .../architecture/e2e/src/app.e2e-spec.ts | 8 +- .../architecture/src/app/app.component.ts | 6 +- .../architecture/src/app/app.module.ts | 42 ++--- .../architecture/src/app/backend.service.ts | 14 +- .../src/app/hero-detail.component.ts | 6 +- .../src/app/hero-list.component.ts | 16 +- .../architecture/src/app/hero.service.ts | 13 +- .../examples/architecture/src/app/hero.ts | 7 +- .../architecture/src/app/logger.service.ts | 14 +- .../examples/architecture/src/app/mini-app.ts | 34 ++-- .../src/app/sales-tax.component.ts | 12 +- .../architecture/src/app/sales-tax.service.ts | 9 +- .../architecture/src/app/tax-rate.service.ts | 6 +- .../content/examples/architecture/src/main.ts | 9 +- .../attribute-binding/e2e/src/app.e2e-spec.ts | 8 +- ...le-and-multiple-style-binding.component.ts | 2 +- .../e2e/src/app.e2e-spec.ts | 5 +- .../src/app/app.component.1.ts | 2 +- .../binding-syntax/e2e/src/app.e2e-spec.ts | 18 +- .../bootstrapping/e2e/src/app.e2e-spec.ts | 2 +- .../bootstrapping/src/app/app.component.ts | 4 +- .../bootstrapping/src/app/app.module.ts | 30 ++-- .../bootstrapping/src/app/item.directive.ts | 10 +- .../examples/bootstrapping/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 6 +- .../built-in-directives/src/app/item.ts | 15 +- .../e2e/src/app.e2e-spec.ts | 3 +- .../cli-builder/src/my-builder.spec.ts | 10 +- .../examples/cli-builder/src/my-builder.ts | 13 +- .../e2e/src/app.e2e-spec.ts | 20 ++- .../src/app/app.component.ts | 6 +- .../src/app/app.module.ts | 42 ++--- .../src/app/astronaut.component.ts | 17 +- .../src/app/countdown-parent.component.ts | 27 +-- .../src/app/countdown-timer.component.ts | 18 +- .../src/app/hero-child.component.ts | 6 +- .../src/app/hero-parent.component.ts | 6 +- .../component-interaction/src/app/hero.ts | 6 +- .../src/app/mission.service.ts | 5 +- .../src/app/missioncontrol.component.ts | 21 ++- .../src/app/name-child.component.ts | 8 +- .../src/app/name-parent.component.ts | 4 +- .../src/app/version-child.component.ts | 4 +- .../src/app/version-parent.component.ts | 4 +- .../src/app/voter.component.ts | 6 +- .../src/app/votetaker.component.ts | 4 +- .../component-interaction/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 4 +- .../src/app/app.component.spec.ts | 12 +- .../src/app/app.component.ts | 4 +- .../component-overview/src/app/app.module.ts | 21 +-- .../component-overview.component.1.ts | 8 +- .../component-overview.component.2.ts | 9 +- .../component-overview.component.3.ts | 10 +- .../component-overview.component.spec.ts | 9 +- .../component-overview.component.ts | 16 +- .../examples/component-overview/src/main.ts | 9 +- .../component-styles/e2e/src/app.e2e-spec.ts | 8 +- .../component-styles/src/app/app.module.ts | 24 +-- .../src/app/hero-app-main.component.ts | 6 +- .../src/app/hero-app.component.1.ts | 15 +- .../src/app/hero-app.component.ts | 15 +- .../src/app/hero-controls.component.ts | 6 +- .../src/app/hero-details.component.ts | 6 +- .../src/app/hero-team.component.ts | 6 +- .../examples/component-styles/src/app/hero.ts | 7 +- .../app/host-selector-example.component.ts | 8 +- .../src/app/quest-summary.component.ts | 6 +- .../examples/component-styles/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 4 +- .../src/app/app.component.ts | 4 +- .../content-projection/src/app/app.module.ts | 16 +- .../src/app/example-zippy.component.ts | 12 +- .../app/zippy-basic/zippy-basic.component.ts | 4 +- .../zippy-multislot.component.ts | 4 +- .../zippy-ngprojectas.component.ts | 4 +- .../examples/content-projection/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 165 +++++++++--------- .../src/app/app.component.ts | 28 +-- .../src/app/app.config.ts | 22 +-- .../src/app/date-logger.service.ts | 25 ++- .../src/app/hero-bio.component.ts | 21 ++- .../src/app/hero-bios.component.ts | 18 +- .../src/app/hero-cache.service.ts | 6 +- .../src/app/hero-contact.component.ts | 29 ++- .../src/app/hero-data.ts | 4 +- .../src/app/hero-of-the-month.component.ts | 43 +++-- .../src/app/hero.service.ts | 13 +- .../src/app/hero.ts | 4 +- .../src/app/highlight.directive.ts | 5 +- .../src/app/logger.service.ts | 16 +- .../src/app/parent-finder.component.ts | 100 +++++------ .../src/app/runners-up.ts | 20 +-- .../src/app/sorted-heroes.component.ts | 20 +-- .../src/app/storage.component.ts | 12 +- .../src/app/storage.service.ts | 6 +- .../src/app/user-context.service.ts | 13 +- .../src/app/user.service.ts | 5 +- .../src/main.ts | 4 +- .../e2e/src/app.e2e-spec.ts | 19 +- .../src/app/app.component.1.ts | 9 +- .../src/app/app.component.2.ts | 10 +- .../src/app/app.component.ts | 48 ++--- .../src/app/app.config.ts | 22 +-- .../src/app/car/car-creations.ts | 13 +- .../src/app/car/car-factory.ts | 2 +- .../src/app/car/car-injector.ts | 16 +- .../src/app/car/car-no-di.ts | 9 +- .../src/app/car/car.component.ts | 27 ++- .../dependency-injection/src/app/car/car.ts | 15 +- .../src/app/heroes/dummy.module.ts | 25 ++- .../src/app/heroes/hero-list.component.1.ts | 8 +- .../src/app/heroes/hero-list.component.2.ts | 10 +- .../src/app/heroes/hero-list.component.ts | 16 +- .../src/app/heroes/hero.service.0.ts | 6 +- .../src/app/heroes/hero.service.1.ts | 8 +- .../src/app/heroes/hero.service.2.ts | 9 +- .../src/app/heroes/hero.service.3.ts | 8 +- .../src/app/heroes/hero.service.5.ts | 8 +- .../src/app/heroes/hero.service.provider.ts | 16 +- .../src/app/heroes/hero.service.ts | 15 +- .../src/app/heroes/heroes-tsp.component.ts | 8 +- .../src/app/heroes/heroes.component.1.ts | 12 +- .../src/app/heroes/heroes.component.ts | 12 +- .../src/app/heroes/mock-heroes.ts | 20 +-- .../src/app/injection.config.ts | 8 +- .../src/app/injector.component.ts | 16 +- .../src/app/logger.service.ts | 4 +- .../src/app/providers.component.ts | 74 ++++---- .../src/app/providers.module.ts | 8 +- .../src/app/test.component.ts | 24 +-- .../src/app/tree-shaking/app.module.ts | 17 +- .../app/tree-shaking/service-and-module.ts | 8 +- .../src/app/tree-shaking/service.0.ts | 5 +- .../src/app/tree-shaking/service.ts | 5 +- .../src/app/user.service.ts | 11 +- .../examples/dependency-injection/src/main.ts | 4 +- .../displaying-data/e2e/src/app.e2e-spec.ts | 2 +- .../src/app/app-ctor.component.1.ts | 4 +- .../src/app/app.component.1.ts | 4 +- .../src/app/app.component.2.ts | 4 +- .../src/app/app.component.3.ts | 8 +- .../displaying-data/src/app/app.component.ts | 8 +- .../displaying-data/src/app/app.module.ts | 18 +- .../examples/displaying-data/src/app/hero.ts | 3 +- .../examples/displaying-data/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 3 +- .../src/app/ad-banner.component.ts | 10 +- .../src/app/ad-item.ts | 7 +- .../src/app/ad.directive.ts | 5 +- .../src/app/ad.service.ts | 34 ++-- .../src/app/app.component.ts | 9 +- .../src/app/app.module.ts | 27 ++- .../src/app/hero-job-ad.component.ts | 7 +- .../src/app/hero-profile.component.ts | 8 +- .../dynamic-component-loader/src/main.ts | 9 +- .../dynamic-form/e2e/src/app.e2e-spec.ts | 28 +-- .../dynamic-form/src/app/question-base.ts | 12 +- .../src/app/question-control.service.ts | 15 +- .../dynamic-form/src/app/question-dropdown.ts | 2 +- .../dynamic-form/src/app/question-textbox.ts | 2 +- .../dynamic-form/src/app/question.service.ts | 29 ++- .../examples/elements/e2e/src/app.e2e-spec.ts | 2 +- .../errors/cyclic-imports/parent.component.ts | 2 +- .../event-binding/e2e/src/app.e2e-spec.ts | 12 +- .../examples/event-binding/src/app/item.ts | 1 - .../feature-modules/e2e/src/app.e2e-spec.ts | 2 +- .../feature-modules/src/app/app.component.ts | 4 +- .../feature-modules/src/app/app.module.ts | 22 ++- .../customer-dashboard.module.ts | 21 +-- .../customer-dashboard.component.ts | 8 +- .../examples/feature-modules/src/main.ts | 9 +- .../form-validation/e2e/src/app.e2e-spec.ts | 10 +- .../form-validation/src/app/app.component.ts | 6 +- .../form-validation/src/app/app.module.ts | 28 ++- .../actor-form-reactive.component.1.ts | 20 ++- .../actor-form-reactive.component.2.ts | 29 +-- .../reactive/actor-form-reactive.component.ts | 52 +++--- .../src/app/shared/actors.service.ts | 8 +- .../app/shared/forbidden-name.directive.ts | 18 +- .../src/app/shared/role.directive.ts | 30 ++-- .../app/shared/unambiguous-role.directive.ts | 20 ++- .../src/app/shared/unambiguous-role.ts | 20 ++- .../template/actor-form-template.component.ts | 4 +- .../examples/form-validation/src/main.ts | 9 +- .../forms-overview/e2e/src/app.e2e-spec.ts | 2 +- .../src/app/app.component.spec.ts | 36 ++-- .../forms-overview/src/app/app.component.ts | 4 +- .../forms-overview/src/app/app.module.ts | 24 +-- .../favorite-color.component.spec.ts | 16 +- .../favorite-color.component.ts | 6 +- .../src/app/reactive/reactive.module.ts | 15 +- .../favorite-color.component.spec.ts | 14 +- .../favorite-color.component.ts | 4 +- .../src/app/template/template.module.ts | 17 +- .../examples/forms-overview/src/main.ts | 9 +- .../examples/forms/e2e/src/app.e2e-spec.ts | 3 +- .../app/actor-form/actor-form.component.ts | 14 +- .../content/examples/forms/src/app/actor.ts | 4 +- .../examples/forms/src/app/app.component.ts | 4 +- .../examples/forms/src/app/app.module.ts | 5 +- adev/src/content/examples/forms/src/main.ts | 9 +- .../getting-started/e2e/src/app.e2e-spec.ts | 9 +- .../getting-started/src/app/app.component.ts | 6 +- .../getting-started/src/app/app.module.ts | 54 +++--- .../getting-started/src/app/cart.service.1.ts | 4 +- .../getting-started/src/app/cart.service.ts | 28 ++- .../src/app/cart/cart.component.1.ts | 9 +- .../src/app/cart/cart.component.2.ts | 15 +- .../src/app/cart/cart.component.3.ts | 14 +- .../src/app/cart/cart.component.ts | 17 +- .../product-alerts.component.1.ts | 12 +- .../product-alerts.component.ts | 6 +- .../product-details.component.1.ts | 13 +- .../product-details.component.ts | 27 ++- .../product-list/product-list.component.1.ts | 7 +- .../product-list/product-list.component.ts | 7 +- .../getting-started/src/app/products.ts | 8 +- .../src/app/shipping/shipping.component.1.ts | 8 +- .../src/app/shipping/shipping.component.ts | 24 ++- .../src/app/top-bar/top-bar.component.ts | 6 +- .../examples/getting-started/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 27 ++- .../src/app/app.component.ts | 12 +- .../src/app/app.config.ts | 12 +- .../src/app/car.components.ts | 35 ++-- .../src/app/car.services.ts | 48 ++--- .../src/app/hero-tax-return.component.ts | 24 +-- .../src/app/hero-tax-return.service.ts | 10 +- .../src/app/hero.ts | 19 +- .../src/app/heroes-list.component.ts | 25 +-- .../src/app/heroes.service.ts | 18 +- .../src/app/villains-list.component.ts | 12 +- .../src/app/villains.service.ts | 10 +- .../src/main.ts | 4 +- .../i18n/doc-files/app.locale_data.ts | 2 +- .../i18n/doc-files/app.locale_data_extra.ts | 2 +- .../examples/i18n/doc-files/app.module.ts | 16 +- .../i18n/doc-files/locale_plural_function.ts | 3 +- .../content/examples/i18n/doc-files/main.1.ts | 4 +- .../examples/i18n/e2e/src/app.e2e-spec.ts | 4 +- .../examples/i18n/src/app/app.component.ts | 17 +- adev/src/content/examples/i18n/src/main.ts | 8 +- .../inputs-outputs/e2e/src/app.e2e-spec.ts | 13 +- .../src/app/aliasing.component.ts | 7 +- .../inputs-outputs/src/app/app.component.ts | 31 ++-- .../src/app/in-the-metadata.component.ts | 9 +- .../src/app/input-output.component.ts | 3 +- .../src/app/item-detail.component.ts | 2 +- .../app/item-details-metadata.component.ts | 8 +- .../src/app/item-output.component.ts | 6 +- .../examples/inputs-outputs/src/main.ts | 4 +- .../interpolation/e2e/src/app.e2e-spec.ts | 7 +- .../interpolation/src/app/app.component.1.ts | 4 +- .../interpolation/src/app/app.component.ts | 10 +- .../interpolation/src/app/customers.ts | 12 +- .../examples/interpolation/src/main.ts | 4 +- .../e2e/src/app.e2e-spec.ts | 8 +- .../src/app/app-routing.module.ts | 21 +-- .../src/app/app.component.ts | 4 +- .../src/app/app.module.ts | 27 ++- .../app/customers/customers-routing.module.ts | 15 +- .../src/app/customers/customers.component.ts | 4 +- .../src/app/customers/customers.module.ts | 17 +- .../src/app/orders/orders-routing.module.ts | 14 +- .../src/app/orders/orders.component.ts | 4 +- .../src/app/orders/orders.module.ts | 17 +- .../lazy-loading-ngmodules/src/main.ts | 9 +- .../lifecycle-hooks/e2e/src/app.e2e-spec.ts | 71 ++++++-- .../src/app/after-content-parent.component.ts | 23 +-- .../src/app/after-content.component.ts | 27 +-- .../src/app/after-view-parent.component.ts | 10 +- .../src/app/after-view.component.ts | 23 +-- .../lifecycle-hooks/src/app/app.component.ts | 6 +- .../lifecycle-hooks/src/app/app.module.ts | 51 +++--- .../src/app/child-view.component.ts | 4 +- .../src/app/child.component.ts | 4 +- .../src/app/counter-parent.component.ts | 6 +- .../src/app/counter.component.ts | 8 +- .../src/app/do-check-parent.component.ts | 8 +- .../src/app/do-check.component.ts | 33 ++-- .../examples/lifecycle-hooks/src/app/hero.ts | 2 +- .../lifecycle-hooks/src/app/logger.service.ts | 18 +- .../src/app/on-changes-parent.component.ts | 8 +- .../src/app/on-changes.component.ts | 16 +- .../src/app/peek-a-boo-parent.component.ts | 7 +- .../src/app/peek-a-boo.component.ts | 49 ++++-- .../src/app/peek-a-boo.directive.ts | 6 +- .../lifecycle-hooks/src/app/spy.component.ts | 9 +- .../lifecycle-hooks/src/app/spy.directive.ts | 6 +- .../examples/lifecycle-hooks/src/main.ts | 9 +- .../ngcontainer/src/app/app.component.ts | 6 +- .../ngcontainer/src/app/app.module.ts | 24 ++- .../ngcontainer/src/app/content.component.ts | 13 +- .../ngcontainer/src/app/hero.components.ts | 14 +- .../examples/ngcontainer/src/app/hero.ts | 8 +- .../content/examples/ngcontainer/src/main.ts | 9 +- .../ngmodules/e2e/src/app.e2e-spec.ts | 8 +- .../ngmodules/src/app/app-routing.module.ts | 15 +- .../ngmodules/src/app/app.component.ts | 7 +- .../ngmodules/src/app/app.module.1.ts | 8 +- .../examples/ngmodules/src/app/app.module.ts | 22 ++- .../src/app/contact/contact-routing.module.ts | 15 +- .../src/app/contact/contact.component.ts | 11 +- .../src/app/contact/contact.module.ts | 24 ++- .../src/app/contact/contact.service.ts | 28 +-- .../customers/customers-detail.component.ts | 14 +- .../app/customers/customers-list.component.ts | 11 +- .../app/customers/customers-routing.module.ts | 24 +-- .../src/app/customers/customers.component.ts | 9 +- .../src/app/customers/customers.module.ts | 25 ++- .../src/app/customers/customers.service.ts | 26 +-- .../src/app/greeting/greeting.component.ts | 4 +- .../src/app/greeting/greeting.module.ts | 22 +-- .../src/app/greeting/user.service.ts | 9 +- .../src/app/items/items-detail.component.ts | 9 +- .../src/app/items/items-list.component.ts | 10 +- .../src/app/items/items-routing.module.ts | 18 +- .../src/app/items/items.component.ts | 5 +- .../ngmodules/src/app/items/items.module.ts | 20 +-- .../ngmodules/src/app/items/items.service.ts | 26 +-- .../ngmodules/src/app/shared/awesome.pipe.ts | 4 +- .../src/app/shared/highlight.directive.ts | 7 +- .../ngmodules/src/app/shared/shared.module.ts | 19 +- .../content/examples/ngmodules/src/main.ts | 9 +- .../examples/pipes/e2e/src/app.e2e-spec.ts | 62 ++++--- .../examples/pipes/src/app/app.component.ts | 25 +-- .../src/app/birthday-formatting.component.ts | 12 +- .../app/birthday-pipe-chaining.component.ts | 4 +- .../pipes/src/app/birthday.component.ts | 4 +- .../src/app/exponential-strength.pipe.ts | 6 +- .../pipes/src/app/flying-heroes.component.ts | 36 ++-- .../pipes/src/app/flying-heroes.pipe.ts | 12 +- .../src/app/hero-async-message.component.ts | 18 +- .../content/examples/pipes/src/app/heroes.ts | 8 +- .../pipes/src/app/json-pipe.component.ts | 6 +- .../pipes/src/app/power-booster.component.ts | 8 +- .../pipes/src/app/precedence.component.ts | 4 +- adev/src/content/examples/pipes/src/main.ts | 6 +- .../src/backoff.spec.ts | 12 +- .../practical-observable-usage/src/backoff.ts | 28 +-- .../src/typeahead.spec.ts | 66 ++++--- .../src/typeahead.ts | 14 +- .../property-binding/e2e/src/app.e2e-spec.ts | 8 +- .../property-binding/src/app/app.component.ts | 20 ++- .../src/app/item-detail.component.ts | 2 +- .../src/app/item-list.component.ts | 9 +- .../examples/property-binding/src/app/item.ts | 1 - .../property-binding/src/app/mock-items.ts | 22 +-- .../examples/property-binding/src/main.ts | 4 +- .../e2e/src/app.e2e-spec.ts | 4 +- .../src/app/animal.service.ts | 4 +- .../src/app/app.component.1.ts | 20 ++- .../src/app/app.component.ts | 22 +-- .../src/app/app.config.ts | 12 +- .../src/app/child/child.component.1.ts | 17 +- .../src/app/child/child.component.ts | 44 ++--- .../src/app/flower.service.ts | 5 +- .../src/app/inspector/inspector.component.ts | 13 +- .../providers-viewproviders/src/main.ts | 4 +- .../reactive-forms/e2e/src/app.e2e-spec.ts | 15 +- .../reactive-forms/src/app/app.component.ts | 4 +- .../reactive-forms/src/app/app.module.ts | 36 ++-- .../app/name-editor/name-editor.component.ts | 14 +- .../profile-editor.component.1.ts | 28 +-- .../profile-editor.component.2.ts | 34 ++-- .../profile-editor.component.ts | 42 +++-- .../examples/reactive-forms/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 4 +- .../src/app/app.component.ts | 31 ++-- .../src/app/app.config.ts | 10 +- .../src/app/flower.service.ts | 5 +- .../app/host-child/host-child.component.ts | 8 +- .../app/host-parent/host-parent.component.ts | 15 +- .../src/app/host/host.component.ts | 15 +- .../src/app/leaf.service.ts | 5 +- .../src/app/optional.service.ts | 5 +- .../src/app/optional/optional.component.ts | 9 +- .../self-no-data/self-no-data.component.ts | 9 +- .../src/app/self/self.component.ts | 7 +- .../src/app/skipself/skipself.component.ts | 8 +- .../examples/resolution-modifiers/src/main.ts | 4 +- .../router-tutorial/e2e/src/app.e2e-spec.ts | 3 +- .../router-tutorial/src/app/app.component.ts | 2 +- .../router-tutorial/src/app/app.config.ts | 3 +- .../router-tutorial/src/app/app.routes.ts | 2 +- .../app/crisis-list/crisis-list.component.ts | 8 +- .../app/heroes-list/heroes-list.component.ts | 8 +- .../page-not-found.component.ts | 5 +- .../examples/router/e2e/src/app.e2e-spec.ts | 10 +- .../admin-dashboard.component.1.ts | 20 +-- .../admin-dashboard.component.ts | 24 ++- .../src/app/admin/admin-routing.module.1.ts | 34 ++-- .../src/app/admin/admin-routing.module.2.ts | 39 +++-- .../src/app/admin/admin-routing.module.3.ts | 36 ++-- .../src/app/admin/admin-routing.module.ts | 36 ++-- .../router/src/app/admin/admin.module.ts | 23 ++- .../src/app/admin/admin/admin.component.ts | 7 +- .../manage-crises/manage-crises.component.ts | 6 +- .../manage-heroes/manage-heroes.component.ts | 6 +- .../examples/router/src/app/animations.ts | 53 +++--- .../router/src/app/app-routing.module.1.ts | 26 ++- .../router/src/app/app-routing.module.10.ts | 24 +-- .../router/src/app/app-routing.module.11.ts | 20 +-- .../router/src/app/app-routing.module.2.ts | 26 ++- .../router/src/app/app-routing.module.3.ts | 30 ++-- .../router/src/app/app-routing.module.4.ts | 24 ++- .../router/src/app/app-routing.module.5.ts | 37 ++-- .../router/src/app/app-routing.module.6.ts | 40 ++--- .../router/src/app/app-routing.module.7.ts | 8 +- .../router/src/app/app-routing.module.8.ts | 19 +- .../router/src/app/app-routing.module.9.ts | 11 +- .../router/src/app/app-routing.module.ts | 44 +++-- .../router/src/app/app.component.1.ts | 6 +- .../router/src/app/app.component.2.ts | 10 +- .../router/src/app/app.component.3.ts | 12 +- .../router/src/app/app.component.4.ts | 11 +- .../examples/router/src/app/app.component.ts | 8 +- .../examples/router/src/app/app.module.0.ts | 35 ++-- .../examples/router/src/app/app.module.1.ts | 23 +-- .../examples/router/src/app/app.module.2.ts | 33 ++-- .../examples/router/src/app/app.module.3.ts | 42 ++--- .../examples/router/src/app/app.module.4.ts | 36 ++-- .../examples/router/src/app/app.module.5.ts | 32 ++-- .../examples/router/src/app/app.module.6.ts | 31 ++-- .../examples/router/src/app/app.module.7.ts | 34 ++-- .../examples/router/src/app/app.module.8.ts | 18 +- .../examples/router/src/app/app.module.ts | 37 ++-- .../src/app/auth/auth-routing.module.ts | 22 +-- .../router/src/app/auth/auth.guard.2.ts | 2 +- .../router/src/app/auth/auth.guard.3.ts | 6 +- .../router/src/app/auth/auth.guard.4.ts | 11 +- .../router/src/app/auth/auth.guard.ts | 13 +- .../router/src/app/auth/auth.module.ts | 20 +-- .../router/src/app/auth/auth.service.ts | 8 +- .../src/app/auth/login/login.component.1.ts | 13 +- .../src/app/auth/login/login.component.ts | 15 +- .../router/src/app/can-deactivate.guard.1.ts | 42 +++-- .../router/src/app/can-deactivate.guard.ts | 9 +- .../compose-message.component.ts | 11 +- .../crisis-center-home.component.ts | 6 +- .../crisis-center-routing.module.1.ts | 36 ++-- .../crisis-center-routing.module.2.ts | 43 ++--- .../crisis-center-routing.module.3.ts | 38 ++-- .../crisis-center-routing.module.4.ts | 42 ++--- .../crisis-center-routing.module.ts | 42 ++--- .../app/crisis-center/crisis-center.module.ts | 26 ++- .../crisis-center/crisis-center.component.ts | 4 +- .../crisis-center/crisis-detail-resolver.1.ts | 3 +- .../crisis-center/crisis-detail-resolver.ts | 19 +- .../crisis-detail.component.1.ts | 27 ++- .../crisis-detail/crisis-detail.component.ts | 35 ++-- .../crisis-list/crisis-list.component.1.ts | 19 +- .../crisis-list/crisis-list.component.ts | 20 +-- .../src/app/crisis-center/crisis.service.ts | 24 +-- .../src/app/crisis-center/mock-crises.ts | 10 +- .../crisis-list/crisis-list.component.1.ts | 6 +- .../examples/router/src/app/dialog.service.ts | 4 +- .../app/hero-list/hero-list.component.1.ts | 7 +- .../hero-detail/hero-detail.component.1.ts | 21 ++- .../hero-detail/hero-detail.component.2.ts | 16 +- .../hero-detail/hero-detail.component.3.ts | 21 ++- .../hero-detail/hero-detail.component.4.ts | 7 +- .../hero-detail/hero-detail.component.ts | 13 +- .../heroes/hero-list/hero-list.component.1.ts | 14 +- .../heroes/hero-list/hero-list.component.ts | 22 +-- .../router/src/app/heroes/hero.service.ts | 18 +- .../src/app/heroes/heroes-routing.module.1.ts | 26 ++- .../src/app/heroes/heroes-routing.module.2.ts | 22 +-- .../src/app/heroes/heroes-routing.module.ts | 26 ++- .../router/src/app/heroes/heroes.module.ts | 23 +-- .../router/src/app/heroes/mock-heroes.ts | 20 +-- .../router/src/app/message.service.ts | 2 +- .../page-not-found.component.ts | 5 +- .../selective-preloading-strategy.service.ts | 6 +- adev/src/content/examples/router/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 4 +- .../src/app/app.component.ts | 2 +- .../src/app/app.config.ts | 5 +- .../src/app/app.routes.ts | 4 +- .../src/app/profile/profile.component.ts | 2 +- .../my-lib/schematics/my-service/index.1.ts | 4 +- .../my-lib/schematics/my-service/index.ts | 48 ++--- .../my-lib/schematics/ng-add/index.ts | 12 +- .../my-lib/src/lib/my-lib.component.spec.ts | 4 +- .../my-lib/src/lib/my-lib.component.ts | 4 +- .../projects/my-lib/src/lib/my-lib.module.ts | 11 +- .../my-lib/src/lib/my-lib.service.spec.ts | 4 +- .../projects/my-lib/src/lib/my-lib.service.ts | 4 +- .../src/app/app.component.ts | 4 +- .../src/app/app.module.ts | 18 +- .../schematics-for-libraries/src/main.ts | 9 +- .../examples/security/e2e/src/app.e2e-spec.ts | 7 +- .../e2e/src/app.e2e-spec.ts | 5 +- .../src/app/app.component.ts | 12 +- .../src/app/check-for-update.service.ts | 11 +- .../app/handle-unrecoverable-state.service.ts | 12 +- .../src/app/log-update.service.ts | 7 +- .../src/app/prompt-update.service.ts | 35 ++-- .../src/main.ts | 6 +- .../examples/setup/e2e/src/app.e2e-spec.ts | 4 +- .../setup/src/app/app.component.spec.ts | 8 +- .../examples/setup/src/app/app.component.ts | 8 +- .../examples/setup/src/app/app.module.ts | 14 +- adev/src/content/examples/setup/src/main.ts | 9 +- .../examples/ssr/e2e/src/app.e2e-spec.ts | 34 ++-- adev/src/content/examples/ssr/server.ts | 21 ++- .../examples/ssr/src/app/app.component.ts | 22 +-- .../examples/ssr/src/app/app.config.server.ts | 6 +- .../examples/ssr/src/app/app.config.ts | 26 ++- .../examples/ssr/src/app/app.routes.ts | 16 +- .../src/app/dashboard/dashboard.component.ts | 21 ++- .../app/hero-detail/hero-detail.component.ts | 24 ++- .../app/hero-search/hero-search.component.ts | 20 +-- .../examples/ssr/src/app/hero.service.ts | 74 ++++---- .../ssr/src/app/heroes/heroes.component.ts | 33 ++-- .../ssr/src/app/in-memory-data.service.ts | 26 +-- .../examples/ssr/src/app/message.service.ts | 4 +- .../src/app/messages/messages.component.ts | 13 +- .../examples/ssr/src/app/mock-heroes.ts | 20 +-- .../content/examples/ssr/src/main.server.ts | 6 +- adev/src/content/examples/ssr/src/main.ts | 9 +- .../e2e/src/app.e2e-spec.ts | 8 +- .../structural-directives/src/app/hero.ts | 8 +- .../src/app/loading-state.ts | 4 +- .../styleguide/e2e/src/app.e2e-spec.ts | 2 +- .../styleguide/src/01-01/app/app.component.ts | 6 +- .../styleguide/src/01-01/app/app.module.ts | 25 ++- .../01-01/app/heroes/hero.component.avoid.ts | 18 +- .../src/01-01/app/heroes/heroes.component.ts | 9 +- .../01-01/app/heroes/shared/hero.service.ts | 4 +- .../01-01/app/heroes/shared/mock-heroes.ts | 8 +- .../examples/styleguide/src/01-01/main.ts | 4 +- .../styleguide/src/02-05/app/app.component.ts | 6 +- .../styleguide/src/02-05/app/app.module.ts | 20 +-- .../examples/styleguide/src/02-05/main.ts | 4 +- .../styleguide/src/02-07/app/app.component.ts | 6 +- .../styleguide/src/02-07/app/app.module.ts | 22 +-- .../02-07/app/heroes/hero.component.avoid.ts | 4 +- .../src/02-07/app/heroes/hero.component.ts | 4 +- .../02-07/app/users/users.component.avoid.ts | 4 +- .../src/02-07/app/users/users.component.ts | 6 +- .../styleguide/src/02-08/app/app.component.ts | 6 +- .../styleguide/src/02-08/app/app.module.ts | 21 +-- .../app/shared/input-highlight.directive.ts | 4 +- .../app/shared/validate.directive.avoid.ts | 4 +- .../02-08/app/shared/validate.directive.ts | 4 +- .../styleguide/src/04-08/app/app.component.ts | 6 +- .../styleguide/src/04-08/app/app.module.ts | 23 ++- .../src/04-08/app/heroes/heroes.component.ts | 4 +- .../styleguide/src/04-10/app/app.component.ts | 6 +- .../styleguide/src/04-10/app/app.module.ts | 21 +-- .../src/04-10/app/heroes/heroes.component.ts | 18 +- .../filter-text/filter-text.component.ts | 5 +- .../shared/filter-text/filter-text.service.ts | 4 +- .../src/04-10/app/shared/init-caps.pipe.ts | 4 +- .../src/04-10/app/shared/shared.module.ts | 26 +-- .../styleguide/src/05-02/app/app.component.ts | 6 +- .../styleguide/src/05-02/app/app.module.ts | 19 +- .../hero-button.component.avoid.ts | 6 +- .../hero-button/hero-button.component.ts | 6 +- .../styleguide/src/05-03/app/app.component.ts | 6 +- .../styleguide/src/05-03/app/app.module.ts | 19 +- .../hero-button.component.avoid.ts | 6 +- .../hero-button/hero-button.component.ts | 6 +- .../styleguide/src/05-04/app/app.component.ts | 8 +- .../styleguide/src/05-04/app/app.module.ts | 26 ++- .../app/heroes/heroes.component.avoid.ts | 16 +- .../src/05-04/app/heroes/heroes.component.ts | 8 +- .../05-04/app/heroes/shared/hero.service.ts | 9 +- .../styleguide/src/05-12/app/app.component.ts | 6 +- .../styleguide/src/05-12/app/app.module.ts | 19 +- .../hero-button.component.avoid.ts | 12 +- .../hero-button/hero-button.component.ts | 4 +- .../styleguide/src/05-13/app/app.component.ts | 5 +- .../styleguide/src/05-13/app/app.module.ts | 19 +- .../hero-button.component.avoid.ts | 4 +- .../hero-button/hero-button.component.ts | 4 +- .../heroes/shared/hero-highlight.directive.ts | 5 +- .../styleguide/src/05-14/app/app.component.ts | 6 +- .../styleguide/src/05-14/app/app.module.ts | 19 +- .../app/shared/toast/toast.component.avoid.ts | 7 +- .../05-14/app/shared/toast/toast.component.ts | 8 +- .../styleguide/src/05-15/app/app.component.ts | 8 +- .../styleguide/src/05-15/app/app.module.ts | 22 +-- .../hero-list/hero-list.component.avoid.ts | 23 +-- .../heroes/hero-list/hero-list.component.ts | 12 +- .../05-15/app/heroes/shared/hero.service.ts | 6 +- .../styleguide/src/05-16/app/app.component.ts | 7 +- .../styleguide/src/05-16/app/app.module.ts | 22 +-- .../05-16/app/heroes/hero.component.avoid.ts | 4 +- .../src/05-16/app/heroes/hero.component.ts | 6 +- .../styleguide/src/05-17/app/app.component.ts | 6 +- .../styleguide/src/05-17/app/app.module.ts | 23 +-- .../hero-list/hero-list.component.avoid.ts | 10 +- .../heroes/hero-list/hero-list.component.ts | 8 +- .../05-17/app/heroes/hero/hero.component.ts | 8 +- .../styleguide/src/05-18/app/app.component.ts | 6 +- .../styleguide/src/05-18/app/app.module.ts | 23 +-- .../heroes/hero-list/hero-list.component.ts | 6 +- .../app/heroes/hero/hero.component.avoid.ts | 4 +- .../heroes/hero/hero.component.optional.ts | 4 +- .../05-18/app/heroes/hero/hero.component.ts | 4 +- .../styleguide/src/06-01/app/app.component.ts | 6 +- .../styleguide/src/06-01/app/app.module.ts | 19 +- .../06-01/app/shared/highlight.directive.ts | 4 +- .../styleguide/src/06-03/app/app.component.ts | 6 +- .../styleguide/src/06-03/app/app.module.ts | 19 +- .../06-03/app/shared/validator.directive.ts | 4 +- .../06-03/app/shared/validator2.directive.ts | 6 +- .../styleguide/src/07-01/app/app.component.ts | 10 +- .../styleguide/src/07-01/app/app.module.ts | 19 +- .../07-01/app/heroes/shared/hero.service.ts | 8 +- .../styleguide/src/07-04/app/app.component.ts | 10 +- .../styleguide/src/07-04/app/app.module.ts | 19 +- .../heroes/shared/hero-arena.service.avoid.ts | 11 +- .../app/heroes/shared/hero-arena.service.ts | 21 +-- .../07-04/app/heroes/shared/hero.service.ts | 6 +- .../styleguide/src/09-01/app/app.component.ts | 6 +- .../styleguide/src/09-01/app/app.module.ts | 19 +- .../hero-button.component.avoid.ts | 7 +- .../hero-button/hero-button.component.ts | 4 +- .../styleguide/src/app/app.component.ts | 6 +- .../examples/styleguide/src/app/app.module.ts | 33 ++-- .../examples/styleguide/src/app/app.routes.ts | 8 +- .../examples/styleguide/src/app/hero-data.ts | 8 +- .../content/examples/styleguide/src/main.ts | 5 +- .../e2e/src/app.e2e-spec.ts | 18 +- .../src/app/app.component.ts | 23 ++- .../template-reference-variables/src/main.ts | 9 +- .../template-syntax/e2e/src/app.e2e-spec.ts | 3 +- .../template-syntax/src/app/app.component.ts | 114 +++++++----- .../src/app/click.directive.ts | 24 ++- .../src/app/hero-detail.component.ts | 15 +- .../src/app/hero-form.component.ts | 16 +- .../src/app/hero-switch.components.ts | 26 +-- .../examples/template-syntax/src/app/hero.ts | 9 +- .../src/app/sizer.component.ts | 14 +- .../template-syntax/src/app/svg.component.ts | 4 +- .../examples/template-syntax/src/main.ts | 9 +- .../examples/testing/e2e/src/app.e2e-spec.ts | 4 +- .../src/app/about/about.component.spec.ts | 12 +- .../testing/src/app/about/about.component.ts | 6 +- .../src/app/app-initial.component.spec.ts | 8 +- .../testing/src/app/app-initial.component.ts | 2 +- .../src/app/app.component.router.spec.ts | 42 ++--- .../testing/src/app/app.component.spec.ts | 24 +-- .../examples/testing/src/app/app.component.ts | 8 +- .../examples/testing/src/app/app.config.ts | 22 +-- .../examples/testing/src/app/app.routes.ts | 14 +- .../banner/banner-external.component.spec.ts | 4 +- .../app/banner/banner-external.component.ts | 2 +- .../banner/banner-initial.component.spec.ts | 14 +- .../app/banner/banner-initial.component.ts | 2 +- .../banner.component.detect-changes.spec.ts | 8 +- .../src/app/banner/banner.component.spec.ts | 4 +- .../src/app/banner/banner.component.ts | 2 +- .../dashboard-hero.component.spec.ts | 24 +-- .../app/dashboard/dashboard-hero.component.ts | 6 +- .../dashboard.component.no-testbed.spec.ts | 12 +- .../app/dashboard/dashboard.component.spec.ts | 34 ++-- .../src/app/dashboard/dashboard.component.ts | 12 +- .../testing/src/app/demo/async-helper.spec.ts | 8 +- .../testing/src/app/demo/demo-main.ts | 4 +- .../testing/src/app/demo/demo.spec.ts | 8 +- .../testing/src/app/demo/demo.testbed.spec.ts | 32 ++-- .../examples/testing/src/app/demo/demo.ts | 18 +- .../app/hero/hero-detail.component.spec.ts | 50 +++--- .../src/app/hero/hero-detail.component.ts | 14 +- .../src/app/hero/hero-detail.service.ts | 12 +- .../src/app/hero/hero-list.component.spec.ts | 24 +-- .../src/app/hero/hero-list.component.ts | 14 +- .../testing/src/app/hero/hero.routes.ts | 10 +- .../testing/src/app/in-memory-data.service.ts | 24 +-- .../src/app/model/hero.service.spec.ts | 32 ++-- .../testing/src/app/model/hero.service.ts | 14 +- .../src/app/model/testing/http-client.spec.ts | 23 +-- .../app/model/testing/test-hero.service.ts | 20 +-- .../src/app/model/testing/test-heroes.ts | 14 +- .../testing/src/app/model/user.service.ts | 4 +- .../src/app/shared/canvas.component.spec.ts | 6 +- .../src/app/shared/canvas.component.ts | 2 +- .../app/shared/highlight.directive.spec.ts | 8 +- .../src/app/shared/highlight.directive.ts | 4 +- .../examples/testing/src/app/shared/shared.ts | 8 +- .../src/app/shared/title-case.pipe.spec.ts | 2 +- .../testing/src/app/shared/title-case.pipe.ts | 4 +- .../app/twain/twain.component.marbles.spec.ts | 12 +- .../src/app/twain/twain.component.spec.ts | 14 +- .../testing/src/app/twain/twain.component.ts | 12 +- .../testing/src/app/twain/twain.data.ts | 4 +- .../testing/src/app/twain/twain.service.ts | 10 +- .../src/app/welcome/welcome.component.spec.ts | 14 +- .../src/app/welcome/welcome.component.ts | 4 +- adev/src/content/examples/testing/src/main.ts | 6 +- .../src/testing/async-observable-helpers.ts | 2 +- .../examples/testing/src/testing/index.ts | 8 +- .../testing/src/testing/jasmine-matchers.ts | 2 +- .../examples/two-way-binding/e2e/app.po.ts | 2 +- .../two-way-binding/e2e/src/app.e2e-spec.ts | 4 +- .../e2e/src/app.e2e-spec.ts | 35 ++-- .../app/angular-js/angular-js.component.ts | 9 +- .../src/app/angularjs-app/index.ts | 31 ++-- .../src/app/app-routing.module.ts | 22 +-- .../src/app/app.component.ts | 6 +- .../src/app/app.module.ts | 31 ++-- .../src/app/app404/app404.component.ts | 4 +- .../src/app/home/home.component.ts | 8 +- .../src/app/lazy-loader.service.ts | 6 +- .../upgrade-lazy-load-ajs/src/main.ts | 10 +- .../examples/upgrade-module/e2e-spec.ts | 40 +---- .../src/app/a-to-ajs-providers/app.module.ts | 28 ++- .../hero-detail.component.ts | 11 +- .../src/app/a-to-ajs-providers/heroes.ts | 9 +- .../app/a-to-ajs-transclusion/app.module.ts | 31 ++-- .../container.component.ts | 6 +- .../hero-detail.component.ts | 12 +- .../app/ajs-a-hybrid-bootstrap/app.module.ts | 24 ++- .../src/app/ajs-bootstrap/app.module.ts | 9 +- .../src/app/ajs-ng-app/app.module.ts | 7 +- .../src/app/ajs-to-a-projection/app.module.ts | 39 ++--- .../hero-detail.component.ts | 6 +- .../ajs-to-a-projection/main.controller.ts | 2 +- .../ajs-upgraded-providers.ts | 4 +- .../src/app/ajs-to-a-providers/app.module.ts | 38 ++-- .../hero-detail.component.ts | 8 +- .../app/ajs-to-a-providers/heroes.service.ts | 7 +- .../src/app/downgrade-io/app.module.ts | 34 ++-- .../app/downgrade-io/hero-detail.component.ts | 6 +- .../src/app/downgrade-io/main.controller.ts | 7 +- .../src/app/downgrade-static/app.module.ts | 30 ++-- .../downgrade-static/hero-detail.component.ts | 6 +- .../src/app/hero-detail.directive.ts | 4 +- .../examples/upgrade-module/src/app/hero.ts | 8 +- .../src/app/upgrade-io/app.module.ts | 31 ++-- .../src/app/upgrade-io/container.component.ts | 6 +- .../app/upgrade-io/hero-detail.component.ts | 12 +- .../src/app/upgrade-static/app.module.ts | 32 ++-- .../app/upgrade-static/container.component.ts | 6 +- .../upgrade-static/hero-detail.component.ts | 9 +- .../upgrade-module/src/app/villain.ts | 8 +- .../upgrade-module/src/systemjs.config.1.js | 23 +-- .../app/app.animations.ts | 76 ++++---- .../app/app.config.ts | 34 ++-- .../app/app.module.ts | 8 +- .../core/checkmark/checkmark.filter.spec.ts | 14 +- .../app/core/checkmark/checkmark.filter.ts | 4 +- .../app/core/phone/phone.service.spec.ts | 7 +- .../app/core/phone/phone.service.ts | 21 ++- .../phone-detail.component.spec.ts | 13 +- .../phone-detail/phone-detail.component.ts | 10 +- .../app/phone-detail/phone-detail.module.ts | 5 +- .../phone-list/phone-list.component.spec.ts | 8 +- .../app/phone-list/phone-list.component.ts | 11 +- .../upgrade-phonecat-1-typescript/e2e-spec.ts | 26 +-- .../karma.conf.ajs.js | 12 +- .../app/ajs-upgraded-providers.ts | 2 +- .../app/app.animations.ts | 76 ++++---- .../app/app.config.ts | 34 ++-- .../app/app.module.ajs.ts | 8 +- .../app/app.module.ts | 32 ++-- .../app/core/checkmark/checkmark.pipe.spec.ts | 3 +- .../app/core/checkmark/checkmark.pipe.ts | 2 +- .../app/core/phone/phone.service.spec.ts | 31 ++-- .../app/core/phone/phone.service.ts | 17 +- .../upgrade-phonecat-2-hybrid/app/main-aot.ts | 4 +- .../upgrade-phonecat-2-hybrid/app/main.ts | 4 +- .../phone-detail.component.ajs.ts | 14 +- .../phone-detail.component.spec.ts | 26 ++- .../phone-detail/phone-detail.component.ts | 15 +- .../app/phone-detail/phone-detail.module.ts | 5 +- .../phone-list/phone-list.component.ajs.ts | 15 +- .../phone-list/phone-list.component.spec.ts | 33 ++-- .../app/phone-list/phone-list.component.ts | 17 +- .../copy-dist-files.js | 4 +- .../upgrade-phonecat-2-hybrid/e2e-spec.ts | 20 +-- .../karma-test-shim.1.js | 43 ++--- .../karma-test-shim.js | 60 +++---- .../karma.conf.ajs.js | 23 +-- .../upgrade-phonecat-2-hybrid/karma.conf.js | 58 +++--- .../rollup-config.js | 14 +- .../systemjs.config.1.js | 29 +-- .../app/app-routing.module.ts | 28 +-- .../app/app.component.ts | 6 +- .../app/app.module.ts | 40 ++--- .../app/core/checkmark/checkmark.pipe.spec.ts | 3 +- .../app/core/checkmark/checkmark.pipe.ts | 2 +- .../app/core/phone/phone.service.spec.ts | 24 +-- .../app/core/phone/phone.service.ts | 8 +- .../upgrade-phonecat-3-final/app/main.ts | 4 +- .../phone-detail.component.spec.ts | 23 ++- .../phone-detail/phone-detail.component.ts | 17 +- .../phone-list/phone-list.component.spec.ts | 33 ++-- .../app/phone-list/phone-list.component.ts | 8 +- .../upgrade-phonecat-3-final/e2e-spec.ts | 20 +-- .../karma-test-shim.js | 60 +++---- .../upgrade-phonecat-3-final/karma.conf.js | 54 +++--- .../user-input/e2e/src/app.e2e-spec.ts | 4 +- .../e2e/src/app.e2e-spec.ts | 73 ++++++-- .../src/app/app.component.ts | 2 +- .../what-is-angular/e2e/src/app.e2e-spec.ts | 7 +- .../what-is-angular/src/app/logger.service.ts | 2 +- .../src-final/app/home/home.component.ts | 4 +- .../14-http/src/app/home/home.component.ts | 4 +- adev/src/main.ts | 2 +- 870 files changed, 6381 insertions(+), 6752 deletions(-) diff --git a/.ng-dev/format.mts b/.ng-dev/format.mts index bc19dce5e3d..febcd823f2d 100644 --- a/.ng-dev/format.mts +++ b/.ng-dev/format.mts @@ -7,6 +7,7 @@ export const format: FormatConfig = { 'prettier': { 'matchers': [ '**/*.{yaml,yml}', + 'adev/**/*.{js,ts}', 'devtools/**/*.{js,ts}', 'tools/**/*.{js,ts}', 'modules/**/*.{js,ts}', diff --git a/adev/karma.conf.js b/adev/karma.conf.js index df06b673165..1821c33a5bf 100644 --- a/adev/karma.conf.js +++ b/adev/karma.conf.js @@ -21,7 +21,7 @@ module.exports = function (config) { '/dummy/image': 'src/assets/images/logos/angular/angular.png', }, client: { - clearContext: false, // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser jasmine: { // you can add configuration options for Jasmine here // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html @@ -32,15 +32,12 @@ module.exports = function (config) { }, }, jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces + suppressAll: true, // removes the duplicated traces }, coverageReporter: { dir: require('path').join(__dirname, './coverage/site'), subdir: '.', - reporters: [ - { type: 'html' }, - { type: 'text-summary' } - ], + reporters: [{type: 'html'}, {type: 'text-summary'}], }, reporters: ['progress', 'kjhtml', 'jasmine-seed'], port: 9876, @@ -51,7 +48,14 @@ module.exports = function (config) { ChromeHeadlessNoSandbox: { base: 'ChromeHeadless', // See /integration/README.md#browser-tests for more info on these args - flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'], + flags: [ + '--no-sandbox', + '--headless', + '--disable-gpu', + '--disable-dev-shm-usage', + '--hide-scrollbars', + '--mute-audio', + ], }, }, browsers: ['ChromeHeadlessNoSandbox'], diff --git a/adev/src/app/app.component.ts b/adev/src/app/app.component.ts index b42ea9082f2..0eacc64b9c6 100644 --- a/adev/src/app/app.component.ts +++ b/adev/src/app/app.component.ts @@ -7,7 +7,15 @@ */ import {DOCUMENT, isPlatformBrowser} from '@angular/common'; -import {Component, inject, NgZone, OnInit, PLATFORM_ID, signal, WritableSignal} from '@angular/core'; +import { + Component, + inject, + NgZone, + OnInit, + PLATFORM_ID, + signal, + WritableSignal, +} from '@angular/core'; import {NavigationEnd, NavigationSkipped, Router, RouterLink, RouterOutlet} from '@angular/router'; import {filter, map, skip} from 'rxjs/operators'; import { diff --git a/adev/src/app/core/services/content-loader.service.ts b/adev/src/app/core/services/content-loader.service.ts index efffa0baf75..a6ad13ab441 100644 --- a/adev/src/app/core/services/content-loader.service.ts +++ b/adev/src/app/core/services/content-loader.service.ts @@ -28,12 +28,12 @@ export class ContentLoader implements DocsContentLoader { this.cache.set( path, this.httpClient - .get(`assets/content/${path}`, { - responseType: 'text', - }) - .pipe(map((contents) => ({contents, id: path}))) - .toPromise() - ); + .get(`assets/content/${path}`, { + responseType: 'text', + }) + .pipe(map((contents) => ({contents, id: path}))) + .toPromise(), + ); } catch { this.router.navigateByUrl('/404'); } diff --git a/adev/src/app/editor/code-editor/code-mirror-editor.service.spec.ts b/adev/src/app/editor/code-editor/code-mirror-editor.service.spec.ts index 18cd27abb03..b13f3c48965 100644 --- a/adev/src/app/editor/code-editor/code-mirror-editor.service.spec.ts +++ b/adev/src/app/editor/code-editor/code-mirror-editor.service.spec.ts @@ -16,10 +16,7 @@ import {NodeRuntimeSandbox} from '../node-runtime-sandbox.service'; import {EmbeddedTutorialManager} from '../embedded-tutorial-manager.service'; import {CodeMirrorEditor, EDITOR_CONTENT_CHANGE_DELAY_MILLIES} from './code-mirror-editor.service'; -import { - TutorialConfig, - TutorialMetadata, -} from '@angular/docs'; +import {TutorialConfig, TutorialMetadata} from '@angular/docs'; class FakeNodeRuntimeSandbox { async writeFile(path: string, content: string) {} diff --git a/adev/src/app/editor/constants.ts b/adev/src/app/editor/constants.ts index c8313557eb3..f12e01eef45 100644 --- a/adev/src/app/editor/constants.ts +++ b/adev/src/app/editor/constants.ts @@ -13,5 +13,4 @@ export const TUTORIALS_ASSETS_METADATA_DIRECTORY = 'metadata'; export const TUTORIALS_SOURCE_CODE_WEB_PATH = `${TUTORIALS_ASSETS_WEB_PATH}/${TUTORIALS_ASSETS_SOURCE_CODE_DIRECTORY}`; export const TUTORIALS_METADATA_WEB_PATH = `${TUTORIALS_ASSETS_WEB_PATH}/${TUTORIALS_ASSETS_METADATA_DIRECTORY}`; - -export const TUTORIALS_COMMON_DIRECTORY = 'common'; \ No newline at end of file +export const TUTORIALS_COMMON_DIRECTORY = 'common'; diff --git a/adev/src/app/editor/embedded-tutorial-manager.service.spec.ts b/adev/src/app/editor/embedded-tutorial-manager.service.spec.ts index f2b78d7ea51..636bc506b5c 100644 --- a/adev/src/app/editor/embedded-tutorial-manager.service.spec.ts +++ b/adev/src/app/editor/embedded-tutorial-manager.service.spec.ts @@ -245,7 +245,7 @@ describe('EmbeddedTutorialManager', () => { }, }, }; - + const metadata: TutorialMetadata = { tutorialFiles: {'app.js': ''}, openFiles: ['app.js'], @@ -295,7 +295,6 @@ describe('EmbeddedTutorialManager', () => { ); }); - it('should not set shouldReinstallDependencies if project did not change', async () => { const fetchMock = spyOn(window, 'fetch'); @@ -325,7 +324,6 @@ describe('EmbeddedTutorialManager', () => { it('should trigger shouldReInstallDependencies if new metadata has different dependencies', async () => { const fetchMock = spyOn(window, 'fetch'); - fetchMock .withArgs(`${TUTORIALS_ASSETS_WEB_PATH}/${tutorial}/source-code.json`) .and.returnValues(Promise.resolve(new Response('{}', {status: 200}))); diff --git a/adev/src/app/editor/embedded-tutorial-manager.service.ts b/adev/src/app/editor/embedded-tutorial-manager.service.ts index 2aa7f421d76..1a768ac1479 100644 --- a/adev/src/app/editor/embedded-tutorial-manager.service.ts +++ b/adev/src/app/editor/embedded-tutorial-manager.service.ts @@ -11,10 +11,7 @@ import {FileSystemTree} from '@webcontainer/api'; import {BehaviorSubject} from 'rxjs'; import {TutorialMetadata} from '@angular/docs'; -import { - TUTORIALS_COMMON_DIRECTORY, - TUTORIALS_ASSETS_WEB_PATH -} from './constants'; +import {TUTORIALS_COMMON_DIRECTORY, TUTORIALS_ASSETS_WEB_PATH} from './constants'; /** * A service responsible for the current tutorial, retrieving and providing @@ -140,7 +137,9 @@ export class EmbeddedTutorialManager { } private async fetchTutorialSourceCode(tutorial: string): Promise { - const tutorialSourceCode = await fetch(`${TUTORIALS_ASSETS_WEB_PATH}/${tutorial}/source-code.json`); + const tutorialSourceCode = await fetch( + `${TUTORIALS_ASSETS_WEB_PATH}/${tutorial}/source-code.json`, + ); if (!tutorialSourceCode.ok) throw new Error(`Missing source code for tutorial ${tutorial}`); @@ -148,7 +147,9 @@ export class EmbeddedTutorialManager { } private async fetchTutorialMetadata(tutorial: string): Promise { - const tutorialSourceCode = await fetch(`${TUTORIALS_ASSETS_WEB_PATH}/${tutorial}/metadata.json`); + const tutorialSourceCode = await fetch( + `${TUTORIALS_ASSETS_WEB_PATH}/${tutorial}/metadata.json`, + ); if (!tutorialSourceCode.ok) throw new Error(`Missing metadata for ${tutorial}`); diff --git a/adev/src/app/editor/index.ts b/adev/src/app/editor/index.ts index 848ea638364..4d353a7fd02 100644 --- a/adev/src/app/editor/index.ts +++ b/adev/src/app/editor/index.ts @@ -1,8 +1,7 @@ -export { EmbeddedTutorialManager } from './embedded-tutorial-manager.service' -export { LoadingStep } from './enums/loading-steps' -export { NodeRuntimeState } from './node-runtime-state.service' +export {EmbeddedTutorialManager} from './embedded-tutorial-manager.service'; +export {LoadingStep} from './enums/loading-steps'; +export {NodeRuntimeState} from './node-runtime-state.service'; -export { NodeRuntimeSandbox } from './node-runtime-sandbox.service' - -export {EmbeddedEditor, EMBEDDED_EDITOR_SELECTOR} from './embedded-editor.component' +export {NodeRuntimeSandbox} from './node-runtime-sandbox.service'; +export {EmbeddedEditor, EMBEDDED_EDITOR_SELECTOR} from './embedded-editor.component'; diff --git a/adev/src/app/editor/node-runtime-sandbox.service.spec.ts b/adev/src/app/editor/node-runtime-sandbox.service.spec.ts index 2edb3c6f53c..6a288aa3975 100644 --- a/adev/src/app/editor/node-runtime-sandbox.service.spec.ts +++ b/adev/src/app/editor/node-runtime-sandbox.service.spec.ts @@ -12,10 +12,7 @@ import {BehaviorSubject, of as observableOf} from 'rxjs'; import {signal} from '@angular/core'; import {WebContainer} from '@webcontainer/api'; import {TutorialType} from '@angular/docs'; -import { - FakeWebContainer, - FakeWebContainerProcess, -} from '@angular/docs/testing'; +import {FakeWebContainer, FakeWebContainerProcess} from '@angular/docs/testing'; import {AlertManager} from './alert-manager.service'; import {EmbeddedTutorialManager} from './embedded-tutorial-manager.service'; import {LoadingStep} from './enums/loading-steps'; diff --git a/adev/src/app/features/home/components/home-editor.component.ts b/adev/src/app/features/home/components/home-editor.component.ts index a881fffa745..4d13264a3bf 100644 --- a/adev/src/app/features/home/components/home-editor.component.ts +++ b/adev/src/app/features/home/components/home-editor.component.ts @@ -16,7 +16,7 @@ import { } from '@angular/core'; import {injectAsync} from '../../../core/services/inject-async'; -import { EmbeddedEditor, EmbeddedTutorialManager } from '../../../editor'; +import {EmbeddedEditor, EmbeddedTutorialManager} from '../../../editor'; @Component({ selector: 'adev-code-editor', @@ -39,9 +39,7 @@ export class CodeEditorComponent implements OnInit { private async loadEmbeddedEditor() { const nodeRuntimeSandbox = await injectAsync(this.environmentInjector, () => - import('../../../editor/index').then( - (c) => c.NodeRuntimeSandbox, - ), + import('../../../editor/index').then((c) => c.NodeRuntimeSandbox), ); await this.embeddedTutorialManager.fetchAndSetTutorialFiles(this.tutorialFiles); diff --git a/adev/src/app/features/home/components/views/build-text.ts b/adev/src/app/features/home/components/views/build-text.ts index e3f2dd6604e..13f3328905b 100644 --- a/adev/src/app/features/home/components/views/build-text.ts +++ b/adev/src/app/features/home/components/views/build-text.ts @@ -31,7 +31,10 @@ export class BuildText extends View { /** * Create the build text. */ - constructor(private readonly gl: OGLRenderingContext, private readonly document: Document) { + constructor( + private readonly gl: OGLRenderingContext, + private readonly document: Document, + ) { super(); this.userData['x'] = 0; diff --git a/adev/src/app/features/home/components/views/build-view.ts b/adev/src/app/features/home/components/views/build-view.ts index 063276e37ca..6d9f244e73b 100644 --- a/adev/src/app/features/home/components/views/build-view.ts +++ b/adev/src/app/features/home/components/views/build-view.ts @@ -27,7 +27,10 @@ export class BuildView extends View { /** * Create the build view. */ - constructor(private readonly gl: OGLRenderingContext, private readonly document: Document) { + constructor( + private readonly gl: OGLRenderingContext, + private readonly document: Document, + ) { super(); this.visible = false; diff --git a/adev/src/app/features/home/components/views/lines.ts b/adev/src/app/features/home/components/views/lines.ts index f75f12e9f0d..191add68d25 100644 --- a/adev/src/app/features/home/components/views/lines.ts +++ b/adev/src/app/features/home/components/views/lines.ts @@ -34,7 +34,10 @@ export class Lines extends View { /** * Create the container view. */ - constructor(private readonly gl: OGLRenderingContext, private readonly divisions: number) { + constructor( + private readonly gl: OGLRenderingContext, + private readonly divisions: number, + ) { super(); this.userData['x'] = 0; diff --git a/adev/src/app/features/playground/playground.component.ts b/adev/src/app/features/playground/playground.component.ts index 2e1c9043f90..5db4b40f7cc 100644 --- a/adev/src/app/features/playground/playground.component.ts +++ b/adev/src/app/features/playground/playground.component.ts @@ -23,7 +23,7 @@ import {RouterLink} from '@angular/router'; import {PlaygroundTemplate} from '@angular/docs'; import {ClickOutside, NavigationList} from '@angular/docs'; import {injectAsync} from '../../core/services/inject-async'; -import {EmbeddedTutorialManager} from '../../editor/index'; +import {EmbeddedTutorialManager} from '../../editor/index'; import PLAYGROUND_ROUTE_DATA_JSON from '../../../../src/assets/tutorials/playground/routes.json'; import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu'; @@ -69,9 +69,7 @@ export default class PlaygroundComponent implements AfterViewInit { const [embeddedEditorComponent, nodeRuntimeSandbox] = await Promise.all([ import('../../editor/index').then((c) => c.EmbeddedEditor), injectAsync(this.environmentInjector, () => - import('../../editor/index').then( - (c) => c.NodeRuntimeSandbox, - ), + import('../../editor/index').then((c) => c.NodeRuntimeSandbox), ), ]); diff --git a/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.ts b/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.ts index 6ec28cfbbee..47a52c069ce 100644 --- a/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.ts +++ b/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.ts @@ -59,7 +59,7 @@ export default class CliReferenceDetailsPage implements OnInit { private setPageContent(): void { this.activatedRoute.data .pipe( - map(data => data['docContent']), + map((data) => data['docContent']), takeUntilDestroyed(this.destroyRef), ) .subscribe((doc: DocContent | undefined) => { diff --git a/adev/src/app/features/tutorial/tutorial.component.spec.ts b/adev/src/app/features/tutorial/tutorial.component.spec.ts index a8a2545264e..88e12df243c 100644 --- a/adev/src/app/features/tutorial/tutorial.component.spec.ts +++ b/adev/src/app/features/tutorial/tutorial.component.spec.ts @@ -18,12 +18,12 @@ import { EMBEDDED_EDITOR_SELECTOR, EmbeddedEditor, EmbeddedTutorialManager, - NodeRuntimeSandbox + NodeRuntimeSandbox, } from '../../editor'; import {mockAsyncProvider} from '../../core/services/inject-async'; import Tutorial from './tutorial.component'; -import {TutorialConfig, TutorialType} from '@angular/docs' +import {TutorialConfig, TutorialType} from '@angular/docs'; @Component({ selector: EMBEDDED_EDITOR_SELECTOR, diff --git a/adev/src/app/features/tutorial/tutorial.component.ts b/adev/src/app/features/tutorial/tutorial.component.ts index c05befb047b..a28bda78080 100644 --- a/adev/src/app/features/tutorial/tutorial.component.ts +++ b/adev/src/app/features/tutorial/tutorial.component.ts @@ -38,11 +38,11 @@ import { EmbeddedTutorialManager, LoadingStep, NodeRuntimeState, - EmbeddedEditor + EmbeddedEditor, } from '../../editor/index'; import {SplitResizerHandler} from './split-resizer-handler.service'; -import { TutorialType } from '@angular/docs'; -import { TutorialNavigationData, TutorialNavigationItem, } from '@angular/docs' +import {TutorialType} from '@angular/docs'; +import {TutorialNavigationData, TutorialNavigationItem} from '@angular/docs'; const INTRODUCTION_LABEL = 'Introduction'; @@ -138,9 +138,7 @@ export default class Tutorial implements AfterViewInit { this.embeddedTutorialManager.revealAnswer(); const nodeRuntimeSandbox = await injectAsync(this.environmentInjector, () => - import('../../editor/index').then( - (s) => s.NodeRuntimeSandbox, - ), + import('../../editor/index').then((s) => s.NodeRuntimeSandbox), ); await Promise.all( @@ -213,16 +211,10 @@ export default class Tutorial implements AfterViewInit { this.shouldRenderContent.set(routeData.type !== TutorialType.EDITOR_ONLY); - this.nextStepPath = routeData.nextStep - ? `/${routeData.nextStep}` - : undefined; - this.previousStepPath = routeData.previousStep - ? `/${routeData.previousStep}` - : undefined; + this.nextStepPath = routeData.nextStep ? `/${routeData.nextStep}` : undefined; + this.previousStepPath = routeData.previousStep ? `/${routeData.previousStep}` : undefined; - this.nextTutorialPath.set( - routeData.nextTutorial ? `/${routeData.nextTutorial}` : null, - ); + this.nextTutorialPath.set(routeData.nextTutorial ? `/${routeData.nextTutorial}` : null); } /** diff --git a/adev/src/app/routes.ts b/adev/src/app/routes.ts index 233702c8bd9..d26a1b5bd88 100644 --- a/adev/src/app/routes.ts +++ b/adev/src/app/routes.ts @@ -6,11 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import { - contentResolver, - flatNavigationData, - mapNavigationItemsToRoutes, -} from '@angular/docs'; +import {contentResolver, flatNavigationData, mapNavigationItemsToRoutes} from '@angular/docs'; import {Route} from '@angular/router'; import {DefaultPage, PagePrefix} from './core/enums/pages'; @@ -125,7 +121,7 @@ export const routes: Route[] = [ { path: '', loadComponent: () => import('./features/home/home.component'), - data: {label: 'Home'} + data: {label: 'Home'}, }, { path: PagePrefix.DOCS, diff --git a/adev/src/app/sub-navigation-data.ts b/adev/src/app/sub-navigation-data.ts index 9736962c94d..2642abe7e4b 100644 --- a/adev/src/app/sub-navigation-data.ts +++ b/adev/src/app/sub-navigation-data.ts @@ -943,7 +943,7 @@ export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [ { path: DefaultPage.TUTORIALS, contentPath: 'tutorials/home', - label: 'Tutorials' + label: 'Tutorials', }, ]; diff --git a/adev/src/assets/previews/previews.ts b/adev/src/assets/previews/previews.ts index 6f0f526d2d9..47feefedf2f 100644 --- a/adev/src/assets/previews/previews.ts +++ b/adev/src/assets/previews/previews.ts @@ -18,5 +18,4 @@ import {Type} from '@angular/core'; * Map of the previews components, values are functions which returns the promise of the component type, which will be displayed as preview in the ExampleViewer component. * Keys has to be equal to paths written down in the docs markdown files. */ -export const PREVIEWS_COMPONENTS_MAP: Record Promise>> = { -}; +export const PREVIEWS_COMPONENTS_MAP: Record Promise>> = {}; diff --git a/adev/src/content/api-examples/common/ngComponentOutlet/ts/module.ts b/adev/src/content/api-examples/common/ngComponentOutlet/ts/module.ts index 2379479d08f..e79c85692ed 100644 --- a/adev/src/content/api-examples/common/ngComponentOutlet/ts/module.ts +++ b/adev/src/content/api-examples/common/ngComponentOutlet/ts/module.ts @@ -82,7 +82,10 @@ export class NgComponentOutletCompleteExample implements OnInit { @ViewChild('svet', {static: true}) svetTemplateRef!: TemplateRef; myContent?: any[][]; - constructor(injector: Injector, private vcr: ViewContainerRef) { + constructor( + injector: Injector, + private vcr: ViewContainerRef, + ) { this.myInjector = Injector.create({ providers: [{provide: Greeter, deps: []}], parent: injector, diff --git a/adev/src/content/api-examples/core/ts/change_detect/change-detection.ts b/adev/src/content/api-examples/core/ts/change_detect/change-detection.ts index 3ea9cb8a970..09401766811 100644 --- a/adev/src/content/api-examples/core/ts/change_detect/change-detection.ts +++ b/adev/src/content/api-examples/core/ts/change_detect/change-detection.ts @@ -51,7 +51,10 @@ class DataListProvider { `, }) class GiantList { - constructor(private ref: ChangeDetectorRef, public dataProvider: DataListProvider) { + constructor( + private ref: ChangeDetectorRef, + public dataProvider: DataListProvider, + ) { ref.detach(); setInterval(() => { this.ref.detectChanges(); @@ -81,7 +84,10 @@ class DataProvider { @Component({selector: 'live-data', inputs: ['live'], template: 'Data: {{dataProvider.data}}'}) class LiveData { - constructor(private ref: ChangeDetectorRef, public dataProvider: DataProvider) {} + constructor( + private ref: ChangeDetectorRef, + public dataProvider: DataProvider, + ) {} @Input() set live(value: boolean) { diff --git a/adev/src/content/api-examples/router/testing/test/router_testing_harness_examples.spec.ts b/adev/src/content/api-examples/router/testing/test/router_testing_harness_examples.spec.ts index 45e9e94a48d..5c7d0e7b94b 100644 --- a/adev/src/content/api-examples/router/testing/test/router_testing_harness_examples.spec.ts +++ b/adev/src/content/api-examples/router/testing/test/router_testing_harness_examples.spec.ts @@ -70,7 +70,10 @@ describe('navigate for test examples', () => { `, }) class SearchCmp { - constructor(readonly route: ActivatedRoute, readonly router: Router) {} + constructor( + readonly route: ActivatedRoute, + readonly router: Router, + ) {} async searchFor(thing: string) { await this.router.navigate([], {queryParams: {query: thing}}); diff --git a/adev/src/content/examples/accessibility/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/accessibility/e2e/src/app.e2e-spec.ts index 9f95e2f9f25..d135719f49a 100644 --- a/adev/src/content/examples/accessibility/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/accessibility/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Accessibility example e2e tests', () => { - beforeEach(() => browser.get('')); it('should display Accessibility Example', async () => { @@ -13,5 +12,4 @@ describe('Accessibility example e2e tests', () => { expect(await element(by.css('input')).getAttribute('value')).toEqual('16'); expect(await element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px'); }); - }); diff --git a/adev/src/content/examples/angular-compiler-options/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/angular-compiler-options/e2e/src/app.e2e-spec.ts index bd99243f892..b614b967aa9 100644 --- a/adev/src/content/examples/angular-compiler-options/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/angular-compiler-options/e2e/src/app.e2e-spec.ts @@ -1,5 +1,5 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; +import {AppPage} from './app.po'; +import {browser, logging} from 'protractor'; describe('workspace-project App', () => { let page: AppPage; @@ -13,8 +13,10 @@ describe('workspace-project App', () => { afterEach(async () => { // Assert that there are no errors emitted from the browser const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain(jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry)); + expect(logs).not.toContain( + jasmine.objectContaining({ + level: logging.Level.SEVERE, + } as logging.Entry), + ); }); }); diff --git a/adev/src/content/examples/angular-compiler-options/src/app/app.component.spec.ts b/adev/src/content/examples/angular-compiler-options/src/app/app.component.spec.ts index 0509746ff04..c546db4466a 100644 --- a/adev/src/content/examples/angular-compiler-options/src/app/app.component.spec.ts +++ b/adev/src/content/examples/angular-compiler-options/src/app/app.component.spec.ts @@ -1,12 +1,10 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; +import {TestBed} from '@angular/core/testing'; +import {AppComponent} from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], }).compileComponents(); }); diff --git a/adev/src/content/examples/animations/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/animations/e2e/src/app.e2e-spec.ts index 3462e7f2940..7d897afbb99 100644 --- a/adev/src/content/examples/animations/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/animations/e2e/src/app.e2e-spec.ts @@ -1,5 +1,5 @@ -import { browser } from 'protractor'; -import { logging } from 'selenium-webdriver'; +import {browser} from 'protractor'; +import {logging} from 'selenium-webdriver'; import * as openClose from './open-close.po'; import * as statusSlider from './status-slider.po'; import * as toggle from './toggle.po'; @@ -7,8 +7,8 @@ import * as enterLeave from './enter-leave.po'; import * as auto from './auto.po'; import * as filterStagger from './filter-stagger.po'; import * as heroGroups from './hero-groups'; -import { getLinkById, sleepFor } from './util'; -import { getComponentSection, getToggleButton } from './querying.po'; +import {getLinkById, sleepFor} from './util'; +import {getComponentSection, getToggleButton} from './querying.po'; describe('Animation Tests', () => { const routingAnimationDuration = 350; @@ -42,7 +42,10 @@ describe('Animation Tests', () => { if (text.includes('Closed')) { await toggleButton.click(); - await browser.wait(async () => await container.getCssValue('height') === openHeight, 2000); + await browser.wait( + async () => (await container.getCssValue('height')) === openHeight, + 2000, + ); } text = await container.getText(); @@ -59,7 +62,10 @@ describe('Animation Tests', () => { if (text.includes('Open')) { await toggleButton.click(); - await browser.wait(async () => await container.getCssValue('height') === closedHeight, 2000); + await browser.wait( + async () => (await container.getCssValue('height')) === closedHeight, + 2000, + ); } text = await container.getText(); @@ -76,7 +82,7 @@ describe('Animation Tests', () => { await toggleButton.click(); const logs = await browser.manage().logs().get(logging.Type.BROWSER); - const animationMessages = logs.filter(({ message }) => message.includes('Animation')); + const animationMessages = logs.filter(({message}) => message.includes('Animation')); expect(animationMessages.length).toBeGreaterThan(0); }); @@ -98,7 +104,10 @@ describe('Animation Tests', () => { if (text === 'Active') { await toggleButton.click(); - await browser.wait(async () => await container.getCssValue('backgroundColor') === inactiveColor, 3000); + await browser.wait( + async () => (await container.getCssValue('backgroundColor')) === inactiveColor, + 3000, + ); } text = await container.getText(); @@ -115,7 +124,10 @@ describe('Animation Tests', () => { if (text === 'Inactive') { await toggleButton.click(); - await browser.wait(async () => await container.getCssValue('backgroundColor') === activeColor, 3000); + await browser.wait( + async () => (await container.getCssValue('backgroundColor')) === activeColor, + 3000, + ); } text = await container.getText(); @@ -166,7 +178,7 @@ describe('Animation Tests', () => { const hero = heroesList.get(0); await hero.click(); - await browser.wait(async () => await heroesList.count() < total, 2000); + await browser.wait(async () => (await heroesList.count()) < total, 2000); }); }); @@ -190,7 +202,7 @@ describe('Animation Tests', () => { const hero = heroesList.get(0); await hero.click(); - await browser.wait(async () => await heroesList.count() < total, 2000); + await browser.wait(async () => (await heroesList.count()) < total, 2000); }); }); @@ -214,7 +226,7 @@ describe('Animation Tests', () => { const input = filterStagger.getInput(); await input.sendKeys('Mag'); - await browser.wait(async () => await heroesList.count() === 2, 2000); + await browser.wait(async () => (await heroesList.count()) === 2, 2000); const newTotal = await heroesList.count(); expect(newTotal).toBeLessThan(total); @@ -245,7 +257,7 @@ describe('Animation Tests', () => { const hero = heroesList.get(0); await hero.click(); - await browser.wait(async () => await heroesList.count() < total, 2000); + await browser.wait(async () => (await heroesList.count()) < total, 2000); }); }); @@ -291,6 +303,5 @@ describe('Animation Tests', () => { await newPageSleepFor(queryingAnimationDuration); expect(await toggleButton.isEnabled()).toBe(true); }); - }); }); diff --git a/adev/src/content/examples/animations/e2e/src/auto.po.ts b/adev/src/content/examples/animations/e2e/src/auto.po.ts index fbaa38e85bb..defd4424669 100644 --- a/adev/src/content/examples/animations/e2e/src/auto.po.ts +++ b/adev/src/content/examples/animations/e2e/src/auto.po.ts @@ -1,5 +1,5 @@ -import { by } from 'protractor'; -import { locate } from './util'; +import {by} from 'protractor'; +import {locate} from './util'; export function getPage() { return by.css('app-hero-list-auto-page'); diff --git a/adev/src/content/examples/animations/e2e/src/enter-leave.po.ts b/adev/src/content/examples/animations/e2e/src/enter-leave.po.ts index 62ac5858c22..00342e245b2 100644 --- a/adev/src/content/examples/animations/e2e/src/enter-leave.po.ts +++ b/adev/src/content/examples/animations/e2e/src/enter-leave.po.ts @@ -1,5 +1,5 @@ -import { by } from 'protractor'; -import { locate } from './util'; +import {by} from 'protractor'; +import {locate} from './util'; export function getPage() { return by.css('app-hero-list-enter-leave-page'); diff --git a/adev/src/content/examples/animations/e2e/src/filter-stagger.po.ts b/adev/src/content/examples/animations/e2e/src/filter-stagger.po.ts index f6bd1e2df8f..f64cfa5a7dd 100644 --- a/adev/src/content/examples/animations/e2e/src/filter-stagger.po.ts +++ b/adev/src/content/examples/animations/e2e/src/filter-stagger.po.ts @@ -1,5 +1,5 @@ -import { by } from 'protractor'; -import { locate } from './util'; +import {by} from 'protractor'; +import {locate} from './util'; export function getPage() { return by.css('app-hero-list-page'); diff --git a/adev/src/content/examples/animations/e2e/src/hero-groups.ts b/adev/src/content/examples/animations/e2e/src/hero-groups.ts index 69700adcc63..60f656f03d0 100644 --- a/adev/src/content/examples/animations/e2e/src/hero-groups.ts +++ b/adev/src/content/examples/animations/e2e/src/hero-groups.ts @@ -1,5 +1,5 @@ -import { by } from 'protractor'; -import { locate } from './util'; +import {by} from 'protractor'; +import {locate} from './util'; export function getPage() { return by.css('app-hero-list-groups-page'); diff --git a/adev/src/content/examples/animations/e2e/src/open-close.po.ts b/adev/src/content/examples/animations/e2e/src/open-close.po.ts index 82ae5ab7db6..2a1f3743d1f 100644 --- a/adev/src/content/examples/animations/e2e/src/open-close.po.ts +++ b/adev/src/content/examples/animations/e2e/src/open-close.po.ts @@ -1,5 +1,5 @@ -import { by } from 'protractor'; -import { locate } from './util'; +import {by} from 'protractor'; +import {locate} from './util'; export function getPage() { return by.css('app-open-close-page'); diff --git a/adev/src/content/examples/animations/e2e/src/querying.po.ts b/adev/src/content/examples/animations/e2e/src/querying.po.ts index aa7ad828ba3..8dc04b90b5e 100644 --- a/adev/src/content/examples/animations/e2e/src/querying.po.ts +++ b/adev/src/content/examples/animations/e2e/src/querying.po.ts @@ -1,5 +1,5 @@ -import { by } from 'protractor'; -import { locate } from './util'; +import {by} from 'protractor'; +import {locate} from './util'; export function getComponent() { return by.css('app-querying'); diff --git a/adev/src/content/examples/animations/e2e/src/status-slider.po.ts b/adev/src/content/examples/animations/e2e/src/status-slider.po.ts index 43e1d582b38..07a31b2c781 100644 --- a/adev/src/content/examples/animations/e2e/src/status-slider.po.ts +++ b/adev/src/content/examples/animations/e2e/src/status-slider.po.ts @@ -1,5 +1,5 @@ -import { by } from 'protractor'; -import { locate } from './util'; +import {by} from 'protractor'; +import {locate} from './util'; export function getPage() { return by.css('app-status-slider-page'); diff --git a/adev/src/content/examples/animations/e2e/src/toggle.po.ts b/adev/src/content/examples/animations/e2e/src/toggle.po.ts index 28575a55a25..a47600d5f68 100644 --- a/adev/src/content/examples/animations/e2e/src/toggle.po.ts +++ b/adev/src/content/examples/animations/e2e/src/toggle.po.ts @@ -1,5 +1,5 @@ -import { by } from 'protractor'; -import { locate } from './util'; +import {by} from 'protractor'; +import {locate} from './util'; export function getPage() { return by.css('app-toggle-animations-child-page'); diff --git a/adev/src/content/examples/animations/e2e/src/util.ts b/adev/src/content/examples/animations/e2e/src/util.ts index 8942c1ed6aa..20ceffbf5e0 100644 --- a/adev/src/content/examples/animations/e2e/src/util.ts +++ b/adev/src/content/examples/animations/e2e/src/util.ts @@ -1,4 +1,4 @@ -import { Locator, ElementFinder, browser, by, element } from 'protractor'; +import {Locator, ElementFinder, browser, by, element} from 'protractor'; /** * @@ -6,8 +6,9 @@ import { Locator, ElementFinder, browser, by, element } from 'protractor'; */ export function locate(locator: Locator, ...locators: Locator[]) { return locators.reduce( - (current: ElementFinder, next: Locator) => current.element(next), - element(locator)) as ElementFinder; + (current: ElementFinder, next: Locator) => current.element(next), + element(locator), + ) as ElementFinder; } export async function sleepFor(time = 1000) { diff --git a/adev/src/content/examples/animations/src/app/about.component.ts b/adev/src/content/examples/animations/src/app/about.component.ts index ce81010d0bd..209cd8b3730 100755 --- a/adev/src/content/examples/animations/src/app/about.component.ts +++ b/adev/src/content/examples/animations/src/app/about.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ standalone: true, selector: 'app-about', templateUrl: './about.component.html', - styleUrls: ['./about.component.css'] + styleUrls: ['./about.component.css'], }) export class AboutComponent {} diff --git a/adev/src/content/examples/animations/src/app/animations.1.ts b/adev/src/content/examples/animations/src/app/animations.1.ts index 507d4d7c897..f9dd6266a25 100644 --- a/adev/src/content/examples/animations/src/app/animations.1.ts +++ b/adev/src/content/examples/animations/src/app/animations.1.ts @@ -1,15 +1,15 @@ // #docplaster // #docregion animation-const, trigger-const -import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations'; +import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations'; // #enddocregion trigger-const export const transitionAnimation = animation([ style({ height: '{{ height }}', opacity: '{{ opacity }}', - backgroundColor: '{{ backgroundColor }}' + backgroundColor: '{{ backgroundColor }}', }), - animate('{{ time }}') + animate('{{ time }}'), ]); // #enddocregion animation-const @@ -21,9 +21,9 @@ export const triggerAnimation = trigger('openClose', [ height: 0, opacity: 1, backgroundColor: 'red', - time: '1s' - } - }) - ]) + time: '1s', + }, + }), + ]), ]); // #enddocregion trigger-const diff --git a/adev/src/content/examples/animations/src/app/animations.ts b/adev/src/content/examples/animations/src/app/animations.ts index 163417d3563..8ff0b69a80c 100755 --- a/adev/src/content/examples/animations/src/app/animations.ts +++ b/adev/src/content/examples/animations/src/app/animations.ts @@ -1,71 +1,71 @@ import { - animation, trigger, animateChild, group, - transition, animate, style, query + animation, + trigger, + animateChild, + group, + transition, + animate, + style, + query, } from '@angular/animations'; export const transitionAnimation = animation([ style({ height: '{{ height }}', opacity: '{{ opacity }}', - backgroundColor: '{{ backgroundColor }}' + backgroundColor: '{{ backgroundColor }}', }), - animate('{{ time }}') + animate('{{ time }}'), ]); // Routable animations // #docregion route-animations export const slideInAnimation = -// #docregion style-view + // #docregion style-view trigger('routeAnimations', [ transition('HomePage <=> AboutPage', [ - style({ position: 'relative' }), + style({position: 'relative'}), query(':enter, :leave', [ style({ position: 'absolute', top: 0, left: 0, - width: '100%' - }) + width: '100%', + }), ]), -// #enddocregion style-view -// #docregion query - query(':enter', [ - style({ left: '-100%' }) - ], { optional: true }), - query(':leave', animateChild(), { optional: true }), + // #enddocregion style-view + // #docregion query + query(':enter', [style({left: '-100%'})], {optional: true}), + query(':leave', animateChild(), {optional: true}), group([ - query(':leave', [ - animate('300ms ease-out', style({ left: '100%' })) - ], { optional: true }), - query(':enter', [ - animate('300ms ease-out', style({ left: '0%' })) - ], { optional: true }), + query(':leave', [animate('300ms ease-out', style({left: '100%'}))], {optional: true}), + query(':enter', [animate('300ms ease-out', style({left: '0%'}))], {optional: true}), ]), ]), transition('* <=> *', [ - style({ position: 'relative' }), - query(':enter, :leave', [ - style({ - position: 'absolute', - top: 0, - left: 0, - width: '100%' - }) - ], { optional: true }), - query(':enter', [ - style({ left: '-100%' }) - ], { optional: true }), - query(':leave', animateChild(), { optional: true }), + style({position: 'relative'}), + query( + ':enter, :leave', + [ + style({ + position: 'absolute', + top: 0, + left: 0, + width: '100%', + }), + ], + {optional: true}, + ), + query(':enter', [style({left: '-100%'})], {optional: true}), + query(':leave', animateChild(), {optional: true}), group([ - query(':leave', [ - animate('200ms ease-out', style({ left: '100%', opacity: 0 })) - ], { optional: true }), - query(':enter', [ - animate('300ms ease-out', style({ left: '0%' })) - ], { optional: true }), - query('@*', animateChild(), { optional: true }) + query(':leave', [animate('200ms ease-out', style({left: '100%', opacity: 0}))], { + optional: true, + }), + query(':enter', [animate('300ms ease-out', style({left: '0%'}))], {optional: true}), + query('@*', animateChild(), {optional: true}), ]), - ]) + ]), // #enddocregion query ]); - // #enddocregion route-animations +// #enddocregion route-animations diff --git a/adev/src/content/examples/animations/src/app/app.component.ts b/adev/src/content/examples/animations/src/app/app.component.ts index da38efa951d..a222b280f7e 100755 --- a/adev/src/content/examples/animations/src/app/app.component.ts +++ b/adev/src/content/examples/animations/src/app/app.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion imports -import { Component, HostBinding } from '@angular/core'; +import {Component, HostBinding} from '@angular/core'; import { trigger, state, @@ -11,8 +11,8 @@ import { } from '@angular/animations'; // #enddocregion imports -import { ChildrenOutletContexts, RouterLink, RouterOutlet } from '@angular/router'; -import { slideInAnimation } from './animations'; +import {ChildrenOutletContexts, RouterLink, RouterOutlet} from '@angular/router'; +import {slideInAnimation} from './animations'; // #docregion decorator, toggle-app-animations, define @Component({ @@ -22,31 +22,31 @@ import { slideInAnimation } from './animations'; styleUrls: ['app.component.css'], imports: [RouterLink, RouterOutlet], animations: [ -// #enddocregion decorator - slideInAnimation -// #docregion decorator -// #enddocregion toggle-app-animations, define + // #enddocregion decorator + slideInAnimation, + // #docregion decorator + // #enddocregion toggle-app-animations, define // animation triggers go here -// #docregion toggle-app-animations, define - ] + // #docregion toggle-app-animations, define + ], }) // #enddocregion decorator, define export class AppComponent { @HostBinding('@.disabled') public animationsDisabled = false; -// #enddocregion toggle-app-animations + // #enddocregion toggle-app-animations -// #docregion get-route-animations-data + // #docregion get-route-animations-data constructor(private contexts: ChildrenOutletContexts) {} getRouteAnimationData() { return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation']; } -// #enddocregion get-route-animations-data + // #enddocregion get-route-animations-data toggleAnimations() { this.animationsDisabled = !this.animationsDisabled; } -// #docregion toggle-app-animations + // #docregion toggle-app-animations } // #enddocregion toggle-app-animations diff --git a/adev/src/content/examples/animations/src/app/app.config.ts b/adev/src/content/examples/animations/src/app/app.config.ts index ebcf6bad161..a6a8cd4a93c 100644 --- a/adev/src/content/examples/animations/src/app/app.config.ts +++ b/adev/src/content/examples/animations/src/app/app.config.ts @@ -1,15 +1,14 @@ -import { ApplicationConfig } from '@angular/core'; -import { routes } from './app.routes'; -import { provideRouter } from '@angular/router'; -import { provideProtractorTestingSupport } from '@angular/platform-browser'; -import { provideAnimations } from '@angular/platform-browser/animations'; - +import {ApplicationConfig} from '@angular/core'; +import {routes} from './app.routes'; +import {provideRouter} from '@angular/router'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; +import {provideAnimations} from '@angular/platform-browser/animations'; export const appConfig: ApplicationConfig = { - providers: [ - // needed for supporting e2e tests - provideProtractorTestingSupport(), - provideRouter(routes), - provideAnimations(), - ] + providers: [ + // needed for supporting e2e tests + provideProtractorTestingSupport(), + provideRouter(routes), + provideAnimations(), + ], }; diff --git a/adev/src/content/examples/animations/src/app/app.module.1.ts b/adev/src/content/examples/animations/src/app/app.module.1.ts index d2ba898f789..e1bb634f2c3 100644 --- a/adev/src/content/examples/animations/src/app/app.module.1.ts +++ b/adev/src/content/examples/animations/src/app/app.module.1.ts @@ -1,13 +1,10 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ - imports: [ - BrowserModule, - BrowserAnimationsModule - ], - declarations: [ ], - bootstrap: [ ] + imports: [BrowserModule, BrowserAnimationsModule], + declarations: [], + bootstrap: [], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/animations/src/app/app.routes.ts b/adev/src/content/examples/animations/src/app/app.routes.ts index ae0b88a7952..f57ccea1211 100644 --- a/adev/src/content/examples/animations/src/app/app.routes.ts +++ b/adev/src/content/examples/animations/src/app/app.routes.ts @@ -1,73 +1,73 @@ -import { Routes } from '@angular/router'; -import { OpenClosePageComponent } from './open-close-page.component'; -import { StatusSliderPageComponent } from './status-slider-page.component'; -import { ToggleAnimationsPageComponent } from './toggle-animations-page.component'; -import { HeroListPageComponent } from './hero-list-page.component'; -import { HeroListGroupPageComponent } from './hero-list-group-page.component'; -import { HeroListEnterLeavePageComponent } from './hero-list-enter-leave-page.component'; -import { HeroListAutoCalcPageComponent } from './hero-list-auto-page.component'; -import { InsertRemoveComponent } from './insert-remove.component'; -import { QueryingComponent } from './querying.component'; -import { HomeComponent } from './home.component'; -import { AboutComponent } from './about.component'; +import {Routes} from '@angular/router'; +import {OpenClosePageComponent} from './open-close-page.component'; +import {StatusSliderPageComponent} from './status-slider-page.component'; +import {ToggleAnimationsPageComponent} from './toggle-animations-page.component'; +import {HeroListPageComponent} from './hero-list-page.component'; +import {HeroListGroupPageComponent} from './hero-list-group-page.component'; +import {HeroListEnterLeavePageComponent} from './hero-list-enter-leave-page.component'; +import {HeroListAutoCalcPageComponent} from './hero-list-auto-page.component'; +import {InsertRemoveComponent} from './insert-remove.component'; +import {QueryingComponent} from './querying.component'; +import {HomeComponent} from './home.component'; +import {AboutComponent} from './about.component'; // #docregion route-animation-data export const routes: Routes = [ - { path: '', pathMatch: 'full', redirectTo: '/enter-leave' }, - { - path: 'open-close', - component: OpenClosePageComponent, - data: { animation: 'openClosePage' } - }, - { - path: 'status', - component: StatusSliderPageComponent, - data: { animation: 'statusPage' } - }, - { - path: 'toggle', - component: ToggleAnimationsPageComponent, - data: { animation: 'togglePage' } - }, - { - path: 'heroes', - component: HeroListPageComponent, - data: { animation: 'filterPage' } - }, - { - path: 'hero-groups', - component: HeroListGroupPageComponent, - data: { animation: 'heroGroupPage' } - }, - { - path: 'enter-leave', - component: HeroListEnterLeavePageComponent, - data: { animation: 'enterLeavePage' } - }, - { - path: 'auto', - component: HeroListAutoCalcPageComponent, - data: { animation: 'autoPage' } - }, - { - path: 'insert-remove', - component: InsertRemoveComponent, - data: { animation: 'insertRemovePage' } - }, - { - path: 'querying', - component: QueryingComponent, - data: { animation: 'queryingPage' } - }, - { - path: 'home', - component: HomeComponent, - data: { animation: 'HomePage' } - }, - { - path: 'about', - component: AboutComponent, - data: { animation: 'AboutPage' } - }, + {path: '', pathMatch: 'full', redirectTo: '/enter-leave'}, + { + path: 'open-close', + component: OpenClosePageComponent, + data: {animation: 'openClosePage'}, + }, + { + path: 'status', + component: StatusSliderPageComponent, + data: {animation: 'statusPage'}, + }, + { + path: 'toggle', + component: ToggleAnimationsPageComponent, + data: {animation: 'togglePage'}, + }, + { + path: 'heroes', + component: HeroListPageComponent, + data: {animation: 'filterPage'}, + }, + { + path: 'hero-groups', + component: HeroListGroupPageComponent, + data: {animation: 'heroGroupPage'}, + }, + { + path: 'enter-leave', + component: HeroListEnterLeavePageComponent, + data: {animation: 'enterLeavePage'}, + }, + { + path: 'auto', + component: HeroListAutoCalcPageComponent, + data: {animation: 'autoPage'}, + }, + { + path: 'insert-remove', + component: InsertRemoveComponent, + data: {animation: 'insertRemovePage'}, + }, + { + path: 'querying', + component: QueryingComponent, + data: {animation: 'queryingPage'}, + }, + { + path: 'home', + component: HomeComponent, + data: {animation: 'HomePage'}, + }, + { + path: 'about', + component: AboutComponent, + data: {animation: 'AboutPage'}, + }, ]; // #enddocregion route-animation-data diff --git a/adev/src/content/examples/animations/src/app/hero-list-auto-page.component.ts b/adev/src/content/examples/animations/src/app/hero-list-auto-page.component.ts index 8356f946bd5..9506f826cf0 100755 --- a/adev/src/content/examples/animations/src/app/hero-list-auto-page.component.ts +++ b/adev/src/content/examples/animations/src/app/hero-list-auto-page.component.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; -import { HEROES } from './mock-heroes'; -import { HeroListAutoComponent } from './hero-list-auto.component'; +import {Component} from '@angular/core'; +import {HEROES} from './mock-heroes'; +import {HeroListAutoComponent} from './hero-list-auto.component'; @Component({ standalone: true, @@ -12,12 +12,12 @@ import { HeroListAutoComponent } from './hero-list-auto.component'; `, - imports: [HeroListAutoComponent] + imports: [HeroListAutoComponent], }) export class HeroListAutoCalcPageComponent { heroes = HEROES.slice(); onRemove(id: number) { - this.heroes = this.heroes.filter(hero => hero.id !== id); + this.heroes = this.heroes.filter((hero) => hero.id !== id); } } diff --git a/adev/src/content/examples/animations/src/app/hero-list-auto.component.ts b/adev/src/content/examples/animations/src/app/hero-list-auto.component.ts index 4d891b04df0..28812a01c2b 100755 --- a/adev/src/content/examples/animations/src/app/hero-list-auto.component.ts +++ b/adev/src/content/examples/animations/src/app/hero-list-auto.component.ts @@ -1,19 +1,8 @@ -import { - Component, - Input, - Output, - EventEmitter -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; +import {Component, Input, Output, EventEmitter} from '@angular/core'; +import {trigger, state, style, animate, transition} from '@angular/animations'; -import { Hero } from './hero'; -import { NgFor } from '@angular/common'; +import {Hero} from './hero'; +import {NgFor} from '@angular/common'; @Component({ standalone: true, @@ -24,21 +13,18 @@ import { NgFor } from '@angular/common'; // #docregion auto-calc animations: [ trigger('shrinkOut', [ - state('in', style({ height: '*' })), - transition('* => void', [ - style({ height: '*' }), - animate(250, style({ height: 0 })) - ]) - ]) - ] + state('in', style({height: '*'})), + transition('* => void', [style({height: '*'}), animate(250, style({height: 0}))]), + ]), + ], // #enddocregion auto-calc }) export class HeroListAutoComponent { - @Input() heroes: Hero[] = []; + @Input() heroes: Hero[] = []; - @Output() remove = new EventEmitter(); + @Output() remove = new EventEmitter(); - removeHero(id: number) { - this.remove.emit(id); - } + removeHero(id: number) { + this.remove.emit(id); + } } diff --git a/adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.component.ts b/adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.component.ts index d615f906be2..6a3d4d349ef 100755 --- a/adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.component.ts +++ b/adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.component.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; -import { HEROES } from './mock-heroes'; -import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component'; +import {Component} from '@angular/core'; +import {HEROES} from './mock-heroes'; +import {HeroListEnterLeaveComponent} from './hero-list-enter-leave.component'; @Component({ standalone: true, @@ -12,12 +12,12 @@ import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component'; `, - imports: [HeroListEnterLeaveComponent] + imports: [HeroListEnterLeaveComponent], }) export class HeroListEnterLeavePageComponent { heroes = HEROES.slice(); onRemove(id: number) { - this.heroes = this.heroes.filter(hero => hero.id !== id); + this.heroes = this.heroes.filter((hero) => hero.id !== id); } } diff --git a/adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts index fc21a0c2c7a..8609c0eec8d 100755 --- a/adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts +++ b/adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts @@ -1,19 +1,8 @@ -import { - Component, - Input, - Output, - EventEmitter -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; +import {Component, Input, Output, EventEmitter} from '@angular/core'; +import {trigger, state, style, animate, transition} from '@angular/animations'; -import { Hero } from './hero'; -import { NgFor } from '@angular/common'; +import {Hero} from './hero'; +import {NgFor} from '@angular/common'; @Component({ standalone: true, @@ -35,16 +24,11 @@ import { NgFor } from '@angular/common'; // #docregion animationdef animations: [ trigger('flyInOut', [ - state('in', style({ transform: 'translateX(0)' })), - transition('void => *', [ - style({ transform: 'translateX(-100%)' }), - animate(100) - ]), - transition('* => void', [ - animate(100, style({ transform: 'translateX(100%)' })) - ]) - ]) - ] + state('in', style({transform: 'translateX(0)'})), + transition('void => *', [style({transform: 'translateX(-100%)'}), animate(100)]), + transition('* => void', [animate(100, style({transform: 'translateX(100%)'}))]), + ]), + ], // #enddocregion animationdef }) export class HeroListEnterLeaveComponent { diff --git a/adev/src/content/examples/animations/src/app/hero-list-group-page.component.ts b/adev/src/content/examples/animations/src/app/hero-list-group-page.component.ts index 083f7a40156..a705c46d7c6 100755 --- a/adev/src/content/examples/animations/src/app/hero-list-group-page.component.ts +++ b/adev/src/content/examples/animations/src/app/hero-list-group-page.component.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; -import { HEROES } from './mock-heroes'; -import { HeroListGroupsComponent } from './hero-list-groups.component'; +import {Component} from '@angular/core'; +import {HEROES} from './mock-heroes'; +import {HeroListGroupsComponent} from './hero-list-groups.component'; @Component({ standalone: true, @@ -12,12 +12,12 @@ import { HeroListGroupsComponent } from './hero-list-groups.component'; `, - imports: [HeroListGroupsComponent] + imports: [HeroListGroupsComponent], }) export class HeroListGroupPageComponent { heroes = HEROES.slice(); onRemove(id: number) { - this.heroes = this.heroes.filter(hero => hero.id !== id); + this.heroes = this.heroes.filter((hero) => hero.id !== id); } } diff --git a/adev/src/content/examples/animations/src/app/hero-list-groups.component.ts b/adev/src/content/examples/animations/src/app/hero-list-groups.component.ts index 0da8a480b55..162243087d0 100755 --- a/adev/src/content/examples/animations/src/app/hero-list-groups.component.ts +++ b/adev/src/content/examples/animations/src/app/hero-list-groups.component.ts @@ -1,20 +1,8 @@ -import { - Component, - Input, - Output, - EventEmitter -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition, - group -} from '@angular/animations'; +import {Component, Input, Output, EventEmitter} from '@angular/core'; +import {trigger, state, style, animate, transition, group} from '@angular/animations'; -import { Hero } from './hero'; -import { NgFor } from '@angular/common'; +import {Hero} from './hero'; +import {NgFor} from '@angular/common'; @Component({ standalone: true, @@ -36,43 +24,59 @@ import { NgFor } from '@angular/common'; // #docregion animationdef animations: [ trigger('flyInOut', [ - state('in', style({ - width: '*', - transform: 'translateX(0)', opacity: 1 - })), + state( + 'in', + style({ + width: '*', + transform: 'translateX(0)', + opacity: 1, + }), + ), transition(':enter', [ - style({ width: 10, transform: 'translateX(50px)', opacity: 0 }), + style({width: 10, transform: 'translateX(50px)', opacity: 0}), group([ - animate('0.3s 0.1s ease', style({ - transform: 'translateX(0)', - width: '*' - })), - animate('0.3s ease', style({ - opacity: 1 - })) - ]) + animate( + '0.3s 0.1s ease', + style({ + transform: 'translateX(0)', + width: '*', + }), + ), + animate( + '0.3s ease', + style({ + opacity: 1, + }), + ), + ]), ]), transition(':leave', [ group([ - animate('0.3s ease', style({ - transform: 'translateX(50px)', - width: 10 - })), - animate('0.3s 0.2s ease', style({ - opacity: 0 - })) - ]) - ]) - ]) - ] + animate( + '0.3s ease', + style({ + transform: 'translateX(50px)', + width: 10, + }), + ), + animate( + '0.3s 0.2s ease', + style({ + opacity: 0, + }), + ), + ]), + ]), + ]), + ], // #enddocregion animationdef }) export class HeroListGroupsComponent { - @Input() heroes: Hero[] = []; + @Input() heroes: Hero[] = []; - @Output() remove = new EventEmitter(); + @Output() remove = new EventEmitter(); - removeHero(id: number) { - this.remove.emit(id); - } + removeHero(id: number) { + this.remove.emit(id); + } } diff --git a/adev/src/content/examples/animations/src/app/hero-list-page.component.ts b/adev/src/content/examples/animations/src/app/hero-list-page.component.ts index cc490ec0fcf..efe45b704ae 100755 --- a/adev/src/content/examples/animations/src/app/hero-list-page.component.ts +++ b/adev/src/content/examples/animations/src/app/hero-list-page.component.ts @@ -1,66 +1,65 @@ // #docplaster // #docregion -import { Component, HostBinding, OnInit } from '@angular/core'; -import { trigger, transition, animate, style, query, stagger } from '@angular/animations'; -import { HEROES } from './mock-heroes'; -import { Hero } from './hero'; -import { NgFor } from '@angular/common'; +import {Component, HostBinding, OnInit} from '@angular/core'; +import {trigger, transition, animate, style, query, stagger} from '@angular/animations'; +import {HEROES} from './mock-heroes'; +import {Hero} from './hero'; +import {NgFor} from '@angular/common'; // #docregion filter-animations @Component({ -// #enddocregion filter-animations + // #enddocregion filter-animations standalone: true, imports: [NgFor], selector: 'app-hero-list-page', templateUrl: 'hero-list-page.component.html', styleUrls: ['hero-list-page.component.css'], -// #docregion page-animations, filter-animations + // #docregion page-animations, filter-animations animations: [ -// #enddocregion filter-animations + // #enddocregion filter-animations trigger('pageAnimations', [ transition(':enter', [ query('.hero', [ style({opacity: 0, transform: 'translateY(-100px)'}), stagger(30, [ - animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', - style({ opacity: 1, transform: 'none' })) - ]) - ]) - ]) + animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({opacity: 1, transform: 'none'})), + ]), + ]), + ]), ]), -// #enddocregion page-animations -// #docregion increment -// #docregion filter-animations + // #enddocregion page-animations + // #docregion increment + // #docregion filter-animations trigger('filterAnimation', [ transition(':enter, * => 0, * => -1', []), transition(':increment', [ - query(':enter', [ - style({ opacity: 0, width: 0 }), - stagger(50, [ - animate('300ms ease-out', style({ opacity: 1, width: '*' })), - ]), - ], { optional: true }) + query( + ':enter', + [ + style({opacity: 0, width: 0}), + stagger(50, [animate('300ms ease-out', style({opacity: 1, width: '*'}))]), + ], + {optional: true}, + ), ]), transition(':decrement', [ - query(':leave', [ - stagger(50, [ - animate('300ms ease-out', style({ opacity: 0, width: 0 })), - ]), - ]) + query(':leave', [stagger(50, [animate('300ms ease-out', style({opacity: 0, width: 0}))])]), ]), ]), - // #enddocregion increment - ] + // #enddocregion increment + ], }) export class HeroListPageComponent implements OnInit { -// #enddocregion filter-animations + // #enddocregion filter-animations @HostBinding('@pageAnimations') public animatePage = true; -// #docregion filter-animations + // #docregion filter-animations heroesTotal = -1; - get heroes() { return this._heroes; } + get heroes() { + return this._heroes; + } private _heroes: Hero[] = []; ngOnInit() { @@ -70,7 +69,9 @@ export class HeroListPageComponent implements OnInit { updateCriteria(criteria: string) { criteria = criteria ? criteria.trim() : ''; - this._heroes = HEROES.filter(hero => hero.name.toLowerCase().includes(criteria.toLowerCase())); + this._heroes = HEROES.filter((hero) => + hero.name.toLowerCase().includes(criteria.toLowerCase()), + ); const newTotal = this.heroes.length; if (this.heroesTotal !== newTotal) { diff --git a/adev/src/content/examples/animations/src/app/home.component.ts b/adev/src/content/examples/animations/src/app/home.component.ts index 81acda4cdd2..2c51056ea2d 100755 --- a/adev/src/content/examples/animations/src/app/home.component.ts +++ b/adev/src/content/examples/animations/src/app/home.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ standalone: true, selector: 'app-home', templateUrl: './home.component.html', - styleUrls: ['./home.component.css'] + styleUrls: ['./home.component.css'], }) export class HomeComponent {} diff --git a/adev/src/content/examples/animations/src/app/insert-remove.component.ts b/adev/src/content/examples/animations/src/app/insert-remove.component.ts index 760c81748b3..9b7fa5c9054 100755 --- a/adev/src/content/examples/animations/src/app/insert-remove.component.ts +++ b/adev/src/content/examples/animations/src/app/insert-remove.component.ts @@ -1,27 +1,22 @@ // #docplaster -import { Component } from '@angular/core'; -import { trigger, transition, animate, style } from '@angular/animations'; -import { NgIf } from '@angular/common'; +import {Component} from '@angular/core'; +import {trigger, transition, animate, style} from '@angular/animations'; +import {NgIf} from '@angular/common'; @Component({ standalone: true, selector: 'app-insert-remove', imports: [NgIf], animations: [ -// #docregion enter-leave-trigger + // #docregion enter-leave-trigger trigger('myInsertRemoveTrigger', [ - transition(':enter', [ - style({ opacity: 0 }), - animate('100ms', style({ opacity: 1 })), - ]), - transition(':leave', [ - animate('100ms', style({ opacity: 0 })) - ]) + transition(':enter', [style({opacity: 0}), animate('100ms', style({opacity: 1}))]), + transition(':leave', [animate('100ms', style({opacity: 0}))]), ]), -// #enddocregion enter-leave-trigger + // #enddocregion enter-leave-trigger ], templateUrl: 'insert-remove.component.html', - styleUrls: ['insert-remove.component.css'] + styleUrls: ['insert-remove.component.css'], }) export class InsertRemoveComponent { isShown = false; diff --git a/adev/src/content/examples/animations/src/app/mock-heroes.ts b/adev/src/content/examples/animations/src/app/mock-heroes.ts index 6ffcaa980e8..b7c4f922d91 100644 --- a/adev/src/content/examples/animations/src/app/mock-heroes.ts +++ b/adev/src/content/examples/animations/src/app/mock-heroes.ts @@ -1,14 +1,14 @@ // #docregion -import { Hero } from './hero'; +import {Hero} from './hero'; export const HEROES: Hero[] = [ - { id: 12, name: 'Dr. Nice' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr. IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } + {id: 12, name: 'Dr. Nice'}, + {id: 13, name: 'Bombasto'}, + {id: 14, name: 'Celeritas'}, + {id: 15, name: 'Magneta'}, + {id: 16, name: 'RubberMan'}, + {id: 17, name: 'Dynama'}, + {id: 18, name: 'Dr. IQ'}, + {id: 19, name: 'Magma'}, + {id: 20, name: 'Tornado'}, ]; diff --git a/adev/src/content/examples/animations/src/app/open-close-page.component.ts b/adev/src/content/examples/animations/src/app/open-close-page.component.ts index d9b23597055..d3e4224715b 100755 --- a/adev/src/content/examples/animations/src/app/open-close-page.component.ts +++ b/adev/src/content/examples/animations/src/app/open-close-page.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { OpenCloseComponent } from './open-close.component'; +import {Component} from '@angular/core'; +import {OpenCloseComponent} from './open-close.component'; @Component({ standalone: true, @@ -13,7 +13,7 @@ import { OpenCloseComponent } from './open-close.component'; `, - imports: [OpenCloseComponent] + imports: [OpenCloseComponent], }) export class OpenClosePageComponent { logging = false; diff --git a/adev/src/content/examples/animations/src/app/open-close.component.1.ts b/adev/src/content/examples/animations/src/app/open-close.component.1.ts index fed91df817c..6543329a8c4 100644 --- a/adev/src/content/examples/animations/src/app/open-close.component.1.ts +++ b/adev/src/content/examples/animations/src/app/open-close.component.1.ts @@ -1,36 +1,53 @@ -import { Component, Input } from '@angular/core'; -import { trigger, transition, state, animate, style, keyframes, AnimationEvent } from '@angular/animations'; +import {Component, Input} from '@angular/core'; +import { + trigger, + transition, + state, + animate, + style, + keyframes, + AnimationEvent, +} from '@angular/animations'; @Component({ standalone: true, selector: 'app-open-close', animations: [ -// #docregion trigger + // #docregion trigger trigger('openClose', [ - state('open', style({ - height: '200px', - opacity: 1, - backgroundColor: 'yellow' - })), - state('close', style({ - height: '100px', - opacity: 0.5, - backgroundColor: 'green' - })), + state( + 'open', + style({ + height: '200px', + opacity: 1, + backgroundColor: 'yellow', + }), + ), + state( + 'close', + style({ + height: '100px', + opacity: 0.5, + backgroundColor: 'green', + }), + ), // ... transition('* => *', [ - animate('1s', keyframes ( [ - style({ opacity: 0.1, offset: 0.1 }), - style({ opacity: 0.6, offset: 0.2 }), - style({ opacity: 1, offset: 0.5 }), - style({ opacity: 0.2, offset: 0.7 }) - ])) - ]) - ]) -// #enddocregion trigger + animate( + '1s', + keyframes([ + style({opacity: 0.1, offset: 0.1}), + style({opacity: 0.6, offset: 0.2}), + style({opacity: 1, offset: 0.5}), + style({opacity: 0.2, offset: 0.7}), + ]), + ), + ]), + ]), + // #enddocregion trigger ], templateUrl: 'open-close.component.html', - styleUrls: ['open-close.component.css'] + styleUrls: ['open-close.component.css'], }) export class OpenCloseKeyframeComponent { isOpen = false; diff --git a/adev/src/content/examples/animations/src/app/open-close.component.2.ts b/adev/src/content/examples/animations/src/app/open-close.component.2.ts index 65fbf72f5c8..db79d2226ea 100644 --- a/adev/src/content/examples/animations/src/app/open-close.component.2.ts +++ b/adev/src/content/examples/animations/src/app/open-close.component.2.ts @@ -1,20 +1,20 @@ -import { Component } from '@angular/core'; -import { trigger, transition, state, animate, style } from '@angular/animations'; +import {Component} from '@angular/core'; +import {trigger, transition, state, animate, style} from '@angular/animations'; @Component({ standalone: true, selector: 'app-open-close-boolean', -// #docregion trigger-boolean + // #docregion trigger-boolean animations: [ trigger('openClose', [ - state('true', style({ height: '*' })), - state('false', style({ height: '0px' })), - transition('false <=> true', animate(500)) - ]) + state('true', style({height: '*'})), + state('false', style({height: '0px'})), + transition('false <=> true', animate(500)), + ]), ], -// #enddocregion trigger-boolean + // #enddocregion trigger-boolean templateUrl: 'open-close.component.2.html', - styleUrls: ['open-close.component.css'] + styleUrls: ['open-close.component.css'], }) export class OpenCloseBooleanComponent { isOpen = false; diff --git a/adev/src/content/examples/animations/src/app/open-close.component.3.ts b/adev/src/content/examples/animations/src/app/open-close.component.3.ts index b1d500858cd..5f1bbffd8e4 100755 --- a/adev/src/content/examples/animations/src/app/open-close.component.3.ts +++ b/adev/src/content/examples/animations/src/app/open-close.component.3.ts @@ -1,8 +1,8 @@ // #docplaster // #docregion reusable -import { Component, Input } from '@angular/core'; -import { transition, trigger, useAnimation, AnimationEvent } from '@angular/animations'; -import { transitionAnimation } from './animations'; +import {Component, Input} from '@angular/core'; +import {transition, trigger, useAnimation, AnimationEvent} from '@angular/animations'; +import {transitionAnimation} from './animations'; @Component({ standalone: true, @@ -15,14 +15,14 @@ import { transitionAnimation } from './animations'; height: 0, opacity: 1, backgroundColor: 'red', - time: '1s' - } - }) - ]) - ]) + time: '1s', + }, + }), + ]), + ]), ], templateUrl: 'open-close.component.html', - styleUrls: ['open-close.component.css'] + styleUrls: ['open-close.component.css'], }) // #enddocregion reusable export class OpenCloseBooleanComponent { @@ -38,4 +38,4 @@ export class OpenCloseBooleanComponent { return; } } -} \ No newline at end of file +} diff --git a/adev/src/content/examples/animations/src/app/open-close.component.4.ts b/adev/src/content/examples/animations/src/app/open-close.component.4.ts index 854412ea317..39b4ad15d05 100755 --- a/adev/src/content/examples/animations/src/app/open-close.component.4.ts +++ b/adev/src/content/examples/animations/src/app/open-close.component.4.ts @@ -1,11 +1,11 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; -import { trigger, transition, state, animate, style } from '@angular/animations'; +import {Component} from '@angular/core'; +import {trigger, transition, state, animate, style} from '@angular/animations'; // #docregion toggle-animation @Component({ -// #enddocregion toggle-animation + // #enddocregion toggle-animation standalone: true, selector: 'app-open-close-toggle', templateUrl: 'open-close.component.4.html', @@ -14,28 +14,32 @@ import { trigger, transition, state, animate, style } from '@angular/animations' animations: [ trigger('childAnimation', [ // ... -// #enddocregion toggle-animation - state('open', style({ - width: '250px', - opacity: 1, - backgroundColor: 'yellow' - })), - state('closed', style({ - width: '100px', - opacity: 0.8, - backgroundColor: 'blue' - })), - transition('* => *', [ - animate('1s') - ]), -// #docregion toggle-animation + // #enddocregion toggle-animation + state( + 'open', + style({ + width: '250px', + opacity: 1, + backgroundColor: 'yellow', + }), + ), + state( + 'closed', + style({ + width: '100px', + opacity: 0.8, + backgroundColor: 'blue', + }), + ), + transition('* => *', [animate('1s')]), + // #docregion toggle-animation ]), ], }) export class OpenCloseChildComponent { isDisabled = false; isOpen = false; -// #enddocregion toggle-animation + // #enddocregion toggle-animation toggleAnimations() { this.isDisabled = !this.isDisabled; } @@ -43,6 +47,6 @@ export class OpenCloseChildComponent { toggle() { this.isOpen = !this.isOpen; } -// #docregion toggle-animation + // #docregion toggle-animation } // #enddocregion toggle-animation diff --git a/adev/src/content/examples/animations/src/app/open-close.component.ts b/adev/src/content/examples/animations/src/app/open-close.component.ts index 5d6032f089c..18d1d15ff4e 100755 --- a/adev/src/content/examples/animations/src/app/open-close.component.ts +++ b/adev/src/content/examples/animations/src/app/open-close.component.ts @@ -1,90 +1,80 @@ // #docplaster -import { Component, Input } from '@angular/core'; -import { trigger, transition, state, animate, style, AnimationEvent } from '@angular/animations'; +import {Component, Input} from '@angular/core'; +import {trigger, transition, state, animate, style, AnimationEvent} from '@angular/animations'; // #docregion component, events1 @Component({ standalone: true, selector: 'app-open-close', -// #docregion trigger-wildcard1, trigger-transition + // #docregion trigger-wildcard1, trigger-transition animations: [ trigger('openClose', [ -// #docregion state1 + // #docregion state1 // ... -// #enddocregion events1 - state('open', style({ - height: '200px', - opacity: 1, - backgroundColor: 'yellow' - })), -// #enddocregion state1 -// #docregion state2 - state('closed', style({ - height: '100px', - opacity: 0.8, - backgroundColor: 'blue' - })), -// #enddocregion state2, trigger-wildcard1 -// #docregion transition1 - transition('open => closed', [ - animate('1s') - ]), -// #enddocregion transition1 -// #docregion transition2 - transition('closed => open', [ - animate('0.5s') - ]), -// #enddocregion transition2, component -// #docregion trigger-wildcard1 - transition('* => closed', [ - animate('1s') - ]), - transition('* => open', [ - animate('0.5s') - ]), -// #enddocregion trigger-wildcard1 -// #docregion trigger-wildcard2 - transition('open <=> closed', [ - animate('0.5s') - ]), -// #enddocregion trigger-wildcard2 -// #docregion transition4 - transition ('* => open', [ - animate ('1s', - style ({ opacity: '*' }), - ), - ]), -// #enddocregion transition4 - transition('* => *', [ - animate('1s') - ]), -// #enddocregion trigger-transition -// #docregion component, trigger-wildcard1, events1 + // #enddocregion events1 + state( + 'open', + style({ + height: '200px', + opacity: 1, + backgroundColor: 'yellow', + }), + ), + // #enddocregion state1 + // #docregion state2 + state( + 'closed', + style({ + height: '100px', + opacity: 0.8, + backgroundColor: 'blue', + }), + ), + // #enddocregion state2, trigger-wildcard1 + // #docregion transition1 + transition('open => closed', [animate('1s')]), + // #enddocregion transition1 + // #docregion transition2 + transition('closed => open', [animate('0.5s')]), + // #enddocregion transition2, component + // #docregion trigger-wildcard1 + transition('* => closed', [animate('1s')]), + transition('* => open', [animate('0.5s')]), + // #enddocregion trigger-wildcard1 + // #docregion trigger-wildcard2 + transition('open <=> closed', [animate('0.5s')]), + // #enddocregion trigger-wildcard2 + // #docregion transition4 + transition('* => open', [animate('1s', style({opacity: '*'}))]), + // #enddocregion transition4 + transition('* => *', [animate('1s')]), + // #enddocregion trigger-transition + // #docregion component, trigger-wildcard1, events1 ]), ], -// #enddocregion trigger-wildcard1 + // #enddocregion trigger-wildcard1 templateUrl: 'open-close.component.html', - styleUrls: ['open-close.component.css'] + styleUrls: ['open-close.component.css'], }) // #docregion events export class OpenCloseComponent { -// #enddocregion events1, events, component + // #enddocregion events1, events, component @Input() logging = false; -// #docregion component + // #docregion component isOpen = true; toggle() { this.isOpen = !this.isOpen; } -// #enddocregion component -// #docregion events1, events + // #enddocregion component + // #docregion events1, events onAnimationEvent(event: AnimationEvent) { -// #enddocregion events1, events + // #enddocregion events1, events if (!this.logging) { return; } -// #docregion events + // #docregion events // openClose is trigger name in this example console.warn(`Animation Trigger: ${event.triggerName}`); @@ -102,8 +92,8 @@ export class OpenCloseComponent { // the HTML element itself, the button in this case console.warn(`Element: ${event.element}`); -// #docregion events1 + // #docregion events1 } -// #docregion component + // #docregion component } // #enddocregion component diff --git a/adev/src/content/examples/animations/src/app/querying.component.ts b/adev/src/content/examples/animations/src/app/querying.component.ts index 715bb31da8a..b000dfa20a7 100755 --- a/adev/src/content/examples/animations/src/app/querying.component.ts +++ b/adev/src/content/examples/animations/src/app/querying.component.ts @@ -1,6 +1,4 @@ -import { - Component, -} from '@angular/core'; +import {Component} from '@angular/core'; import { trigger, style, @@ -9,11 +7,11 @@ import { group, query, animateChild, - keyframes + keyframes, } from '@angular/animations'; -import { HEROES } from './mock-heroes'; -import { NgIf } from '@angular/common'; +import {HEROES} from './mock-heroes'; +import {NgIf} from '@angular/common'; @Component({ standalone: true, @@ -41,44 +39,50 @@ import { NgIf } from '@angular/common'; animations: [ trigger('query', [ transition(':enter', [ - style({ height: 0 }), + style({height: 0}), group([ - animate(500, style({ height: '*' })), + animate(500, style({height: '*'})), query(':enter', [ - style({ opacity: 0, transform: 'scale(0)'}), - animate(2000, style({ opacity: 1, transform: 'scale(1)' })) + style({opacity: 0, transform: 'scale(0)'}), + animate(2000, style({opacity: 1, transform: 'scale(1)'})), ]), query('.hero', [ - style({ transform: 'translateX(-100%)'}), - animate('.7s 500ms ease-in', style({ transform: 'translateX(0)' })) + style({transform: 'translateX(-100%)'}), + animate('.7s 500ms ease-in', style({transform: 'translateX(0)'})), ]), ]), query('@animateMe', animateChild()), ]), transition(':leave', [ - style({ height: '*' }), + style({height: '*'}), query('@animateMe', animateChild()), group([ - animate('500ms 500ms', style({ height: '0', padding: '0' })), + animate('500ms 500ms', style({height: '0', padding: '0'})), query(':leave', [ - style({ opacity: 1, transform: 'scale(1)'}), - animate('1s', style({ opacity: 0, transform: 'scale(0)' })) + style({opacity: 1, transform: 'scale(1)'}), + animate('1s', style({opacity: 0, transform: 'scale(0)'})), ]), query('.hero', [ - style({ transform: 'translateX(0)'}), - animate('.7s ease-out', style({ transform: 'translateX(-100%)' })) + style({transform: 'translateX(0)'}), + animate('.7s ease-out', style({transform: 'translateX(-100%)'})), ]), ]), ]), ]), trigger('animateMe', [ - transition('* <=> *', animate('500ms cubic-bezier(.68,-0.73,.26,1.65)', keyframes([ - style({ backgroundColor: 'transparent', color: '*', offset: 0 }), - style({ backgroundColor: 'blue', color: 'white', offset: 0.2 }), - style({ backgroundColor: 'transparent', color: '*', offset: 1 }) - ]))) + transition( + '* <=> *', + animate( + '500ms cubic-bezier(.68,-0.73,.26,1.65)', + keyframes([ + style({backgroundColor: 'transparent', color: '*', offset: 0}), + style({backgroundColor: 'blue', color: 'white', offset: 0.2}), + style({backgroundColor: 'transparent', color: '*', offset: 1}), + ]), + ), + ), ]), - ] + ], }) export class QueryingComponent { toggleDisabled = false; diff --git a/adev/src/content/examples/animations/src/app/status-slider-page.component.ts b/adev/src/content/examples/animations/src/app/status-slider-page.component.ts index 4ea4a044f93..743fe573338 100755 --- a/adev/src/content/examples/animations/src/app/status-slider-page.component.ts +++ b/adev/src/content/examples/animations/src/app/status-slider-page.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { StatusSliderComponent } from './status-slider.component'; +import {Component} from '@angular/core'; +import {StatusSliderComponent} from './status-slider.component'; @Component({ standalone: true, @@ -10,6 +10,6 @@ import { StatusSliderComponent } from './status-slider.component'; `, - imports: [StatusSliderComponent] + imports: [StatusSliderComponent], }) export class StatusSliderPageComponent {} diff --git a/adev/src/content/examples/animations/src/app/status-slider.component.ts b/adev/src/content/examples/animations/src/app/status-slider.component.ts index 600f88d81b3..7383f19b5f5 100755 --- a/adev/src/content/examples/animations/src/app/status-slider.component.ts +++ b/adev/src/content/examples/animations/src/app/status-slider.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { trigger, transition, state, animate, style, keyframes } from '@angular/animations'; +import {Component} from '@angular/core'; +import {trigger, transition, state, animate, style, keyframes} from '@angular/animations'; @Component({ standalone: true, @@ -8,37 +8,46 @@ import { trigger, transition, state, animate, style, keyframes } from '@angular/ styleUrls: ['status-slider.component.css'], animations: [ trigger('slideStatus', [ - state('inactive', style({ backgroundColor: 'blue' })), - state('active', style({ backgroundColor: '#754600' })), + state('inactive', style({backgroundColor: 'blue'})), + state('active', style({backgroundColor: '#754600'})), -// #docregion keyframesWithOffsets + // #docregion keyframesWithOffsets transition('* => active', [ - animate('2s', keyframes([ - style({ backgroundColor: 'blue', offset: 0}), - style({ backgroundColor: 'red', offset: 0.8}), - style({ backgroundColor: '#754600', offset: 1.0}) - ])), + animate( + '2s', + keyframes([ + style({backgroundColor: 'blue', offset: 0}), + style({backgroundColor: 'red', offset: 0.8}), + style({backgroundColor: '#754600', offset: 1.0}), + ]), + ), ]), transition('* => inactive', [ - animate('2s', keyframes([ - style({ backgroundColor: '#754600', offset: 0}), - style({ backgroundColor: 'red', offset: 0.2}), - style({ backgroundColor: 'blue', offset: 1.0}) - ])) + animate( + '2s', + keyframes([ + style({backgroundColor: '#754600', offset: 0}), + style({backgroundColor: 'red', offset: 0.2}), + style({backgroundColor: 'blue', offset: 1.0}), + ]), + ), ]), -// #enddocregion keyframesWithOffsets + // #enddocregion keyframesWithOffsets -// #docregion keyframes + // #docregion keyframes transition('* => active', [ - animate('2s', keyframes([ - style({ backgroundColor: 'blue' }), - style({ backgroundColor: 'red' }), - style({ backgroundColor: 'orange' }) - ])) -// #enddocregion keyframes + animate( + '2s', + keyframes([ + style({backgroundColor: 'blue'}), + style({backgroundColor: 'red'}), + style({backgroundColor: 'orange'}), + ]), + ), + // #enddocregion keyframes ]), - ]) - ] + ]), + ], }) export class StatusSliderComponent { status: 'active' | 'inactive' = 'inactive'; diff --git a/adev/src/content/examples/animations/src/app/toggle-animations-page.component.ts b/adev/src/content/examples/animations/src/app/toggle-animations-page.component.ts index 906799949bf..7b2412caea3 100755 --- a/adev/src/content/examples/animations/src/app/toggle-animations-page.component.ts +++ b/adev/src/content/examples/animations/src/app/toggle-animations-page.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { OpenCloseChildComponent } from './open-close.component.4'; +import {Component} from '@angular/core'; +import {OpenCloseChildComponent} from './open-close.component.4'; @Component({ standalone: true, @@ -11,6 +11,6 @@ import { OpenCloseChildComponent } from './open-close.component.4'; `, - imports: [OpenCloseChildComponent] + imports: [OpenCloseChildComponent], }) export class ToggleAnimationsPageComponent {} diff --git a/adev/src/content/examples/animations/src/main.ts b/adev/src/content/examples/animations/src/main.ts index 41893baf92f..a48343eb518 100755 --- a/adev/src/content/examples/animations/src/main.ts +++ b/adev/src/content/examples/animations/src/main.ts @@ -1,5 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; -import { appConfig } from './app/app.config'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; bootstrapApplication(AppComponent, appConfig); diff --git a/adev/src/content/examples/architecture/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/architecture/e2e/src/app.e2e-spec.ts index 87fc395773b..51fd90c5838 100644 --- a/adev/src/content/examples/architecture/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/architecture/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { protractor, browser, element, by, ElementFinder } from 'protractor'; +import {protractor, browser, element, by, ElementFinder} from 'protractor'; const nameSuffix = 'X'; @@ -8,7 +8,6 @@ interface Hero { } describe('Architecture', () => { - const expectedTitle = 'Architecture of Angular'; const expectedH2 = ['Hero List', 'Sales Tax Calculator']; @@ -28,8 +27,7 @@ describe('Architecture', () => { }); function heroTests() { - - const targetHero: Hero = { id: 2, name: 'Dr Nice' }; + const targetHero: Hero = {id: 2, name: 'Dr Nice'}; it('has the right number of heroes', async () => { const page = getPageElts(); @@ -80,7 +78,7 @@ function getPageElts() { heroes: element.all(by.css('app-root li')), heroDetail: element(by.css('app-root app-hero-detail')), salesTaxAmountInput: element(by.css('app-root app-sales-tax input')), - salesTaxDetail: element(by.css('app-root app-sales-tax div')) + salesTaxDetail: element(by.css('app-root app-sales-tax div')), }; } diff --git a/adev/src/content/examples/architecture/src/app/app.component.ts b/adev/src/content/examples/architecture/src/app/app.component.ts index c3b3518c2b9..46d9a4d2446 100644 --- a/adev/src/content/examples/architecture/src/app/app.component.ts +++ b/adev/src/content/examples/architecture/src/app/app.component.ts @@ -1,5 +1,5 @@ // #docregion import -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #enddocregion import @Component({ @@ -8,6 +8,6 @@ import { Component } from '@angular/core';

Architecture Example

- ` + `, }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/architecture/src/app/app.module.ts b/adev/src/content/examples/architecture/src/app/app.module.ts index 2090120042d..17e6448c8b0 100644 --- a/adev/src/content/examples/architecture/src/app/app.module.ts +++ b/adev/src/content/examples/architecture/src/app/app.module.ts @@ -1,34 +1,22 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; // #docregion imports -import { NgModule } from '@angular/core'; -import { AppComponent } from './app.component'; +import {NgModule} from '@angular/core'; +import {AppComponent} from './app.component'; // #enddocregion imports -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroListComponent } from './hero-list.component'; -import { SalesTaxComponent } from './sales-tax.component'; -import { HeroService } from './hero.service'; -import { BackendService } from './backend.service'; -import { Logger } from './logger.service'; +import {HeroDetailComponent} from './hero-detail.component'; +import {HeroListComponent} from './hero-list.component'; +import {SalesTaxComponent} from './sales-tax.component'; +import {HeroService} from './hero.service'; +import {BackendService} from './backend.service'; +import {Logger} from './logger.service'; @NgModule({ - imports: [ - BrowserModule, - FormsModule - ], - declarations: [ - AppComponent, - HeroDetailComponent, - HeroListComponent, - SalesTaxComponent - ], - providers: [ - BackendService, - HeroService, - Logger - ], - bootstrap: [ AppComponent ] + imports: [BrowserModule, FormsModule], + declarations: [AppComponent, HeroDetailComponent, HeroListComponent, SalesTaxComponent], + providers: [BackendService, HeroService, Logger], + bootstrap: [AppComponent], }) // #docregion export -export class AppModule { } +export class AppModule {} // #enddocregion export diff --git a/adev/src/content/examples/architecture/src/app/backend.service.ts b/adev/src/content/examples/architecture/src/app/backend.service.ts index 3385f9e4fc7..e5af1473cbc 100644 --- a/adev/src/content/examples/architecture/src/app/backend.service.ts +++ b/adev/src/content/examples/architecture/src/app/backend.service.ts @@ -1,13 +1,13 @@ -import { Injectable, Type } from '@angular/core'; +import {Injectable, Type} from '@angular/core'; -import { Logger } from './logger.service'; -import { Hero } from './hero'; +import {Logger} from './logger.service'; +import {Hero} from './hero'; const HEROES = [ - new Hero('Windstorm', 'Weather mastery'), - new Hero('Dr Nice', 'Killing them with kindness'), - new Hero('Magneta', 'Manipulates metallic objects') - ]; + new Hero('Windstorm', 'Weather mastery'), + new Hero('Dr Nice', 'Killing them with kindness'), + new Hero('Magneta', 'Manipulates metallic objects'), +]; @Injectable() export class BackendService { diff --git a/adev/src/content/examples/architecture/src/app/hero-detail.component.ts b/adev/src/content/examples/architecture/src/app/hero-detail.component.ts index 2a5484a08ed..b749c94ebf3 100644 --- a/adev/src/content/examples/architecture/src/app/hero-detail.component.ts +++ b/adev/src/content/examples/architecture/src/app/hero-detail.component.ts @@ -1,10 +1,10 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html' + templateUrl: './hero-detail.component.html', }) export class HeroDetailComponent { @Input() hero!: Hero; diff --git a/adev/src/content/examples/architecture/src/app/hero-list.component.ts b/adev/src/content/examples/architecture/src/app/hero-list.component.ts index 6f779a483bd..bc377709aa3 100644 --- a/adev/src/content/examples/architecture/src/app/hero-list.component.ts +++ b/adev/src/content/examples/architecture/src/app/hero-list.component.ts @@ -1,13 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; +import {Hero} from './hero'; +import {HeroService} from './hero.service'; // #docregion metadata, providers @Component({ - selector: 'app-hero-list', + selector: 'app-hero-list', templateUrl: './hero-list.component.html', - providers: [ HeroService ] + providers: [HeroService], }) // #enddocregion providers // #docregion class @@ -17,13 +17,15 @@ export class HeroListComponent implements OnInit { selectedHero: Hero | undefined; // #docregion ctor - constructor(private service: HeroService) { } + constructor(private service: HeroService) {} // #enddocregion ctor ngOnInit() { this.heroes = this.service.getHeroes(); } - selectHero(hero: Hero) { this.selectedHero = hero; } + selectHero(hero: Hero) { + this.selectedHero = hero; + } // #docregion metadata } diff --git a/adev/src/content/examples/architecture/src/app/hero.service.ts b/adev/src/content/examples/architecture/src/app/hero.service.ts index 493f064e408..68708190f26 100644 --- a/adev/src/content/examples/architecture/src/app/hero.service.ts +++ b/adev/src/content/examples/architecture/src/app/hero.service.ts @@ -1,8 +1,8 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { Hero } from './hero'; -import { BackendService } from './backend.service'; -import { Logger } from './logger.service'; +import {Hero} from './hero'; +import {BackendService} from './backend.service'; +import {Logger} from './logger.service'; @Injectable() // #docregion class @@ -11,10 +11,11 @@ export class HeroService { constructor( private backend: BackendService, - private logger: Logger) { } + private logger: Logger, + ) {} getHeroes() { - this.backend.getAll(Hero).then( (heroes: Hero[]) => { + this.backend.getAll(Hero).then((heroes: Hero[]) => { this.logger.log(`Fetched ${heroes.length} heroes.`); this.heroes.push(...heroes); // fill cache }); diff --git a/adev/src/content/examples/architecture/src/app/hero.ts b/adev/src/content/examples/architecture/src/app/hero.ts index b89557aa71d..16ec66ec695 100644 --- a/adev/src/content/examples/architecture/src/app/hero.ts +++ b/adev/src/content/examples/architecture/src/app/hero.ts @@ -4,7 +4,8 @@ export class Hero { id: number; constructor( public name: string, - public power?: string) { - this.id = nextId++; - } + public power?: string, + ) { + this.id = nextId++; + } } diff --git a/adev/src/content/examples/architecture/src/app/logger.service.ts b/adev/src/content/examples/architecture/src/app/logger.service.ts index 9277ee8bc0a..53e14038818 100644 --- a/adev/src/content/examples/architecture/src/app/logger.service.ts +++ b/adev/src/content/examples/architecture/src/app/logger.service.ts @@ -1,9 +1,15 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable() // #docregion class export class Logger { - log(msg: any) { console.log(msg); } - error(msg: any) { console.error(msg); } - warn(msg: any) { console.warn(msg); } + log(msg: any) { + console.log(msg); + } + error(msg: any) { + console.error(msg); + } + warn(msg: any) { + console.warn(msg); + } } diff --git a/adev/src/content/examples/architecture/src/app/mini-app.ts b/adev/src/content/examples/architecture/src/app/mini-app.ts index 42d19c59dda..bf3036cd5fd 100644 --- a/adev/src/content/examples/architecture/src/app/mini-app.ts +++ b/adev/src/content/examples/architecture/src/app/mini-app.ts @@ -1,17 +1,19 @@ // #docplaster // A mini-application -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable() export class Logger { - log(message: string) { console.log(message); } + log(message: string) { + console.log(message); + } } -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ - selector: 'app-root', - template: 'Welcome to Angular' + selector: 'app-root', + template: 'Welcome to Angular', }) export class AppComponent { constructor(logger: Logger) { @@ -20,22 +22,22 @@ export class AppComponent { } // #docregion module -import { NgModule } from '@angular/core'; +import {NgModule} from '@angular/core'; // #docregion import-browser-module -import { BrowserModule } from '@angular/platform-browser'; +import {BrowserModule} from '@angular/platform-browser'; // #enddocregion import-browser-module @NgModule({ -// #docregion ngmodule-imports - imports: [ BrowserModule ], -// #enddocregion ngmodule-imports - providers: [ Logger ], - declarations: [ AppComponent ], - exports: [ AppComponent ], - bootstrap: [ AppComponent ] + // #docregion ngmodule-imports + imports: [BrowserModule], + // #enddocregion ngmodule-imports + providers: [Logger], + declarations: [AppComponent], + exports: [AppComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} // #enddocregion module -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/architecture/src/app/sales-tax.component.ts b/adev/src/content/examples/architecture/src/app/sales-tax.component.ts index f47fcb5daf2..db1c3c84937 100644 --- a/adev/src/content/examples/architecture/src/app/sales-tax.component.ts +++ b/adev/src/content/examples/architecture/src/app/sales-tax.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { SalesTaxService } from './sales-tax.service'; -import { TaxRateService } from './tax-rate.service'; +import {SalesTaxService} from './sales-tax.service'; +import {TaxRateService} from './tax-rate.service'; @Component({ - selector: 'app-sales-tax', + selector: 'app-sales-tax', template: `

Sales Tax Calculator

Enter a number and press enter to calculate tax.

@@ -15,10 +15,10 @@ import { TaxRateService } from './tax-rate.service'; {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}

`, - providers: [SalesTaxService, TaxRateService] + providers: [SalesTaxService, TaxRateService], }) export class SalesTaxComponent { - constructor(private salesTaxService: SalesTaxService) { } + constructor(private salesTaxService: SalesTaxService) {} getTax(value: string | number) { return this.salesTaxService.getVAT(value); diff --git a/adev/src/content/examples/architecture/src/app/sales-tax.service.ts b/adev/src/content/examples/architecture/src/app/sales-tax.service.ts index 8e92096dd67..31a0980e679 100644 --- a/adev/src/content/examples/architecture/src/app/sales-tax.service.ts +++ b/adev/src/content/examples/architecture/src/app/sales-tax.service.ts @@ -1,14 +1,13 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { TaxRateService } from './tax-rate.service'; +import {TaxRateService} from './tax-rate.service'; @Injectable() export class SalesTaxService { - constructor(private rateService: TaxRateService) { } + constructor(private rateService: TaxRateService) {} getVAT(value: string | number) { - const amount = (typeof value === 'string') ? - parseFloat(value) : value; + const amount = typeof value === 'string' ? parseFloat(value) : value; return (amount || 0) * this.rateService.getRate('VAT'); } } diff --git a/adev/src/content/examples/architecture/src/app/tax-rate.service.ts b/adev/src/content/examples/architecture/src/app/tax-rate.service.ts index fff2f4df8f3..c9428b1ff3f 100644 --- a/adev/src/content/examples/architecture/src/app/tax-rate.service.ts +++ b/adev/src/content/examples/architecture/src/app/tax-rate.service.ts @@ -1,6 +1,8 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable() export class TaxRateService { - getRate(rateName: string) { return 0.10; } // 10% everywhere + getRate(rateName: string) { + return 0.1; + } // 10% everywhere } diff --git a/adev/src/content/examples/architecture/src/main.ts b/adev/src/content/examples/architecture/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/architecture/src/main.ts +++ b/adev/src/content/examples/architecture/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts index 539cf65fc4d..521a5207a94 100644 --- a/adev/src/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Attribute binding example', () => { - beforeEach(() => browser.get('')); it('should display Property Binding with Angular', async () => { @@ -13,7 +12,9 @@ describe('Attribute binding example', () => { }); it('should display an Aria button', async () => { - expect(await element.all(by.css('button')).get(0).getText()).toBe('Create and set an attribute with Aria'); + expect(await element.all(by.css('button')).get(0).getText()).toBe( + 'Create and set an attribute with Aria', + ); }); it('should display a black background on div', async () => { @@ -31,5 +32,4 @@ describe('Attribute binding example', () => { expect(await div.getAttribute('class')).toContain('special'); expect(await div.getAttribute('class')).toContain('clearance'); }); - }); diff --git a/adev/src/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts b/adev/src/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts index c3d28e16d86..8c9ba077bb3 100644 --- a/adev/src/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts +++ b/adev/src/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts @@ -1,4 +1,4 @@ -import { Component } from "@angular/core"; +import {Component} from '@angular/core'; @Component({ standalone: true, diff --git a/adev/src/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts index 771543102c9..f4950adc2e4 100644 --- a/adev/src/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Attribute directives', () => { - const title = 'My First Attribute Directive'; beforeAll(() => browser.get('')); @@ -23,6 +22,6 @@ describe('Attribute directives', () => { // Wait for up to 4s for the background color to be updated, // to account for slow environments (e.g. CI). - await browser.wait(async () => await getBgColor() === lightGreen, 4000); + await browser.wait(async () => (await getBgColor()) === lightGreen, 4000); }); }); diff --git a/adev/src/content/examples/attribute-directives/src/app/app.component.1.ts b/adev/src/content/examples/attribute-directives/src/app/app.component.1.ts index 67b7a7a4deb..82fd7badeb9 100644 --- a/adev/src/content/examples/attribute-directives/src/app/app.component.1.ts +++ b/adev/src/content/examples/attribute-directives/src/app/app.component.1.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import { HighlightDirective } from './highlight.directive'; +import {HighlightDirective} from './highlight.directive'; @Component({ standalone: true, diff --git a/adev/src/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts index fb85e02ce8a..9dce1524ffb 100644 --- a/adev/src/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts @@ -1,19 +1,16 @@ -import { browser, element, by } from 'protractor'; -import { logging } from 'selenium-webdriver'; +import {browser, element, by} from 'protractor'; +import {logging} from 'selenium-webdriver'; describe('Binding syntax e2e tests', () => { - beforeEach(() => browser.get('')); - // helper function used to test what's logged to the console async function logChecker(contents: string) { const logs = await browser.manage().logs().get(logging.Type.BROWSER); - const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false); + const messages = logs.filter(({message}) => (message.indexOf(contents) !== -1 ? true : false)); expect(messages.length).toBeGreaterThan(0); } - it('should display Binding syntax', async () => { expect(await element(by.css('h1')).getText()).toEqual('Binding syntax'); }); @@ -23,7 +20,9 @@ describe('Binding syntax e2e tests', () => { }); it('should display HTML attributes and DOM properties', async () => { - expect(await element.all(by.css('h2')).get(1).getText()).toBe('HTML attributes and DOM properties'); + expect(await element.all(by.css('h2')).get(1).getText()).toBe( + 'HTML attributes and DOM properties', + ); }); it('should display 1. Use the inspector...', async () => { @@ -31,10 +30,11 @@ describe('Binding syntax e2e tests', () => { }); it('should display Disabled property vs. attribute', async () => { - expect(await element.all(by.css('h3')).get(0).getText()).toBe('Disabled property vs. attribute'); + expect(await element.all(by.css('h3')).get(0).getText()).toBe( + 'Disabled property vs. attribute', + ); }); - it('should log a message including Sarah', async () => { const attributeButton = element.all(by.css('button')).get(1); await attributeButton.click(); diff --git a/adev/src/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts index 78e8b1ee46b..b86cb55f632 100644 --- a/adev/src/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { AppPage } from './app.po'; +import {AppPage} from './app.po'; describe('feature-modules App', () => { let page: AppPage; diff --git a/adev/src/content/examples/bootstrapping/src/app/app.component.ts b/adev/src/content/examples/bootstrapping/src/app/app.component.ts index ff63e050488..2fe84b78ed7 100644 --- a/adev/src/content/examples/bootstrapping/src/app/app.component.ts +++ b/adev/src/content/examples/bootstrapping/src/app/app.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'app works!'; diff --git a/adev/src/content/examples/bootstrapping/src/app/app.module.ts b/adev/src/content/examples/bootstrapping/src/app/app.module.ts index b7d1a9bbae5..e12b5a95dcf 100644 --- a/adev/src/content/examples/bootstrapping/src/app/app.module.ts +++ b/adev/src/content/examples/bootstrapping/src/app/app.module.ts @@ -1,32 +1,24 @@ // #docplaster // imports -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular/common/http'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {HttpClientModule} from '@angular/common/http'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; // #docregion directive-import -import { ItemDirective } from './item.directive'; +import {ItemDirective} from './item.directive'; // #enddocregion directive-import - // @NgModule decorator with its metadata @NgModule({ -// #docregion declarations - declarations: [ - AppComponent, - ItemDirective - ], + // #docregion declarations + declarations: [AppComponent, ItemDirective], // #enddocregion declarations // #docregion imports - imports: [ - BrowserModule, - FormsModule, - HttpClientModule - ], + imports: [BrowserModule, FormsModule, HttpClientModule], // #enddocregion imports providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/bootstrapping/src/app/item.directive.ts b/adev/src/content/examples/bootstrapping/src/app/item.directive.ts index e8083bb05e7..ef12773ae72 100644 --- a/adev/src/content/examples/bootstrapping/src/app/item.directive.ts +++ b/adev/src/content/examples/bootstrapping/src/app/item.directive.ts @@ -1,15 +1,13 @@ // #docplaster // #docregion directive - -import { Directive } from '@angular/core'; +import {Directive} from '@angular/core'; @Directive({ - selector: '[appItem]' + selector: '[appItem]', }) export class ItemDirective { -// code goes here - constructor() { } - + // code goes here + constructor() {} } // #enddocregion directive diff --git a/adev/src/content/examples/bootstrapping/src/main.ts b/adev/src/content/examples/bootstrapping/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/bootstrapping/src/main.ts +++ b/adev/src/content/examples/bootstrapping/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts index 5914222617d..886f0c85f13 100644 --- a/adev/src/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Built-in Directives', () => { - beforeAll(() => browser.get('')); it('should have title Built-in Directives', async () => { @@ -18,7 +17,6 @@ describe('Built-in Directives', () => { expect(await firstLabel.getText()).toEqual('Current item name: Teapotabc'); }); - it('should modify sentence when modified checkbox checked', async () => { const modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1); const modifiedSentence = element.all(by.css('div')).get(1); @@ -68,6 +66,4 @@ describe('Built-in Directives', () => { await fishbowlRadioButton.click(); expect(await fishbowlDiv.getText()).toContain('mysterious'); }); - }); - diff --git a/adev/src/content/examples/built-in-directives/src/app/item.ts b/adev/src/content/examples/built-in-directives/src/app/item.ts index 2913de9b521..c9714f6b6c1 100644 --- a/adev/src/content/examples/built-in-directives/src/app/item.ts +++ b/adev/src/content/examples/built-in-directives/src/app/item.ts @@ -2,25 +2,20 @@ export class Item { static nextId = 0; static items: Item[] = [ - new Item( - 0, - 'Teapot', - 'stout' - ), + new Item(0, 'Teapot', 'stout'), new Item(1, 'Lamp', 'bright'), - new Item(2, 'Phone', 'slim' ), - new Item(3, 'Television', 'vintage' ), - new Item(4, 'Fishbowl') + new Item(2, 'Phone', 'slim'), + new Item(3, 'Television', 'vintage'), + new Item(4, 'Fishbowl'), ]; - constructor( public id: number, public name?: string, public feature?: string, public url?: string, public rate = 100, - ) { + ) { this.id = id ? id : Item.nextId++; } diff --git a/adev/src/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts index 03e4a2e5e37..2b3af28d68c 100644 --- a/adev/src/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Built Template Functions Example', () => { beforeAll(() => browser.get('')); @@ -12,5 +12,4 @@ describe('Built Template Functions Example', () => { const header = element(by.css('h2')); expect(await header.getText()).toContain('$any( )'); }); - }); diff --git a/adev/src/content/examples/cli-builder/src/my-builder.spec.ts b/adev/src/content/examples/cli-builder/src/my-builder.spec.ts index ac4c79fba87..8f17192e45a 100644 --- a/adev/src/content/examples/cli-builder/src/my-builder.spec.ts +++ b/adev/src/content/examples/cli-builder/src/my-builder.spec.ts @@ -1,9 +1,9 @@ // #docregion -import { Architect } from '@angular-devkit/architect'; -import { TestingArchitectHost } from '@angular-devkit/architect/testing'; -import { schema } from '@angular-devkit/core'; -import { promises as fs } from 'fs'; -import { join } from 'path'; +import {Architect} from '@angular-devkit/architect'; +import {TestingArchitectHost} from '@angular-devkit/architect/testing'; +import {schema} from '@angular-devkit/core'; +import {promises as fs} from 'fs'; +import {join} from 'path'; describe('Copy File Builder', () => { let architect: Architect; diff --git a/adev/src/content/examples/cli-builder/src/my-builder.ts b/adev/src/content/examples/cli-builder/src/my-builder.ts index 6b16d9f0356..92331d7b76c 100644 --- a/adev/src/content/examples/cli-builder/src/my-builder.ts +++ b/adev/src/content/examples/cli-builder/src/my-builder.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion builder, builder-skeleton -import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect'; -import { JsonObject } from '@angular-devkit/core'; +import {BuilderContext, BuilderOutput, createBuilder} from '@angular-devkit/architect'; +import {JsonObject} from '@angular-devkit/core'; // #enddocregion builder-skeleton -import { promises as fs } from 'fs'; +import {promises as fs} from 'fs'; // #docregion builder-skeleton interface Options extends JsonObject { @@ -13,10 +13,7 @@ interface Options extends JsonObject { export default createBuilder(copyFileBuilder); -async function copyFileBuilder( - options: Options, - context: BuilderContext, -): Promise { +async function copyFileBuilder(options: Options, context: BuilderContext): Promise { // #enddocregion builder, builder-skeleton // #docregion progress-reporting context.reportStatus(`Copying ${options.source} to ${options.destination}.`); @@ -38,7 +35,7 @@ async function copyFileBuilder( context.reportStatus('Done.'); // #docregion builder - return { success: true }; + return {success: true}; // #enddocregion progress-reporting // #docregion builder-skeleton } diff --git a/adev/src/content/examples/component-interaction/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/component-interaction/e2e/src/app.e2e-spec.ts index 9f6fb1ddd95..189f7a01073 100644 --- a/adev/src/content/examples/component-interaction/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/component-interaction/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, by, element } from 'protractor'; +import {browser, by, element} from 'protractor'; describe('Component Communication Cookbook Tests', () => { - beforeEach(() => browser.get(browser.baseUrl)); describe('Parent-to-child communication', () => { @@ -101,7 +100,7 @@ describe('Component Communication Cookbook Tests', () => { async function getActual() { const versionTag = element(by.tagName('app-version-child')); const label = await versionTag.element(by.tagName('h3')).getText(); - const ul = versionTag.element((by.tagName('ul'))); + const ul = versionTag.element(by.tagName('ul')); const logs = ul.all(by.tagName('li')); return { @@ -124,8 +123,11 @@ describe('Component Communication Cookbook Tests', () => { it('should process Agree vote', async () => { const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3')); - const agreeButton1 = element.all(by.tagName('app-voter')).get(0) - .all(by.tagName('button')).get(0); + const agreeButton1 = element + .all(by.tagName('app-voter')) + .get(0) + .all(by.tagName('button')) + .get(0); await agreeButton1.click(); @@ -134,8 +136,11 @@ describe('Component Communication Cookbook Tests', () => { it('should process Disagree vote', async () => { const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3')); - const agreeButton1 = element.all(by.tagName('app-voter')).get(1) - .all(by.tagName('button')).get(1); + const agreeButton1 = element + .all(by.tagName('app-voter')) + .get(1) + .all(by.tagName('button')) + .get(1); await agreeButton1.click(); @@ -235,5 +240,4 @@ describe('Component Communication Cookbook Tests', () => { // ... // #enddocregion bidirectional-service }); - }); diff --git a/adev/src/content/examples/component-interaction/src/app/app.component.ts b/adev/src/content/examples/component-interaction/src/app/app.component.ts index 968036cb8c2..0c9100486ea 100644 --- a/adev/src/content/examples/component-interaction/src/app/app.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/component-interaction/src/app/app.module.ts b/adev/src/content/examples/component-interaction/src/app/app.module.ts index caecee59e5d..8fa2c759d26 100644 --- a/adev/src/content/examples/component-interaction/src/app/app.module.ts +++ b/adev/src/content/examples/component-interaction/src/app/app.module.ts @@ -1,25 +1,25 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { AstronautComponent } from './astronaut.component'; -import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component'; -import { CountdownTimerComponent } from './countdown-timer.component'; -import { HeroChildComponent } from './hero-child.component'; -import { HeroParentComponent } from './hero-parent.component'; -import { MissionControlComponent } from './missioncontrol.component'; -import { NameChildComponent } from './name-child.component'; -import { NameParentComponent } from './name-parent.component'; -import { VersionChildComponent } from './version-child.component'; -import { VersionParentComponent } from './version-parent.component'; -import { VoterComponent } from './voter.component'; -import { VoteTakerComponent } from './votetaker.component'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {AppComponent} from './app.component'; +import {AstronautComponent} from './astronaut.component'; +import { + CountdownLocalVarParentComponent, + CountdownViewChildParentComponent, +} from './countdown-parent.component'; +import {CountdownTimerComponent} from './countdown-timer.component'; +import {HeroChildComponent} from './hero-child.component'; +import {HeroParentComponent} from './hero-parent.component'; +import {MissionControlComponent} from './missioncontrol.component'; +import {NameChildComponent} from './name-child.component'; +import {NameParentComponent} from './name-parent.component'; +import {VersionChildComponent} from './version-child.component'; +import {VersionParentComponent} from './version-parent.component'; +import {VoterComponent} from './voter.component'; +import {VoteTakerComponent} from './votetaker.component'; @NgModule({ - imports: [ - BrowserModule, - ], + imports: [BrowserModule], declarations: [ AppComponent, AstronautComponent, @@ -36,6 +36,6 @@ import { VoteTakerComponent } from './votetaker.component'; VoterComponent, VoteTakerComponent, ], - bootstrap: [ AppComponent ], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/component-interaction/src/app/astronaut.component.ts b/adev/src/content/examples/component-interaction/src/app/astronaut.component.ts index 4d25994f32e..5726a89ce92 100644 --- a/adev/src/content/examples/component-interaction/src/app/astronaut.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/astronaut.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component, Input, OnDestroy } from '@angular/core'; +import {Component, Input, OnDestroy} from '@angular/core'; -import { MissionService } from './mission.service'; -import { Subscription } from 'rxjs'; +import {MissionService} from './mission.service'; +import {Subscription} from 'rxjs'; @Component({ selector: 'app-astronaut', @@ -16,7 +16,7 @@ import { Subscription } from 'rxjs'; Confirm

- ` + `, }) export class AstronautComponent implements OnDestroy { @Input() astronaut = ''; @@ -26,11 +26,10 @@ export class AstronautComponent implements OnDestroy { subscription: Subscription; constructor(private missionService: MissionService) { - this.subscription = missionService.missionAnnounced$.subscribe( - mission => { - this.mission = mission; - this.announced = true; - this.confirmed = false; + this.subscription = missionService.missionAnnounced$.subscribe((mission) => { + this.mission = mission; + this.announced = true; + this.confirmed = false; }); } diff --git a/adev/src/content/examples/component-interaction/src/app/countdown-parent.component.ts b/adev/src/content/examples/component-interaction/src/app/countdown-parent.component.ts index 03b6574bc3c..aa68e97783d 100644 --- a/adev/src/content/examples/component-interaction/src/app/countdown-parent.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/countdown-parent.component.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion vc -import { AfterViewInit, ViewChild } from '@angular/core'; +import {AfterViewInit, ViewChild} from '@angular/core'; // #docregion lv -import { Component } from '@angular/core'; -import { CountdownTimerComponent } from './countdown-timer.component'; +import {Component} from '@angular/core'; +import {CountdownTimerComponent} from './countdown-timer.component'; // #enddocregion lv // #enddocregion vc @@ -19,9 +19,9 @@ import { CountdownTimerComponent } from './countdown-timer.component';
{{timer.seconds}}
`, - styleUrls: ['../assets/demo.css'] + styleUrls: ['../assets/demo.css'], }) -export class CountdownLocalVarParentComponent { } +export class CountdownLocalVarParentComponent {} // #enddocregion lv //// View Child version @@ -35,23 +35,28 @@ export class CountdownLocalVarParentComponent { }
{{ seconds() }}
`, - styleUrls: ['../assets/demo.css'] + styleUrls: ['../assets/demo.css'], }) export class CountdownViewChildParentComponent implements AfterViewInit { - @ViewChild(CountdownTimerComponent) private timerComponent!: CountdownTimerComponent; - seconds() { return 0; } + seconds() { + return 0; + } ngAfterViewInit() { // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ... // but wait a tick first to avoid one-time devMode // unidirectional-data-flow-violation error - setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0); + setTimeout(() => (this.seconds = () => this.timerComponent.seconds), 0); } - start() { this.timerComponent.start(); } - stop() { this.timerComponent.stop(); } + start() { + this.timerComponent.start(); + } + stop() { + this.timerComponent.stop(); + } } // #enddocregion vc diff --git a/adev/src/content/examples/component-interaction/src/app/countdown-timer.component.ts b/adev/src/content/examples/component-interaction/src/app/countdown-timer.component.ts index 1e8785cea29..90e6b618277 100644 --- a/adev/src/content/examples/component-interaction/src/app/countdown-timer.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/countdown-timer.component.ts @@ -1,18 +1,22 @@ // #docregion -import { Component, OnDestroy } from '@angular/core'; +import {Component, OnDestroy} from '@angular/core'; @Component({ selector: 'app-countdown-timer', - template: '

{{message}}

' + template: '

{{message}}

', }) export class CountdownTimerComponent implements OnDestroy { message = ''; seconds = 11; - ngOnDestroy() { this.clearTimer?.(); } + ngOnDestroy() { + this.clearTimer?.(); + } - start() { this.countDown(); } - stop() { + start() { + this.countDown(); + } + stop() { this.clearTimer?.(); this.message = `Holding at T-${this.seconds} seconds`; } @@ -26,7 +30,9 @@ export class CountdownTimerComponent implements OnDestroy { if (this.seconds === 0) { this.message = 'Blast off!'; } else { - if (this.seconds < 0) { this.seconds = 10; } // reset + if (this.seconds < 0) { + this.seconds = 10; + } // reset this.message = `T-${this.seconds} seconds and counting`; } }, 1000); diff --git a/adev/src/content/examples/component-interaction/src/app/hero-child.component.ts b/adev/src/content/examples/component-interaction/src/app/hero-child.component.ts index 66062ee0641..f5a1c0c74d8 100644 --- a/adev/src/content/examples/component-interaction/src/app/hero-child.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/hero-child.component.ts @@ -1,14 +1,14 @@ // #docregion -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ selector: 'app-hero-child', template: `

{{hero.name}} says:

I, {{hero.name}}, am at your service, {{masterName}}.

- ` + `, }) export class HeroChildComponent { @Input() hero!: Hero; diff --git a/adev/src/content/examples/component-interaction/src/app/hero-parent.component.ts b/adev/src/content/examples/component-interaction/src/app/hero-parent.component.ts index e65b0171424..072579f6b82 100644 --- a/adev/src/content/examples/component-interaction/src/app/hero-parent.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/hero-parent.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { HEROES } from './hero'; +import {HEROES} from './hero'; @Component({ selector: 'app-hero-parent', @@ -13,7 +13,7 @@ import { HEROES } from './hero'; [hero]="hero" [master]="master"> - ` + `, }) export class HeroParentComponent { heroes = HEROES; diff --git a/adev/src/content/examples/component-interaction/src/app/hero.ts b/adev/src/content/examples/component-interaction/src/app/hero.ts index e75c718badb..84cd773d900 100644 --- a/adev/src/content/examples/component-interaction/src/app/hero.ts +++ b/adev/src/content/examples/component-interaction/src/app/hero.ts @@ -2,8 +2,4 @@ export interface Hero { name: string; } -export const HEROES = [ - {name: 'Dr. IQ'}, - {name: 'Magneta'}, - {name: 'Bombasto'} -]; +export const HEROES = [{name: 'Dr. IQ'}, {name: 'Magneta'}, {name: 'Bombasto'}]; diff --git a/adev/src/content/examples/component-interaction/src/app/mission.service.ts b/adev/src/content/examples/component-interaction/src/app/mission.service.ts index 1c450fd88d3..5d2491382f2 100644 --- a/adev/src/content/examples/component-interaction/src/app/mission.service.ts +++ b/adev/src/content/examples/component-interaction/src/app/mission.service.ts @@ -1,10 +1,9 @@ // #docregion -import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; +import {Injectable} from '@angular/core'; +import {Subject} from 'rxjs'; @Injectable() export class MissionService { - // Observable string sources private missionAnnouncedSource = new Subject(); private missionConfirmedSource = new Subject(); diff --git a/adev/src/content/examples/component-interaction/src/app/missioncontrol.component.ts b/adev/src/content/examples/component-interaction/src/app/missioncontrol.component.ts index 12268c96998..4742e89e353 100644 --- a/adev/src/content/examples/component-interaction/src/app/missioncontrol.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/missioncontrol.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { MissionService } from './mission.service'; +import {MissionService} from './mission.service'; @Component({ selector: 'app-mission-control', @@ -19,28 +19,27 @@ import { MissionService } from './mission.service';
  • {{event}}
    • `, - providers: [MissionService] + providers: [MissionService], }) export class MissionControlComponent { astronauts = ['Lovell', 'Swigert', 'Haise']; history: string[] = []; - missions = ['Fly to the moon!', - 'Fly to mars!', - 'Fly to Vegas!']; + missions = ['Fly to the moon!', 'Fly to mars!', 'Fly to Vegas!']; nextMission = 0; constructor(private missionService: MissionService) { - missionService.missionConfirmed$.subscribe( - astronaut => { - this.history.push(`${astronaut} confirmed the mission`); - }); + missionService.missionConfirmed$.subscribe((astronaut) => { + this.history.push(`${astronaut} confirmed the mission`); + }); } announce() { const mission = this.missions[this.nextMission++]; this.missionService.announceMission(mission); this.history.push(`Mission "${mission}" announced`); - if (this.nextMission >= this.missions.length) { this.nextMission = 0; } + if (this.nextMission >= this.missions.length) { + this.nextMission = 0; + } } } // #enddocregion diff --git a/adev/src/content/examples/component-interaction/src/app/name-child.component.ts b/adev/src/content/examples/component-interaction/src/app/name-child.component.ts index 6bcbec4cc6f..3d3928a0a7b 100644 --- a/adev/src/content/examples/component-interaction/src/app/name-child.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/name-child.component.ts @@ -1,13 +1,15 @@ // #docregion -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; @Component({ selector: 'app-name-child', - template: '

    "{{name}}"

    ' + template: '

    "{{name}}"

    ', }) export class NameChildComponent { @Input() - get name(): string { return this._name; } + get name(): string { + return this._name; + } set name(name: string) { this._name = (name && name.trim()) || ''; } diff --git a/adev/src/content/examples/component-interaction/src/app/name-parent.component.ts b/adev/src/content/examples/component-interaction/src/app/name-parent.component.ts index cb795a4a790..e755fa95e98 100644 --- a/adev/src/content/examples/component-interaction/src/app/name-parent.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/name-parent.component.ts @@ -1,5 +1,5 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-name-parent', @@ -7,7 +7,7 @@ import { Component } from '@angular/core';

    Master controls {{names.length}} names

    - ` + `, }) export class NameParentComponent { // Displays 'Dr. IQ', '', 'Bombasto' diff --git a/adev/src/content/examples/component-interaction/src/app/version-child.component.ts b/adev/src/content/examples/component-interaction/src/app/version-child.component.ts index 60f37c6cc4e..5a11f5356b8 100644 --- a/adev/src/content/examples/component-interaction/src/app/version-child.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/version-child.component.ts @@ -1,6 +1,6 @@ /* eslint-disable guard-for-in */ // #docregion -import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'; @Component({ selector: 'app-version-child', @@ -10,7 +10,7 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
    • {{change}}
    - ` + `, }) export class VersionChildComponent implements OnChanges { @Input() major = 0; diff --git a/adev/src/content/examples/component-interaction/src/app/version-parent.component.ts b/adev/src/content/examples/component-interaction/src/app/version-parent.component.ts index 0cea88dfff1..b6766fa25c4 100644 --- a/adev/src/content/examples/component-interaction/src/app/version-parent.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/version-parent.component.ts @@ -1,5 +1,5 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-version-parent', @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; - ` + `, }) export class VersionParentComponent { major = 1; diff --git a/adev/src/content/examples/component-interaction/src/app/voter.component.ts b/adev/src/content/examples/component-interaction/src/app/voter.component.ts index 862dff58c84..17f87abe076 100644 --- a/adev/src/content/examples/component-interaction/src/app/voter.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/voter.component.ts @@ -1,5 +1,5 @@ // #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; @Component({ selector: 'app-voter', @@ -7,10 +7,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';

    {{name}}

    - ` + `, }) export class VoterComponent { - @Input() name = ''; + @Input() name = ''; @Output() voted = new EventEmitter(); didVote = false; diff --git a/adev/src/content/examples/component-interaction/src/app/votetaker.component.ts b/adev/src/content/examples/component-interaction/src/app/votetaker.component.ts index 5e606f4c17c..0cea1dc5f17 100644 --- a/adev/src/content/examples/component-interaction/src/app/votetaker.component.ts +++ b/adev/src/content/examples/component-interaction/src/app/votetaker.component.ts @@ -1,5 +1,5 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-vote-taker', @@ -12,7 +12,7 @@ import { Component } from '@angular/core'; [name]="voter" (voted)="onVoted($event)"> - ` + `, }) export class VoteTakerComponent { agreed = 0; diff --git a/adev/src/content/examples/component-interaction/src/main.ts b/adev/src/content/examples/component-interaction/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/component-interaction/src/main.ts +++ b/adev/src/content/examples/component-interaction/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/component-overview/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/component-overview/e2e/src/app.e2e-spec.ts index 4ddd1bcef10..867d8222691 100644 --- a/adev/src/content/examples/component-overview/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/component-overview/e2e/src/app.e2e-spec.ts @@ -1,11 +1,9 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Component Overview', () => { - beforeAll(() => browser.get('')); it('should display component overview works ', async () => { expect(await element(by.css('p')).getText()).toEqual('component-overview works!'); }); - }); diff --git a/adev/src/content/examples/component-overview/src/app/app.component.spec.ts b/adev/src/content/examples/component-overview/src/app/app.component.spec.ts index 480f13947bc..e07584f7d6d 100644 --- a/adev/src/content/examples/component-overview/src/app/app.component.spec.ts +++ b/adev/src/content/examples/component-overview/src/app/app.component.spec.ts @@ -1,12 +1,10 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; +import {TestBed} from '@angular/core/testing'; +import {AppComponent} from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], }).compileComponents(); }); @@ -26,6 +24,8 @@ describe('AppComponent', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('component-overview app is running!'); + expect(compiled.querySelector('.content span')?.textContent).toContain( + 'component-overview app is running!', + ); }); }); diff --git a/adev/src/content/examples/component-overview/src/app/app.component.ts b/adev/src/content/examples/component-overview/src/app/app.component.ts index 29cfb38dc37..c226eeb1b10 100644 --- a/adev/src/content/examples/component-overview/src/app/app.component.ts +++ b/adev/src/content/examples/component-overview/src/app/app.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'component-overview'; diff --git a/adev/src/content/examples/component-overview/src/app/app.module.ts b/adev/src/content/examples/component-overview/src/app/app.module.ts index e22e3e1854d..eda25982466 100644 --- a/adev/src/content/examples/component-overview/src/app/app.module.ts +++ b/adev/src/content/examples/component-overview/src/app/app.module.ts @@ -1,18 +1,13 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; -import { AppComponent } from './app.component'; -import { ComponentOverviewComponent } from './component-overview/component-overview.component'; +import {AppComponent} from './app.component'; +import {ComponentOverviewComponent} from './component-overview/component-overview.component'; @NgModule({ - declarations: [ - AppComponent, - ComponentOverviewComponent - ], - imports: [ - BrowserModule - ], + declarations: [AppComponent, ComponentOverviewComponent], + imports: [BrowserModule], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.1.ts b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.1.ts index 3e6d5d1fd27..f528a5eeea3 100644 --- a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.1.ts +++ b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.1.ts @@ -1,5 +1,5 @@ // #docplaster -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion template @Component({ @@ -7,8 +7,4 @@ import { Component } from '@angular/core'; template: '

    Hello World!

    ', }) // #enddocregion template - -export class ComponentOverviewComponent { - -} - +export class ComponentOverviewComponent {} diff --git a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.2.ts b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.2.ts index 7dd81ad5f78..34d9c144a84 100644 --- a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.2.ts +++ b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.2.ts @@ -1,5 +1,5 @@ // #docplaster -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion templatebacktick @Component({ @@ -7,10 +7,7 @@ import { Component } from '@angular/core'; template: `

    Hello World!

    This template definition spans multiple lines.

    - ` + `, }) // #enddocregion templatebacktick -export class ComponentOverviewComponent { - -} - +export class ComponentOverviewComponent {} diff --git a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.3.ts b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.3.ts index b1b8b3706ca..687af59d1b2 100644 --- a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.3.ts +++ b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.3.ts @@ -1,15 +1,11 @@ // #docplaster -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion styles @Component({ selector: 'app-component-overview', template: '

    Hello World!

    ', - styles: ['h1 { font-weight: normal; }'] + styles: ['h1 { font-weight: normal; }'], }) // #enddocregion styles - -export class ComponentOverviewComponent { - -} - +export class ComponentOverviewComponent {} diff --git a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.spec.ts b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.spec.ts index e3a03232318..dff2abb0ca7 100644 --- a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.spec.ts +++ b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.spec.ts @@ -1,6 +1,6 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { ComponentOverviewComponent } from './component-overview.component'; +import {ComponentOverviewComponent} from './component-overview.component'; describe('ComponentOverviewComponent', () => { let component: ComponentOverviewComponent; @@ -8,9 +8,8 @@ describe('ComponentOverviewComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ComponentOverviewComponent ] - }) - .compileComponents(); + declarations: [ComponentOverviewComponent], + }).compileComponents(); fixture = TestBed.createComponent(ComponentOverviewComponent); component = fixture.componentInstance; diff --git a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.ts b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.ts index 7e1e3597a12..a1558b1a339 100644 --- a/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.ts +++ b/adev/src/content/examples/component-overview/src/app/component-overview/component-overview.component.ts @@ -1,22 +1,20 @@ // #docplaster // #docregion import -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #enddocregion import // #docregion decorator, decorator-skeleton, selector, templateUrl @Component({ -// #enddocregion decorator-skeleton + // #enddocregion decorator-skeleton selector: 'app-component-overview', -// #enddocregion selector + // #enddocregion selector templateUrl: './component-overview.component.html', -// #enddocregion templateUrl - styleUrls: ['./component-overview.component.css'] -// #docregion decorator-skeleton, selector, templateUrl + // #enddocregion templateUrl + styleUrls: ['./component-overview.component.css'], + // #docregion decorator-skeleton, selector, templateUrl }) // #enddocregion decorator, decorator-skeleton, selector, templateUrl // #docregion class -export class ComponentOverviewComponent { - -} +export class ComponentOverviewComponent {} // #enddocregion class diff --git a/adev/src/content/examples/component-overview/src/main.ts b/adev/src/content/examples/component-overview/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/component-overview/src/main.ts +++ b/adev/src/content/examples/component-overview/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/component-styles/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/component-styles/e2e/src/app.e2e-spec.ts index 7ad9e315ca7..fdbf63f431e 100644 --- a/adev/src/content/examples/component-styles/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/component-styles/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Component Style Tests', () => { - beforeAll(() => browser.get('')); it('scopes component styles to component view', async () => { @@ -32,7 +31,9 @@ describe('Component Style Tests', () => { const button = element(by.css('app-hero-controls button')); const externalButton = element(by.css('body > button')); expect(await button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff - expect(await externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)'); + expect(await externalButton.getCssValue('backgroundColor')).not.toEqual( + 'rgba(255, 255, 255, 1)', + ); }); it('processes template s', async () => { @@ -42,5 +43,4 @@ describe('Component Style Tests', () => { expect(await li.getCssValue('listStyleType')).toEqual('square'); expect(await externalLi.getCssValue('listStyleType')).not.toEqual('square'); }); - }); diff --git a/adev/src/content/examples/component-styles/src/app/app.module.ts b/adev/src/content/examples/component-styles/src/app/app.module.ts index 31c72cbbf2b..a23dd84bc93 100644 --- a/adev/src/content/examples/component-styles/src/app/app.module.ts +++ b/adev/src/content/examples/component-styles/src/app/app.module.ts @@ -1,23 +1,23 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; -import { HeroAppComponent } from './hero-app.component'; -import { HeroAppMainComponent } from './hero-app-main.component'; -import { HeroDetailsComponent } from './hero-details.component'; -import { HeroControlsComponent } from './hero-controls.component'; -import { QuestSummaryComponent } from './quest-summary.component'; -import { HeroTeamComponent } from './hero-team.component'; +import {HeroAppComponent} from './hero-app.component'; +import {HeroAppMainComponent} from './hero-app-main.component'; +import {HeroDetailsComponent} from './hero-details.component'; +import {HeroControlsComponent} from './hero-controls.component'; +import {QuestSummaryComponent} from './quest-summary.component'; +import {HeroTeamComponent} from './hero-team.component'; @NgModule({ - imports: [ BrowserModule ], + imports: [BrowserModule], declarations: [ HeroAppComponent, HeroAppMainComponent, HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent, - HeroTeamComponent + HeroTeamComponent, ], - bootstrap: [ HeroAppComponent ] + bootstrap: [HeroAppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/component-styles/src/app/hero-app-main.component.ts b/adev/src/content/examples/component-styles/src/app/hero-app-main.component.ts index c5476cdc2ff..dcfd74b304a 100644 --- a/adev/src/content/examples/component-styles/src/app/hero-app-main.component.ts +++ b/adev/src/content/examples/component-styles/src/app/hero-app-main.component.ts @@ -1,6 +1,6 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ selector: 'app-hero-main', @@ -9,7 +9,7 @@ import { Hero } from './hero'; - ` + `, }) export class HeroAppMainComponent { @Input() hero!: Hero; diff --git a/adev/src/content/examples/component-styles/src/app/hero-app.component.1.ts b/adev/src/content/examples/component-styles/src/app/hero-app.component.1.ts index a89786c5d39..b474dc45d9e 100644 --- a/adev/src/content/examples/component-styles/src/app/hero-app.component.1.ts +++ b/adev/src/content/examples/component-styles/src/app/hero-app.component.1.ts @@ -1,5 +1,5 @@ -import { Component, HostBinding } from '@angular/core'; -import { Hero } from './hero'; +import {Component, HostBinding} from '@angular/core'; +import {Hero} from './hero'; // #docregion @Component({ @@ -8,18 +8,15 @@ import { Hero } from './hero';

    Tour of Heroes

    `, - styleUrls: ['./hero-app.component.css'] + styleUrls: ['./hero-app.component.css'], }) export class HeroAppComponent { -// #enddocregion - hero = new Hero( - 'Human Torch', - ['Mister Fantastic', 'Invisible Woman', 'Thing'] - ); + // #enddocregion + hero = new Hero('Human Torch', ['Mister Fantastic', 'Invisible Woman', 'Thing']); @HostBinding('class') get themeClass() { return 'theme-light'; } -// #docregion + // #docregion } // #enddocregion diff --git a/adev/src/content/examples/component-styles/src/app/hero-app.component.ts b/adev/src/content/examples/component-styles/src/app/hero-app.component.ts index dd72cc5dfc8..4b9c989e535 100644 --- a/adev/src/content/examples/component-styles/src/app/hero-app.component.ts +++ b/adev/src/content/examples/component-styles/src/app/hero-app.component.ts @@ -1,5 +1,5 @@ -import { Component, HostBinding } from '@angular/core'; -import { Hero } from './hero'; +import {Component, HostBinding} from '@angular/core'; +import {Hero} from './hero'; // #docregion @Component({ @@ -8,18 +8,15 @@ import { Hero } from './hero';

    Tour of Heroes

    `, - styles: ['h1 { font-weight: normal; }'] + styles: ['h1 { font-weight: normal; }'], }) export class HeroAppComponent { -// #enddocregion - hero = new Hero( - 'Human Torch', - ['Mister Fantastic', 'Invisible Woman', 'Thing'] - ); + // #enddocregion + hero = new Hero('Human Torch', ['Mister Fantastic', 'Invisible Woman', 'Thing']); @HostBinding('class') get themeClass() { return 'theme-light'; } -// #docregion + // #docregion } // #enddocregion diff --git a/adev/src/content/examples/component-styles/src/app/hero-controls.component.ts b/adev/src/content/examples/component-styles/src/app/hero-controls.component.ts index a9a1c6ab688..c824b77e3d9 100644 --- a/adev/src/content/examples/component-styles/src/app/hero-controls.component.ts +++ b/adev/src/content/examples/component-styles/src/app/hero-controls.component.ts @@ -1,5 +1,5 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; +import {Component, Input} from '@angular/core'; +import {Hero} from './hero'; // #docregion inlinestyles @Component({ @@ -13,7 +13,7 @@ import { Hero } from './hero';

    Controls

    - ` + `, }) // #enddocregion inlinestyles export class HeroControlsComponent { diff --git a/adev/src/content/examples/component-styles/src/app/hero-details.component.ts b/adev/src/content/examples/component-styles/src/app/hero-details.component.ts index dd530bca87b..feabf29986b 100644 --- a/adev/src/content/examples/component-styles/src/app/hero-details.component.ts +++ b/adev/src/content/examples/component-styles/src/app/hero-details.component.ts @@ -1,5 +1,5 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; +import {Component, Input} from '@angular/core'; +import {Hero} from './hero'; @Component({ selector: 'app-hero-details', @@ -8,7 +8,7 @@ import { Hero } from './hero'; `, - styleUrls: ['./hero-details.component.css'] + styleUrls: ['./hero-details.component.css'], }) export class HeroDetailsComponent { @Input() hero!: Hero; diff --git a/adev/src/content/examples/component-styles/src/app/hero-team.component.ts b/adev/src/content/examples/component-styles/src/app/hero-team.component.ts index 412d08483e2..d7f1e6d6896 100644 --- a/adev/src/content/examples/component-styles/src/app/hero-team.component.ts +++ b/adev/src/content/examples/component-styles/src/app/hero-team.component.ts @@ -1,5 +1,5 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; +import {Component, Input} from '@angular/core'; +import {Hero} from './hero'; // #docregion stylelink @Component({ @@ -12,7 +12,7 @@ import { Hero } from './hero';
  • {{member}}
    • - ` + `, }) // #enddocregion stylelink export class HeroTeamComponent { diff --git a/adev/src/content/examples/component-styles/src/app/hero.ts b/adev/src/content/examples/component-styles/src/app/hero.ts index bed3ccaed24..869e36ec754 100644 --- a/adev/src/content/examples/component-styles/src/app/hero.ts +++ b/adev/src/content/examples/component-styles/src/app/hero.ts @@ -1,7 +1,8 @@ export class Hero { active = false; - constructor(public name: string, - public team: string[]) { - } + constructor( + public name: string, + public team: string[], + ) {} } diff --git a/adev/src/content/examples/component-styles/src/app/host-selector-example.component.ts b/adev/src/content/examples/component-styles/src/app/host-selector-example.component.ts index 33dc07ba4ba..a2e5e595787 100644 --- a/adev/src/content/examples/component-styles/src/app/host-selector-example.component.ts +++ b/adev/src/content/examples/component-styles/src/app/host-selector-example.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion @Component({ @@ -8,9 +8,7 @@ import { Component } from '@angular/core';
    Start editing to see some magic happen :)
    - ` + `, }) -export class HostSelectorExampleComponent { - -} +export class HostSelectorExampleComponent {} // #enddocregion diff --git a/adev/src/content/examples/component-styles/src/app/quest-summary.component.ts b/adev/src/content/examples/component-styles/src/app/quest-summary.component.ts index ab55c1583b9..da50d30a189 100644 --- a/adev/src/content/examples/component-styles/src/app/quest-summary.component.ts +++ b/adev/src/content/examples/component-styles/src/app/quest-summary.component.ts @@ -1,11 +1,11 @@ // #docplaster -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion @Component({ selector: 'app-quest-summary', templateUrl: './quest-summary.component.html', - styleUrls: ['./quest-summary.component.css'] + styleUrls: ['./quest-summary.component.css'], }) -export class QuestSummaryComponent { } +export class QuestSummaryComponent {} // #enddocregion diff --git a/adev/src/content/examples/component-styles/src/main.ts b/adev/src/content/examples/component-styles/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/component-styles/src/main.ts +++ b/adev/src/content/examples/component-styles/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/content-projection/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/content-projection/e2e/src/app.e2e-spec.ts index f9e6001d4b7..80d5199c301 100644 --- a/adev/src/content/examples/content-projection/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/content-projection/e2e/src/app.e2e-spec.ts @@ -1,11 +1,9 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Component Overview', () => { - beforeAll(() => browser.get('')); it('should display Angular and Content Projection ', async () => { expect(await element(by.css('h2')).getText()).toEqual('Angular and Content Projection'); }); - }); diff --git a/adev/src/content/examples/content-projection/src/app/app.component.ts b/adev/src/content/examples/content-projection/src/app/app.component.ts index f45969e5cde..0c9100486ea 100644 --- a/adev/src/content/examples/content-projection/src/app/app.component.ts +++ b/adev/src/content/examples/content-projection/src/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) export class AppComponent {} diff --git a/adev/src/content/examples/content-projection/src/app/app.module.ts b/adev/src/content/examples/content-projection/src/app/app.module.ts index 79afe462dac..b70bfd2d3b3 100644 --- a/adev/src/content/examples/content-projection/src/app/app.module.ts +++ b/adev/src/content/examples/content-projection/src/app/app.module.ts @@ -1,16 +1,16 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; import { ZippyComponent, ZippyContentDirective, ZippyToggleDirective, } from './example-zippy.component'; -import { ZippyBasicComponent } from './zippy-basic/zippy-basic.component'; -import { ZippyMultislotComponent } from './zippy-multislot/zippy-multislot.component'; -import { ZippyNgprojectasComponent } from './zippy-ngprojectas/zippy-ngprojectas.component'; +import {ZippyBasicComponent} from './zippy-basic/zippy-basic.component'; +import {ZippyMultislotComponent} from './zippy-multislot/zippy-multislot.component'; +import {ZippyNgprojectasComponent} from './zippy-ngprojectas/zippy-ngprojectas.component'; @NgModule({ imports: [BrowserModule, FormsModule], @@ -23,6 +23,6 @@ import { ZippyNgprojectasComponent } from './zippy-ngprojectas/zippy-ngprojectas ZippyMultislotComponent, ZippyNgprojectasComponent, ], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/content-projection/src/app/example-zippy.component.ts b/adev/src/content/examples/content-projection/src/app/example-zippy.component.ts index 02ea3adf391..b1654012390 100644 --- a/adev/src/content/examples/content-projection/src/app/example-zippy.component.ts +++ b/adev/src/content/examples/content-projection/src/app/example-zippy.component.ts @@ -1,4 +1,12 @@ -import { Component, Directive, Input, TemplateRef, ContentChild, HostBinding, HostListener } from '@angular/core'; +import { + Component, + Directive, + Input, + TemplateRef, + ContentChild, + HostBinding, + HostListener, +} from '@angular/core'; @Directive({ selector: 'button[appExampleZippyToggle]', @@ -16,7 +24,7 @@ let nextId = 0; // #docregion zippycontentdirective @Directive({ - selector: '[appExampleZippyContent]' + selector: '[appExampleZippyContent]', }) export class ZippyContentDirective { constructor(public templateRef: TemplateRef) {} diff --git a/adev/src/content/examples/content-projection/src/app/zippy-basic/zippy-basic.component.ts b/adev/src/content/examples/content-projection/src/app/zippy-basic/zippy-basic.component.ts index e113405fcac..b2f0b41b9e3 100644 --- a/adev/src/content/examples/content-projection/src/app/zippy-basic/zippy-basic.component.ts +++ b/adev/src/content/examples/content-projection/src/app/zippy-basic/zippy-basic.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-zippy-basic', template: `

    Single-slot content projection

    - ` + `, }) export class ZippyBasicComponent {} diff --git a/adev/src/content/examples/content-projection/src/app/zippy-multislot/zippy-multislot.component.ts b/adev/src/content/examples/content-projection/src/app/zippy-multislot/zippy-multislot.component.ts index 473dd60ada6..a7a04efa6c3 100644 --- a/adev/src/content/examples/content-projection/src/app/zippy-multislot/zippy-multislot.component.ts +++ b/adev/src/content/examples/content-projection/src/app/zippy-multislot/zippy-multislot.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-zippy-multislot', @@ -10,6 +10,6 @@ import { Component } from '@angular/core'; Question: - ` + `, }) export class ZippyMultislotComponent {} diff --git a/adev/src/content/examples/content-projection/src/app/zippy-ngprojectas/zippy-ngprojectas.component.ts b/adev/src/content/examples/content-projection/src/app/zippy-ngprojectas/zippy-ngprojectas.component.ts index edd765bd9ff..4bf736709af 100644 --- a/adev/src/content/examples/content-projection/src/app/zippy-ngprojectas/zippy-ngprojectas.component.ts +++ b/adev/src/content/examples/content-projection/src/app/zippy-ngprojectas/zippy-ngprojectas.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-zippy-ngprojectas', @@ -10,6 +10,6 @@ import { Component } from '@angular/core'; Question: - ` + `, }) export class ZippyNgprojectasComponent {} diff --git a/adev/src/content/examples/content-projection/src/main.ts b/adev/src/content/examples/content-projection/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/content-projection/src/main.ts +++ b/adev/src/content/examples/content-projection/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts index 4d8f95c51c5..c631352c86f 100644 --- a/adev/src/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts @@ -1,95 +1,94 @@ -import { browser, element, by, ElementFinder } from 'protractor'; +import {browser, element, by, ElementFinder} from 'protractor'; describe('Dependency Injection Cookbook', () => { + beforeAll(() => browser.get('')); - beforeAll(() => browser.get('')); + it('should render Logged in User example', async () => { + const loggedInUser = element(by.cssContainingText('h3', 'Logged in user')); + expect(await loggedInUser.isPresent()).toBe(true); + }); - it('should render Logged in User example', async () => { - const loggedInUser = element(by.cssContainingText('h3', 'Logged in user')); - expect(await loggedInUser.isPresent()).toBe(true); + it('"Bombasto" should be the logged in user', async () => { + const loggedInUser = element(by.cssContainingText('div', 'Name: Bombasto')); + expect(await loggedInUser.isPresent()).toBe(true); + }); + + it('should render sorted heroes', async () => { + const sortedHeroes = element(by.cssContainingText('h3', 'Sorted Heroes')); + expect(await sortedHeroes.isPresent()).toBe(true); + + const sortedHeroElems = element.all(by.css('app-sorted-heroes div')); + const sortedHeroNames = await sortedHeroElems.map((elem) => elem?.getText()); + expect(sortedHeroNames).toEqual(['Dr Nice', 'Magma', 'RubberMan']); + }); + + it('should render Hero of the Month', async () => { + const heroOfTheMonth = element(by.cssContainingText('h3', 'Hero of the Month')); + expect(await heroOfTheMonth.isPresent()).toBe(true); + }); + + it('should render Hero Bios', async () => { + const heroBios = element(by.cssContainingText('h3', 'Hero Bios')); + expect(await heroBios.isPresent()).toBe(true); + }); + + it("should render Magma's description in Hero Bios", async () => { + const magmaBioElem = element.all(by.css('app-hero-bio')).get(1); + const magmaNameElem = magmaBioElem.element(by.css('h4')); + const magmaDescElem = magmaBioElem.element(by.css('textarea')); + + expect(await magmaNameElem.getText()).toBe('Magma'); + expect(await magmaDescElem.getAttribute('value')).toBe('Hero of all trades'); + }); + + it("should render Magma's phone in Hero Bios and Contacts", async () => { + const magmaPhone = element(by.cssContainingText('div', 'Phone #: 555-555-5555')); + expect(await magmaPhone.isPresent()).toBe(true); + }); + + it('should render Hero-of-the-Month runner-ups', async () => { + const runnersUp = await element(by.id('rups1')).getText(); + expect(runnersUp).toContain('RubberMan, Dr Nice'); + }); + + it('should render DateLogger log entry in Hero-of-the-Month', async () => { + const logs = await element.all(by.id('logs')).get(0).getText(); + expect(logs).toContain('INFO: starting up at'); + }); + + it('should highlight Hero Bios and Contacts container when mouseover', async () => { + const target = element(by.css('div[appHighlight="yellow"]')); + const yellow = 'rgba(255, 255, 0, 1)'; + + expect(await target.getCssValue('background-color')).not.toEqual(yellow); + + await browser.actions().mouseMove(target).perform(); + + // Wait for up to 2s for the background color to be updated, + // to account for slow environments (e.g. CI). + await browser.wait(async () => (await target.getCssValue('background-color')) === yellow, 2000); + }); + + describe('in Parent Finder', () => { + const cathy1 = element(by.css('alex cathy')); + const craig1 = element(by.css('alex craig')); + const carol1 = element(by.css('alex carol p')); + const carol2 = element(by.css('barry carol p')); + + it('"Cathy" should find "Alex" via the component class', async () => { + expect(await cathy1.getText()).toContain('Found Alex via the component'); }); - it('"Bombasto" should be the logged in user', async () => { - const loggedInUser = element(by.cssContainingText('div', 'Name: Bombasto')); - expect(await loggedInUser.isPresent()).toBe(true); + it('"Craig" should not find "Alex" via the base class', async () => { + expect(await craig1.getText()).toContain('Did not find Alex via the base'); }); - it('should render sorted heroes', async () => { - const sortedHeroes = element(by.cssContainingText('h3', 'Sorted Heroes')); - expect(await sortedHeroes.isPresent()).toBe(true); - - const sortedHeroElems = element.all(by.css('app-sorted-heroes div')); - const sortedHeroNames = await sortedHeroElems.map(elem => elem?.getText()); - expect(sortedHeroNames).toEqual(['Dr Nice', 'Magma', 'RubberMan']); + it('"Carol" within "Alex" should have "Alex" parent', async () => { + expect(await carol1.getText()).toContain('Alex'); }); - it('should render Hero of the Month', async () => { - const heroOfTheMonth = element(by.cssContainingText('h3', 'Hero of the Month')); - expect(await heroOfTheMonth.isPresent()).toBe(true); - }); - - it('should render Hero Bios', async () => { - const heroBios = element(by.cssContainingText('h3', 'Hero Bios')); - expect(await heroBios.isPresent()).toBe(true); - }); - - it("should render Magma's description in Hero Bios", async () => { - const magmaBioElem = element.all(by.css('app-hero-bio')).get(1); - const magmaNameElem = magmaBioElem.element(by.css('h4')); - const magmaDescElem = magmaBioElem.element(by.css('textarea')); - - expect(await magmaNameElem.getText()).toBe('Magma'); - expect(await magmaDescElem.getAttribute('value')).toBe('Hero of all trades'); - }); - - it("should render Magma's phone in Hero Bios and Contacts", async () => { - const magmaPhone = element(by.cssContainingText('div', 'Phone #: 555-555-5555')); - expect(await magmaPhone.isPresent()).toBe(true); - }); - - it('should render Hero-of-the-Month runner-ups', async () => { - const runnersUp = await element(by.id('rups1')).getText(); - expect(runnersUp).toContain('RubberMan, Dr Nice'); - }); - - it('should render DateLogger log entry in Hero-of-the-Month', async () => { - const logs = await element.all(by.id('logs')).get(0).getText(); - expect(logs).toContain('INFO: starting up at'); - }); - - it('should highlight Hero Bios and Contacts container when mouseover', async () => { - const target = element(by.css('div[appHighlight="yellow"]')); - const yellow = 'rgba(255, 255, 0, 1)'; - - expect(await target.getCssValue('background-color')).not.toEqual(yellow); - - await browser.actions().mouseMove(target).perform(); - - // Wait for up to 2s for the background color to be updated, - // to account for slow environments (e.g. CI). - await browser.wait(async () => await target.getCssValue('background-color') === yellow, 2000); - }); - - describe('in Parent Finder', () => { - const cathy1 = element(by.css('alex cathy')); - const craig1 = element(by.css('alex craig')); - const carol1 = element(by.css('alex carol p')); - const carol2 = element(by.css('barry carol p')); - - it('"Cathy" should find "Alex" via the component class', async () => { - expect(await cathy1.getText()).toContain('Found Alex via the component'); - }); - - it('"Craig" should not find "Alex" via the base class', async () => { - expect(await craig1.getText()).toContain('Did not find Alex via the base'); - }); - - it('"Carol" within "Alex" should have "Alex" parent', async () => { - expect(await carol1.getText()).toContain('Alex'); - }); - - it('"Carol" within "Barry" should have "Barry" parent', async () => { - expect(await carol2.getText()).toContain('Barry'); - }); + it('"Carol" within "Barry" should have "Barry" parent', async () => { + expect(await carol2.getText()).toContain('Barry'); }); + }); }); diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/app.component.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/app.component.ts index acbde75ef36..7d0950723ba 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/app.component.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/app.component.ts @@ -1,13 +1,13 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { LoggerService } from './logger.service'; -import { UserContextService } from './user-context.service'; -import { HeroBiosAndContactsComponent, HeroBiosComponent } from './hero-bios.component'; -import { HeroOfTheMonthComponent } from './hero-of-the-month.component'; -import { HeroesBaseComponent, SortedHeroesComponent } from './sorted-heroes.component'; -import { ParentFinderComponent } from './parent-finder.component'; -import { StorageComponent } from './storage.component'; -import { HighlightDirective } from './highlight.directive'; +import {LoggerService} from './logger.service'; +import {UserContextService} from './user-context.service'; +import {HeroBiosAndContactsComponent, HeroBiosComponent} from './hero-bios.component'; +import {HeroOfTheMonthComponent} from './hero-of-the-month.component'; +import {HeroesBaseComponent, SortedHeroesComponent} from './sorted-heroes.component'; +import {ParentFinderComponent} from './parent-finder.component'; +import {StorageComponent} from './storage.component'; +import {HighlightDirective} from './highlight.directive'; @Component({ standalone: true, @@ -21,14 +21,16 @@ import { HighlightDirective } from './highlight.directive'; SortedHeroesComponent, ParentFinderComponent, StorageComponent, - HighlightDirective - ] + HighlightDirective, + ], }) export class AppComponent { - private userId = 1; - constructor(logger: LoggerService, public userContext: UserContextService) { + constructor( + logger: LoggerService, + public userContext: UserContextService, + ) { userContext.loadUser(this.userId); logger.logInfo('AppComponent initialized'); } diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/app.config.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/app.config.ts index 8ed035f6800..188956f0655 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/app.config.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/app.config.ts @@ -1,16 +1,16 @@ -import { HashLocationStrategy, LocationStrategy } from '@angular/common'; -import { ApplicationConfig, importProvidersFrom } from '@angular/core'; -import { provideProtractorTestingSupport } from '@angular/platform-browser'; -import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; -import { HeroData } from './hero-data'; +import {HashLocationStrategy, LocationStrategy} from '@angular/common'; +import {ApplicationConfig, importProvidersFrom} from '@angular/core'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; +import {InMemoryWebApiModule} from 'angular-in-memory-web-api'; +import {HeroData} from './hero-data'; const appConfig: ApplicationConfig = { - providers: [ - // adding protractor support for tests in docs - provideProtractorTestingSupport(), - importProvidersFrom(InMemoryWebApiModule.forRoot(HeroData)), - { provide: LocationStrategy, useClass: HashLocationStrategy }, - ] + providers: [ + // adding protractor support for tests in docs + provideProtractorTestingSupport(), + importProvidersFrom(InMemoryWebApiModule.forRoot(HeroData)), + {provide: LocationStrategy, useClass: HashLocationStrategy}, + ], }; export default appConfig; diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts index 517b231e824..b0aad2e2d09 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts @@ -1,18 +1,25 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { LoggerService } from './logger.service'; +import {LoggerService} from './logger.service'; // #docregion date-logger-service @Injectable({ - providedIn: 'root' + providedIn: 'root', }) -export class DateLoggerService extends LoggerService -{ - override logInfo(msg: any) { super.logInfo(stamp(msg)); } - override logDebug(msg: any) { super.logInfo(stamp(msg)); } - override logError(msg: any) { super.logError(stamp(msg)); } +export class DateLoggerService extends LoggerService { + override logInfo(msg: any) { + super.logInfo(stamp(msg)); + } + override logDebug(msg: any) { + super.logInfo(stamp(msg)); + } + override logError(msg: any) { + super.logError(stamp(msg)); + } } -function stamp(msg: any) { return msg + ' at ' + new Date(); } +function stamp(msg: any) { + return msg + ' at ' + new Date(); +} // #enddocregion date-logger-service diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts index acef7d54bc7..f17d42251fe 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component, Input, OnInit } from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; -import { HeroCacheService } from './hero-cache.service'; -import { FormsModule, NgModel } from '@angular/forms'; +import {HeroCacheService} from './hero-cache.service'; +import {FormsModule, NgModel} from '@angular/forms'; // #docregion component @Component({ @@ -15,16 +15,19 @@ import { FormsModule, NgModel } from '@angular/forms'; `, // #enddocregion template providers: [HeroCacheService], - imports: [FormsModule] + imports: [FormsModule], }) - -export class HeroBioComponent implements OnInit { +export class HeroBioComponent implements OnInit { @Input() heroId = 0; - constructor(private heroCache: HeroCacheService) { } + constructor(private heroCache: HeroCacheService) {} - ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); } + ngOnInit() { + this.heroCache.fetchCachedHero(this.heroId); + } - get hero() { return this.heroCache.hero; } + get hero() { + return this.heroCache.hero; + } } // #enddocregion component diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts index 1497d665459..e8c12e29c40 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts @@ -1,11 +1,11 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { HeroService } from './hero.service'; -import { LoggerService } from './logger.service'; -import { HeroBioComponent } from './hero-bio.component'; -import { HeroContactComponent } from './hero-contact.component'; +import {HeroService} from './hero.service'; +import {LoggerService} from './logger.service'; +import {HeroBioComponent} from './hero-bio.component'; +import {HeroContactComponent} from './hero-contact.component'; //////// HeroBiosComponent //// // #docregion simple @@ -17,14 +17,14 @@ import { HeroContactComponent } from './hero-contact.component'; `, providers: [HeroService], - imports: [HeroBioComponent] + imports: [HeroBioComponent], }) export class HeroBiosComponent { -// #enddocregion simple + // #enddocregion simple constructor(logger: LoggerService) { logger.logInfo('Creating HeroBiosComponent'); } -// #docregion simple + // #docregion simple } // #enddocregion simple @@ -40,7 +40,7 @@ export class HeroBiosComponent { `, // #enddocregion template providers: [HeroService], - imports: [HeroBioComponent, HeroContactComponent] + imports: [HeroBioComponent, HeroContactComponent], }) export class HeroBiosAndContactsComponent { constructor(logger: LoggerService) { diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts index c62157bb002..8493dea0db4 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts @@ -1,8 +1,8 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; +import {Hero} from './hero'; +import {HeroService} from './hero.service'; // #docregion service @Injectable() diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts index 0acb57a1b88..33e2e20d83a 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts @@ -1,10 +1,10 @@ // #docplaster // #docregion -import { Component, Host, Optional } from '@angular/core'; +import {Component, Host, Optional} from '@angular/core'; -import { HeroCacheService } from './hero-cache.service'; -import { LoggerService } from './logger.service'; -import { NgIf } from '@angular/common'; +import {HeroCacheService} from './hero-cache.service'; +import {LoggerService} from './logger.service'; +import {NgIf} from '@angular/common'; // #docregion component @Component({ @@ -16,21 +16,19 @@ import { NgIf } from '@angular/common'; !!! } `, - imports: [NgIf] + imports: [NgIf], }) export class HeroContactComponent { - hasLogger = false; constructor( - // #docregion ctor-params - @Host() // limit to the host component's instance of the HeroCacheService - private heroCache: HeroCacheService, + // #docregion ctor-params + @Host() // limit to the host component's instance of the HeroCacheService + private heroCache: HeroCacheService, - @Host() // limit search for logger; hides the application-wide logger - @Optional() // ok if the logger doesn't exist - private loggerService?: LoggerService - // #enddocregion ctor-params + @Host() // limit search for logger; hides the application-wide logger + @Optional() // ok if the logger doesn't exist + private loggerService?: LoggerService, // #enddocregion ctor-params ) { if (loggerService) { this.hasLogger = true; @@ -38,7 +36,8 @@ export class HeroContactComponent { } } - get phoneNumber() { return this.heroCache.hero.phone; } - + get phoneNumber() { + return this.heroCache.hero.phone; + } } // #enddocregion component diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-data.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-data.ts index 98ca87160e3..bcf7dd05ad3 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-data.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-data.ts @@ -1,5 +1,5 @@ // #docregion -import { Hero } from './hero'; +import {Hero} from './hero'; export class HeroData { createDb() { @@ -7,7 +7,7 @@ export class HeroData { new Hero(1, 'Windstorm'), new Hero(2, 'Bombasto'), new Hero(3, 'Magneta'), - new Hero(4, 'Tornado') + new Hero(4, 'Tornado'), ]; return {heroes}; } diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts index b533d392aa9..276be3d2189 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts @@ -1,21 +1,20 @@ // #docplaster // #docregion injection-token -import { InjectionToken } from '@angular/core'; +import {InjectionToken} from '@angular/core'; export const TITLE = new InjectionToken('title'); // #enddocregion injection-token // #docregion hero-of-the-month -import { Component, Inject } from '@angular/core'; +import {Component, Inject} from '@angular/core'; -import { DateLoggerService } from './date-logger.service'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; -import { LoggerService } from './logger.service'; -import { MinimalLogger } from './minimal-logger.service'; -import { RUNNERS_UP, - runnersUpFactory } from './runners-up'; -import { NgFor } from '@angular/common'; +import {DateLoggerService} from './date-logger.service'; +import {Hero} from './hero'; +import {HeroService} from './hero.service'; +import {LoggerService} from './logger.service'; +import {MinimalLogger} from './minimal-logger.service'; +import {RUNNERS_UP, runnersUpFactory} from './runners-up'; +import {NgFor} from '@angular/common'; // #enddocregion hero-of-the-month // #docregion some-hero @@ -29,33 +28,33 @@ const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555'); templateUrl: './hero-of-the-month.component.html', providers: [ // #docregion use-value - { provide: Hero, useValue: someHero }, + {provide: Hero, useValue: someHero}, // #docregion provide-injection-token - { provide: TITLE, useValue: 'Hero of the Month' }, + {provide: TITLE, useValue: 'Hero of the Month'}, // #enddocregion provide-injection-token // #enddocregion use-value // #docregion use-class - { provide: HeroService, useClass: HeroService }, - { provide: LoggerService, useClass: DateLoggerService }, + {provide: HeroService, useClass: HeroService}, + {provide: LoggerService, useClass: DateLoggerService}, // #enddocregion use-class // #docregion use-existing - { provide: MinimalLogger, useExisting: LoggerService }, + {provide: MinimalLogger, useExisting: LoggerService}, // #enddocregion use-existing // #docregion provide-injection-token, use-factory - { provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService] } + {provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService]}, // #enddocregion provide-injection-token, use-factory ], - imports: [NgFor] + imports: [NgFor], }) export class HeroOfTheMonthComponent { logs: string[] = []; constructor( - logger: MinimalLogger, - public heroOfTheMonth: Hero, - @Inject(RUNNERS_UP) public runnersUp: string, - @Inject(TITLE) public title: string) - { + logger: MinimalLogger, + public heroOfTheMonth: Hero, + @Inject(RUNNERS_UP) public runnersUp: string, + @Inject(TITLE) public title: string, + ) { this.logs = logger.logs; logger.logInfo('starting up'); } diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/hero.service.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/hero.service.ts index 9630f823609..2c7e500f0dc 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/hero.service.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/hero.service.ts @@ -1,21 +1,20 @@ // #docregion -import { Injectable } from '@angular/core'; -import { Hero } from './hero'; +import {Injectable} from '@angular/core'; +import {Hero} from './hero'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class HeroService { - // TODO: move to database private heroes: Array = [ new Hero(1, 'RubberMan', 'Hero of many talents', '123-456-7899'), new Hero(2, 'Magma', 'Hero of all trades', '555-555-5555'), - new Hero(3, 'Dr Nice', 'The name says it all', '111-222-3333') - ]; + new Hero(3, 'Dr Nice', 'The name says it all', '111-222-3333'), + ]; getHeroById(id: number): Hero { - return this.heroes.find(hero => hero.id === id)!; + return this.heroes.find((hero) => hero.id === id)!; } getAllHeroes(): Array { diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/hero.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/hero.ts index c17069e7270..a2024b43a5b 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/hero.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/hero.ts @@ -4,6 +4,6 @@ export class Hero { public id: number, public name: string, public description?: string, - public phone?: string) { - } + public phone?: string, + ) {} } diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts index 6fe0db5e633..b64874c2e05 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts @@ -1,13 +1,12 @@ // #docplaster // #docregion -import { Directive, ElementRef, HostListener, Input } from '@angular/core'; +import {Directive, ElementRef, HostListener, Input} from '@angular/core'; @Directive({ standalone: true, - selector: '[appHighlight]' + selector: '[appHighlight]', }) export class HighlightDirective { - @Input('appHighlight') highlightColor = ''; private el: HTMLElement; diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/logger.service.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/logger.service.ts index a6ef12f44d0..fc1c6ed5203 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/logger.service.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/logger.service.ts @@ -1,15 +1,21 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class LoggerService { logs: string[] = []; - logInfo(msg: any) { this.log(`INFO: ${msg}`); } - logDebug(msg: any) { this.log(`DEBUG: ${msg}`); } - logError(msg: any) { this.log(`ERROR: ${msg}`, true); } + logInfo(msg: any) { + this.log(`INFO: ${msg}`); + } + logDebug(msg: any) { + this.log(`DEBUG: ${msg}`); + } + logError(msg: any) { + this.log(`ERROR: ${msg}`, true); + } private log(msg: any, isErr = false) { this.logs.push(msg); diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts index 6ed2e90e9ba..066cf48c1c4 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts @@ -1,30 +1,32 @@ /* eslint-disable space-before-function-paren */ // #docplaster // #docregion -import { Component, forwardRef, Optional, SkipSelf } from '@angular/core'; +import {Component, forwardRef, Optional, SkipSelf} from '@angular/core'; // A component base class (see AlexComponent) -export abstract class Base { name = 'Count Basie'; } +export abstract class Base { + name = 'Count Basie'; +} // Marker class, used as an interface // #docregion parent -export abstract class Parent { abstract name: string; } +export abstract class Parent { + abstract name: string; +} // #enddocregion parent const DifferentParent = Parent; // Helper method to provide the current component instance in the name of a `parentType`. // The `parentType` defaults to `Parent` when omitting the second parameter. -export function provideParent - (component: any, parentType?: any) { - return { provide: parentType || Parent, useExisting: forwardRef(() => component) }; - } +export function provideParent(component: any, parentType?: any) { + return {provide: parentType || Parent, useExisting: forwardRef(() => component)}; +} // Simpler syntax version that always provides the component in the name of `Parent`. -export function provideTheParent - (component: any) { - return { provide: Parent, useExisting: forwardRef(() => component) }; - } +export function provideTheParent(component: any) { + return {provide: Parent, useExisting: forwardRef(() => component)}; +} ///////// C - Child ////////// const templateC = ` @@ -36,13 +38,13 @@ const templateC = ` @Component({ standalone: true, selector: 'carol', - template: templateC + template: templateC, }) // #docregion carol-class export class CarolComponent { name = 'Carol'; // #docregion carol-ctor - constructor( @Optional() public parent?: Parent ) { } + constructor(@Optional() public parent?: Parent) {} // #enddocregion carol-ctor } // #enddocregion carol-class @@ -50,11 +52,11 @@ export class CarolComponent { @Component({ standalone: true, selector: 'chris', - template: templateC + template: templateC, }) export class ChrisComponent { name = 'Chris'; - constructor( @Optional() public parent?: Parent ) { } + constructor(@Optional() public parent?: Parent) {} } ////// Craig /////////// @@ -69,10 +71,10 @@ export class ChrisComponent {

    Craig

    {{alex ? 'Found' : 'Did not find'}} Alex via the base class. -
    ` + `, }) export class CraigComponent { - constructor( @Optional() public alex?: Base ) { } + constructor(@Optional() public alex?: Base) {} } // #enddocregion craig @@ -90,41 +92,41 @@ const templateB = ` @Component({ standalone: true, - selector: 'barry', - template: templateB, - providers: [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }], - imports: [CarolComponent, ChrisComponent] + selector: 'barry', + template: templateB, + providers: [{provide: Parent, useExisting: forwardRef(() => BarryComponent)}], + imports: [CarolComponent, ChrisComponent], }) export class BarryComponent implements Parent { name = 'Barry'; -// #docregion barry-ctor - constructor( @SkipSelf() @Optional() public parent?: Parent ) { } -// #enddocregion barry-ctor + // #docregion barry-ctor + constructor(@SkipSelf() @Optional() public parent?: Parent) {} + // #enddocregion barry-ctor } // #enddocregion barry @Component({ standalone: true, - selector: 'bob', - template: templateB, - providers: [ provideParent(BobComponent) ], - imports: [CarolComponent, ChrisComponent] + selector: 'bob', + template: templateB, + providers: [provideParent(BobComponent)], + imports: [CarolComponent, ChrisComponent], }) export class BobComponent implements Parent { name = 'Bob'; - constructor( @SkipSelf() @Optional() public parent?: Parent ) { } + constructor(@SkipSelf() @Optional() public parent?: Parent) {} } @Component({ standalone: true, - selector: 'beth', - template: templateB, - providers: [ provideParent(BethComponent, DifferentParent) ], - imports: [CarolComponent, ChrisComponent] + selector: 'beth', + template: templateB, + providers: [provideParent(BethComponent, DifferentParent)], + imports: [CarolComponent, ChrisComponent], }) export class BethComponent implements Parent { name = 'Beth'; - constructor( @SkipSelf() @Optional() public parent?: Parent ) { } + constructor(@SkipSelf() @Optional() public parent?: Parent) {} } ////// Cathy /////////// @@ -139,10 +141,10 @@ export class BethComponent implements Parent {

    Cathy

    {{alex ? 'Found' : 'Did not find'}} Alex via the component class.
    -
    ` + `, }) export class CathyComponent { - constructor( @Optional() public alex?: AlexComponent ) { } + constructor(@Optional() public alex?: AlexComponent) {} } // #enddocregion cathy @@ -159,20 +161,19 @@ export class CathyComponent { `, -// #enddocregion alex-1 -// #docregion alex-providers - providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }], -// #enddocregion alex-providers -// #docregion alex-1 - imports: [CathyComponent, CraigComponent, CarolComponent] + // #enddocregion alex-1 + // #docregion alex-providers + providers: [{provide: Parent, useExisting: forwardRef(() => AlexComponent)}], + // #enddocregion alex-providers + // #docregion alex-1 + imports: [CathyComponent, CraigComponent, CarolComponent], }) // #enddocregion alex-1 // TODO: Add `... implements Parent` to class signature // #docregion alex-1 // #docregion alex-class-signature -export class AlexComponent extends Base // #enddocregion alex-class-signature -{ +export class AlexComponent extends Base { override name = 'Alex'; } // #enddocregion alex-1 @@ -190,13 +191,12 @@ export class AlexComponent extends Base `, - providers: [ provideParent(AliceComponent) ], - imports: [BarryComponent, BethComponent, BobComponent, CarolComponent] + providers: [provideParent(AliceComponent)], + imports: [BarryComponent, BethComponent, BobComponent, CarolComponent], }) // #docregion alice-class-signature -export class AliceComponent implements Parent // #enddocregion alice-class-signature -{ +export class AliceComponent implements Parent { name = 'Alice'; } @@ -208,6 +208,6 @@ export class AliceComponent implements Parent

    Parent Finder

    `, - imports: [AlexComponent, AliceComponent] + imports: [AlexComponent, AliceComponent], }) -export class ParentFinderComponent { } +export class ParentFinderComponent {} diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/runners-up.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/runners-up.ts index a94c25fc824..c8b7009b76c 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/runners-up.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/runners-up.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion -import { InjectionToken } from '@angular/core'; +import {InjectionToken} from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; +import {Hero} from './hero'; +import {HeroService} from './hero.service'; export const RUNNERS_UP = new InjectionToken('RunnersUp'); @@ -11,13 +11,13 @@ export const RUNNERS_UP = new InjectionToken('RunnersUp'); export function runnersUpFactory(take: number) { return (winner: Hero, heroService: HeroService): string => /* ... */ -// #enddocregion factory-synopsis + // #enddocregion factory-synopsis heroService - .getAllHeroes() - .filter((hero) => hero.name !== winner.name) - .map(hero => hero.name) - .slice(0, Math.max(0, take)) - .join(', '); -// #docregion factory-synopsis + .getAllHeroes() + .filter((hero) => hero.name !== winner.name) + .map((hero) => hero.name) + .slice(0, Math.max(0, take)) + .join(', '); + // #docregion factory-synopsis } // #enddocregion factory-synopsis diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts index 7aa266f2295..1c4f505f915 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts @@ -1,10 +1,10 @@ // #docplaster // #docregion -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; -import { NgFor } from '@angular/common'; +import {Hero} from './hero'; +import {HeroService} from './hero.service'; +import {NgFor} from '@angular/common'; /////// HeroesBaseComponent ///// // #docregion heroes-base @@ -13,10 +13,10 @@ import { NgFor } from '@angular/common'; selector: 'app-unsorted-heroes', template: '@for (hero of heroes; track hero) {
    {{hero.name}}
    }', providers: [HeroService], - imports: [NgFor] + imports: [NgFor], }) export class HeroesBaseComponent implements OnInit { - constructor(private heroService: HeroService) { } + constructor(private heroService: HeroService) {} heroes: Hero[] = []; @@ -27,7 +27,6 @@ export class HeroesBaseComponent implements OnInit { // Post-process heroes in derived class override. protected afterGetHeroes() {} - } // #enddocregion heroes-base @@ -38,7 +37,7 @@ export class HeroesBaseComponent implements OnInit { selector: 'app-sorted-heroes', template: '@for (hero of heroes; track hero) {
    {{hero.name}}
    }', providers: [HeroService], - imports: [NgFor] + imports: [NgFor], }) export class SortedHeroesComponent extends HeroesBaseComponent { constructor(heroService: HeroService) { @@ -46,8 +45,9 @@ export class SortedHeroesComponent extends HeroesBaseComponent { } protected override afterGetHeroes() { - this.heroes = this.heroes.sort((h1, h2) => h1.name < h2.name ? -1 : - (h1.name > h2.name ? 1 : 0)); + this.heroes = this.heroes.sort((h1, h2) => + h1.name < h2.name ? -1 : h1.name > h2.name ? 1 : 0, + ); } } // #enddocregion sorted-heroes diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/storage.component.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/storage.component.ts index 1b34f6fbd7b..72180c4bd0c 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/storage.component.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/storage.component.ts @@ -1,6 +1,6 @@ // #docregion -import { Component, OnInit, Self, SkipSelf } from '@angular/core'; -import { BROWSER_STORAGE, BrowserStorageService } from './storage.service'; +import {Component, OnInit, Self, SkipSelf} from '@angular/core'; +import {BROWSER_STORAGE, BrowserStorageService} from './storage.service'; @Component({ standalone: true, @@ -14,17 +14,13 @@ import { BROWSER_STORAGE, BrowserStorageService } from './storage.service';

    Local Storage

    `, - providers: [ - BrowserStorageService, - { provide: BROWSER_STORAGE, useFactory: () => sessionStorage } - ] + providers: [BrowserStorageService, {provide: BROWSER_STORAGE, useFactory: () => sessionStorage}], }) export class StorageComponent { - constructor( @Self() private sessionStorageService: BrowserStorageService, @SkipSelf() private localStorageService: BrowserStorageService, - ) { } + ) {} setSession() { this.sessionStorageService.set('hero', 'Dr Nice - Session'); diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/storage.service.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/storage.service.ts index a31f5a39055..93bab7d2b16 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/storage.service.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/storage.service.ts @@ -1,12 +1,12 @@ -import { Inject, Injectable, InjectionToken } from '@angular/core'; +import {Inject, Injectable, InjectionToken} from '@angular/core'; export const BROWSER_STORAGE = new InjectionToken('Browser Storage', { providedIn: 'root', - factory: () => localStorage + factory: () => localStorage, }); @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class BrowserStorageService { constructor(@Inject(BROWSER_STORAGE) public storage: Storage) {} diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/user-context.service.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/user-context.service.ts index dd725a55814..b786067074f 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/user-context.service.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/user-context.service.ts @@ -1,17 +1,20 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { LoggerService } from './logger.service'; -import { UserService } from './user.service'; +import {LoggerService} from './logger.service'; +import {UserService} from './user.service'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class UserContextService { name = ''; role = ''; loggedInSince: Date; - constructor(private userService: UserService, private loggerService: LoggerService) { + constructor( + private userService: UserService, + private loggerService: LoggerService, + ) { this.loggedInSince = new Date(); } diff --git a/adev/src/content/examples/dependency-injection-in-action/src/app/user.service.ts b/adev/src/content/examples/dependency-injection-in-action/src/app/user.service.ts index 09c1c7b4cd7..709e1880fdf 100644 --- a/adev/src/content/examples/dependency-injection-in-action/src/app/user.service.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/app/user.service.ts @@ -1,11 +1,10 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class UserService { - getUserById(userId: number): any { return {name: 'Bombasto', role: 'Admin'}; } diff --git a/adev/src/content/examples/dependency-injection-in-action/src/main.ts b/adev/src/content/examples/dependency-injection-in-action/src/main.ts index a7cd02bef85..be5ebbc5c7d 100755 --- a/adev/src/content/examples/dependency-injection-in-action/src/main.ts +++ b/adev/src/content/examples/dependency-injection-in-action/src/main.ts @@ -1,6 +1,6 @@ // #docregion -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; import appConfig from './app/app.config'; bootstrapApplication(AppComponent, appConfig); diff --git a/adev/src/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts index 404a11811c3..70898dd3f55 100644 --- a/adev/src/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts @@ -1,14 +1,12 @@ -import { browser, element, by, ElementFinder } from 'protractor'; +import {browser, element, by, ElementFinder} from 'protractor'; describe('Dependency Injection Tests', () => { - let expectedMsg: string; let expectedMsgRx: RegExp; beforeAll(() => browser.get('')); describe('Cars:', () => { - it('DI car displays as expected', async () => { expectedMsg = 'DI car with 4 cylinders and Flintstone tires.'; expect(await element(by.css('#di')).getText()).toEqual(expectedMsg); @@ -57,22 +55,19 @@ describe('Dependency Injection Tests', () => { }); it('Optional injection displays as expected', async () => { - expectedMsg = "R.O.U.S.'s? I don't think they exist!";; + expectedMsg = "R.O.U.S.'s? I don't think they exist!"; expect(await element(by.css('#rodent')).getText()).toEqual(expectedMsg); }); }); describe('Tests:', () => { - it('Tests display as expected', async () => { expectedMsgRx = /Tests passed/; expect(await element(by.css('#tests')).getText()).toMatch(expectedMsgRx); }); - }); describe('Provider variations:', () => { - it('P1 (class) displays as expected', async () => { expectedMsg = 'Hello from logger provided with Logger class'; expect(await element(by.css('#p1')).getText()).toEqual(expectedMsg); @@ -131,8 +126,9 @@ describe('Dependency Injection Tests', () => { }); it('should have button', async () => { - expect(await element.all(by.cssContainingText('button', 'Next User')) - .get(0).isDisplayed()).toBe(true, "'Next User' button should be displayed"); + expect( + await element.all(by.cssContainingText('button', 'Next User')).get(0).isDisplayed(), + ).toBe(true, "'Next User' button should be displayed"); }); it('unauthorized user should have multiple unauthorized heroes', async () => { @@ -144,7 +140,7 @@ describe('Dependency Injection Tests', () => { const heroes = element.all(by.css('#unauthorized app-hero-list div')); expect(await heroes.count()).toBeGreaterThan(0); - const filteredHeroes = heroes.filter(async elem => /secret/.test(await elem.getText())); + const filteredHeroes = heroes.filter(async (elem) => /secret/.test(await elem.getText())); expect(await filteredHeroes.count()).toEqual(0); }); @@ -153,7 +149,6 @@ describe('Dependency Injection Tests', () => { }); describe('after button click', () => { - beforeAll(async () => { const buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0); await buttonEle.click(); @@ -178,7 +173,7 @@ describe('Dependency Injection Tests', () => { const heroes = element.all(by.css('#authorized app-hero-list div')); expect(await heroes.count()).toBeGreaterThan(0); - const filteredHeroes = heroes.filter(async elem => /secret/.test(await elem.getText())); + const filteredHeroes = heroes.filter(async (elem) => /secret/.test(await elem.getText())); expect(await filteredHeroes.count()).toBeGreaterThan(0); }); diff --git a/adev/src/content/examples/dependency-injection/src/app/app.component.1.ts b/adev/src/content/examples/dependency-injection/src/app/app.component.1.ts index 9539441cb76..26df9807ae4 100755 --- a/adev/src/content/examples/dependency-injection/src/app/app.component.1.ts +++ b/adev/src/content/examples/dependency-injection/src/app/app.component.1.ts @@ -1,7 +1,7 @@ // #docregion -import { Component } from '@angular/core'; -import { CarComponent } from './car/car.component'; -import { HeroesComponent } from './heroes/heroes.component'; +import {Component} from '@angular/core'; +import {CarComponent} from './car/car.component'; +import {HeroesComponent} from './heroes/heroes.component'; @Component({ standalone: true, @@ -11,9 +11,8 @@ import { HeroesComponent } from './heroes/heroes.component'; `, - imports: [CarComponent, HeroesComponent] + imports: [CarComponent, HeroesComponent], }) - export class AppComponent { title = 'Dependency Injection'; } diff --git a/adev/src/content/examples/dependency-injection/src/app/app.component.2.ts b/adev/src/content/examples/dependency-injection/src/app/app.component.2.ts index 384ae9a4f5d..36813232ca6 100755 --- a/adev/src/content/examples/dependency-injection/src/app/app.component.2.ts +++ b/adev/src/content/examples/dependency-injection/src/app/app.component.2.ts @@ -1,8 +1,8 @@ -import { Component, Inject } from '@angular/core'; +import {Component, Inject} from '@angular/core'; -import { APP_CONFIG, AppConfig } from './injection.config'; -import { CarComponent } from './car/car.component'; -import { HeroesComponent } from './heroes/heroes.component'; +import {APP_CONFIG, AppConfig} from './injection.config'; +import {CarComponent} from './car/car.component'; +import {HeroesComponent} from './heroes/heroes.component'; @Component({ standalone: true, @@ -12,7 +12,7 @@ import { HeroesComponent } from './heroes/heroes.component'; `, - imports: [CarComponent, HeroesComponent] + imports: [CarComponent, HeroesComponent], }) export class AppComponent { title: string; diff --git a/adev/src/content/examples/dependency-injection/src/app/app.component.ts b/adev/src/content/examples/dependency-injection/src/app/app.component.ts index 2ef477c2ab8..cc5fec68864 100755 --- a/adev/src/content/examples/dependency-injection/src/app/app.component.ts +++ b/adev/src/content/examples/dependency-injection/src/app/app.component.ts @@ -1,19 +1,19 @@ -import { Component, Inject } from '@angular/core'; +import {Component, Inject} from '@angular/core'; -import { APP_CONFIG, AppConfig } from './injection.config'; -import { UserService } from './user.service'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroesTspComponent } from './heroes/heroes-tsp.component'; -import { ProvidersComponent } from './providers.component'; -import { CarComponent } from './car/car.component'; -import { InjectorComponent } from './injector.component'; -import { TestComponent } from './test.component'; -import { NgIf } from '@angular/common'; +import {APP_CONFIG, AppConfig} from './injection.config'; +import {UserService} from './user.service'; +import {HeroesComponent} from './heroes/heroes.component'; +import {HeroesTspComponent} from './heroes/heroes-tsp.component'; +import {ProvidersComponent} from './providers.component'; +import {CarComponent} from './car/car.component'; +import {InjectorComponent} from './injector.component'; +import {TestComponent} from './test.component'; +import {NgIf} from '@angular/common'; @Component({ standalone: true, selector: 'app-root', - template: ` + template: `

    {{title}}

    @@ -41,24 +41,32 @@ import { NgIf } from '@angular/common'; CarComponent, InjectorComponent, TestComponent, - NgIf - ] + NgIf, + ], }) export class AppComponent { title: string; constructor( @Inject(APP_CONFIG) config: AppConfig, - private userService: UserService) { + private userService: UserService, + ) { this.title = config.title; } - get isAuthorized() { return this.user.isAuthorized; } - nextUser() { this.userService.getNewUser(); } - get user() { return this.userService.user; } + get isAuthorized() { + return this.user.isAuthorized; + } + nextUser() { + this.userService.getNewUser(); + } + get user() { + return this.userService.user; + } - get userInfo() { - return `Current user, ${this.user.name}, is ` + - `${this.isAuthorized ? '' : 'not'} authorized. `; + get userInfo() { + return ( + `Current user, ${this.user.name}, is ` + `${this.isAuthorized ? '' : 'not'} authorized. ` + ); } } diff --git a/adev/src/content/examples/dependency-injection/src/app/app.config.ts b/adev/src/content/examples/dependency-injection/src/app/app.config.ts index 572d5d76b93..32158046b4f 100644 --- a/adev/src/content/examples/dependency-injection/src/app/app.config.ts +++ b/adev/src/content/examples/dependency-injection/src/app/app.config.ts @@ -1,16 +1,16 @@ -import { ApplicationConfig } from '@angular/core'; -import { Logger } from './logger.service'; -import { UserService } from './user.service'; -import { APP_CONFIG, HERO_DI_CONFIG } from './injection.config'; -import { provideProtractorTestingSupport } from '@angular/platform-browser'; +import {ApplicationConfig} from '@angular/core'; +import {Logger} from './logger.service'; +import {UserService} from './user.service'; +import {APP_CONFIG, HERO_DI_CONFIG} from './injection.config'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; const appConfig: ApplicationConfig = { - providers: [ - provideProtractorTestingSupport(), - Logger, - UserService, - { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } - ] + providers: [ + provideProtractorTestingSupport(), + Logger, + UserService, + {provide: APP_CONFIG, useValue: HERO_DI_CONFIG}, + ], }; export default appConfig; diff --git a/adev/src/content/examples/dependency-injection/src/app/car/car-creations.ts b/adev/src/content/examples/dependency-injection/src/app/car/car-creations.ts index 5c4119278c8..289263d64b4 100644 --- a/adev/src/content/examples/dependency-injection/src/app/car/car-creations.ts +++ b/adev/src/content/examples/dependency-injection/src/app/car/car-creations.ts @@ -1,6 +1,6 @@ // Examples with car and engine variations -import { Car, Engine, Tires } from './car'; +import {Car, Engine, Tires} from './car'; ///////// example 1 //////////// export function simpleCar() { @@ -10,10 +10,9 @@ export function simpleCar() { return car; } - ///////// example 2 //////////// class Engine2 { - constructor(public cylinders: number) { } + constructor(public cylinders: number) {} } export function superCar() { @@ -25,8 +24,12 @@ export function superCar() { } /////////// example 3 ////////// -class MockEngine extends Engine { override cylinders = 8; } -class MockTires extends Tires { override make = 'YokoGoodStone'; } +class MockEngine extends Engine { + override cylinders = 8; +} +class MockTires extends Tires { + override make = 'YokoGoodStone'; +} export function testCar() { // Test car with 8 cylinders and YokoGoodStone tires. diff --git a/adev/src/content/examples/dependency-injection/src/app/car/car-factory.ts b/adev/src/content/examples/dependency-injection/src/app/car/car-factory.ts index ed759137e6e..409233fccce 100644 --- a/adev/src/content/examples/dependency-injection/src/app/car/car-factory.ts +++ b/adev/src/content/examples/dependency-injection/src/app/car/car-factory.ts @@ -1,5 +1,5 @@ // #docregion -import { Engine, Tires, Car } from './car'; +import {Engine, Tires, Car} from './car'; // BAD pattern! export class CarFactory { diff --git a/adev/src/content/examples/dependency-injection/src/app/car/car-injector.ts b/adev/src/content/examples/dependency-injection/src/app/car/car-injector.ts index ba2449b6ff8..a0ac863a81f 100644 --- a/adev/src/content/examples/dependency-injection/src/app/car/car-injector.ts +++ b/adev/src/content/examples/dependency-injection/src/app/car/car-injector.ts @@ -1,7 +1,7 @@ -import { Injector } from '@angular/core'; +import {Injector} from '@angular/core'; -import { Car, Engine, Tires } from './car'; -import { Logger } from '../logger.service'; +import {Car, Engine, Tires} from './car'; +import {Logger} from '../logger.service'; export function useInjector() { let injector: Injector; @@ -15,16 +15,16 @@ export function useInjector() { */ injector = Injector.create({ providers: [ - { provide: Car, deps: [Engine, Tires] }, - { provide: Engine, deps: [] }, - { provide: Tires, deps: [] } - ] + {provide: Car, deps: [Engine, Tires]}, + {provide: Engine, deps: []}, + {provide: Tires, deps: []}, + ], }); const car = injector.get(Car); car.description = 'Injector'; injector = Injector.create({ - providers: [{ provide: Logger, deps: [] }] + providers: [{provide: Logger, deps: []}], }); const logger = injector.get(Logger); logger.log('Injector car.drive() said: ' + car.drive()); diff --git a/adev/src/content/examples/dependency-injection/src/app/car/car-no-di.ts b/adev/src/content/examples/dependency-injection/src/app/car/car-no-di.ts index 07a5864fa1f..a455580a216 100644 --- a/adev/src/content/examples/dependency-injection/src/app/car/car-no-di.ts +++ b/adev/src/content/examples/dependency-injection/src/app/car/car-no-di.ts @@ -1,8 +1,7 @@ // Car without DI -import { Engine, Tires } from './car'; +import {Engine, Tires} from './car'; export class Car { - public engine: Engine; public tires: Tires; public description = 'No DI'; @@ -14,7 +13,9 @@ export class Car { // Method using the engine and tires drive() { - return `${this.description} car with ` + - `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; + return ( + `${this.description} car with ` + + `${this.engine.cylinders} cylinders and ${this.tires.make} tires.` + ); } } diff --git a/adev/src/content/examples/dependency-injection/src/app/car/car.component.ts b/adev/src/content/examples/dependency-injection/src/app/car/car.component.ts index ab6a0a1bb80..029956e4f69 100755 --- a/adev/src/content/examples/dependency-injection/src/app/car/car.component.ts +++ b/adev/src/content/examples/dependency-injection/src/app/car/car.component.ts @@ -1,16 +1,13 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Car, Engine, Tires } from './car'; -import { Car as CarNoDi } from './car-no-di'; -import { CarFactory } from './car-factory'; +import {Car, Engine, Tires} from './car'; +import {Car as CarNoDi} from './car-no-di'; +import {CarFactory} from './car-factory'; -import { testCar, - simpleCar, - superCar } from './car-creations'; - -import { useInjector } from './car-injector'; +import {testCar, simpleCar, superCar} from './car-creations'; +import {useInjector} from './car-injector'; @Component({ standalone: true, @@ -25,15 +22,15 @@ import { useInjector } from './car-injector';
    {{superCar.drive()}}
    {{testCar.drive()}}
    `, - providers: [Car, Engine, Tires] + providers: [Car, Engine, Tires], }) export class CarComponent { - factoryCar = (new CarFactory()).createCar(); + factoryCar = new CarFactory().createCar(); injectorCar = useInjector(); - noDiCar = new CarNoDi(); - simpleCar = simpleCar(); - superCar = superCar(); - testCar = testCar(); + noDiCar = new CarNoDi(); + simpleCar = simpleCar(); + superCar = superCar(); + testCar = testCar(); constructor(public car: Car) {} } diff --git a/adev/src/content/examples/dependency-injection/src/app/car/car.ts b/adev/src/content/examples/dependency-injection/src/app/car/car.ts index 04b87c02841..ba392feee8f 100644 --- a/adev/src/content/examples/dependency-injection/src/app/car/car.ts +++ b/adev/src/content/examples/dependency-injection/src/app/car/car.ts @@ -1,11 +1,11 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; export class Engine { public cylinders = 4; } export class Tires { - public make = 'Flintstone'; + public make = 'Flintstone'; public model = 'Square'; } @@ -13,11 +13,16 @@ export class Tires { export class Car { public description = 'DI'; - constructor(public engine: Engine, public tires: Tires) { } + constructor( + public engine: Engine, + public tires: Tires, + ) {} // Method using the engine and tires drive() { - return `${this.description} car with ` + - `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; + return ( + `${this.description} car with ` + + `${this.engine.cylinders} cylinders and ${this.tires.make} tires.` + ); } } diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/dummy.module.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/dummy.module.ts index 2e1f0017712..c735a0f63f2 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/dummy.module.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/dummy.module.ts @@ -1,35 +1,34 @@ - /// Dummy modules to satisfy Angular Language Service -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; //////// -import { HeroListComponent as HeroListComponent1 } from './hero-list.component.1'; +import {HeroListComponent as HeroListComponent1} from './hero-list.component.1'; @NgModule({ - imports: [ CommonModule ], - declarations: [ HeroListComponent1 ], - exports: [ HeroListComponent1 ] + imports: [CommonModule], + declarations: [HeroListComponent1], + exports: [HeroListComponent1], }) export class DummyModule1 {} ///////// -import { HeroListComponent as HeroListComponent2 } from './hero-list.component.2'; +import {HeroListComponent as HeroListComponent2} from './hero-list.component.2'; @NgModule({ - imports: [ CommonModule ], - declarations: [ HeroListComponent2 ] + imports: [CommonModule], + declarations: [HeroListComponent2], }) export class DummyModule2 {} ///////// -import { HeroesComponent as HeroesComponent1 } from './heroes.component.1'; +import {HeroesComponent as HeroesComponent1} from './heroes.component.1'; @NgModule({ - imports: [ CommonModule, DummyModule1 ], - declarations: [ HeroesComponent1 ] + imports: [CommonModule, DummyModule1], + declarations: [HeroesComponent1], }) export class DummyModule3 {} diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts index 349ee679138..2638923c106 100755 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts @@ -1,6 +1,6 @@ -import { NgFor } from '@angular/common'; -import { Component } from '@angular/core'; -import { HEROES } from './mock-heroes'; +import {NgFor} from '@angular/common'; +import {Component} from '@angular/core'; +import {HEROES} from './mock-heroes'; @Component({ standalone: true, @@ -10,7 +10,7 @@ import { HEROES } from './mock-heroes';
    {{hero.id}} - {{hero.name}}
    } `, - imports: [NgFor] + imports: [NgFor], }) export class HeroListComponent { heroes = HEROES; diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts index 12df4428220..51424071912 100755 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts @@ -1,10 +1,10 @@ // #docplaster // #docregion -import { NgFor } from '@angular/common'; -import { Component } from '@angular/core'; -import { Hero } from './hero'; +import {NgFor} from '@angular/common'; +import {Component} from '@angular/core'; +import {Hero} from './hero'; // #enddocregion -import { HeroService } from './hero.service.1'; +import {HeroService} from './hero.service.1'; /* // #docregion import { HeroService } from './hero.service'; @@ -20,7 +20,7 @@ import { HeroService } from './hero.service';
    {{hero.id}} - {{hero.name}}
    } `, - imports: [NgFor] + imports: [NgFor], }) export class HeroListComponent { heroes: Hero[]; diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts index b20178d1d49..2e381b2e57c 100755 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component } from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; -import { NgFor } from '@angular/common'; +import {Component} from '@angular/core'; +import {Hero} from './hero'; +import {HeroService} from './hero.service'; +import {NgFor} from '@angular/common'; @Component({ standalone: true, @@ -15,15 +15,15 @@ import { NgFor } from '@angular/common'; } `, - imports: [NgFor] + imports: [NgFor], }) export class HeroListComponent { heroes: Hero[]; // #docregion ctor-signature - constructor(heroService: HeroService) - // #enddocregion ctor-signature - { + constructor( + heroService: HeroService, // #enddocregion ctor-signature + ) { this.heroes = heroService.getHeroes(); } } diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts index eeb7fad3019..afbf419544b 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts @@ -1,8 +1,6 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ providedIn: 'root', }) -export class HeroService { - -} +export class HeroService {} diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts index 3ee96adca1a..dbf412c8148 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts @@ -1,10 +1,12 @@ // #docregion -import { Injectable } from '@angular/core'; -import { HEROES } from './mock-heroes'; +import {Injectable} from '@angular/core'; +import {HEROES} from './mock-heroes'; @Injectable({ providedIn: 'root', }) export class HeroService { - getHeroes() { return HEROES; } + getHeroes() { + return HEROES; + } } diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts index f0eb33de0cb..32833f28a6e 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts @@ -1,13 +1,12 @@ -import { Injectable } from '@angular/core'; -import { HEROES } from './mock-heroes'; -import { Logger } from '../logger.service'; +import {Injectable} from '@angular/core'; +import {HEROES} from './mock-heroes'; +import {Logger} from '../logger.service'; @Injectable({ providedIn: 'root', }) export class HeroService { - - constructor(private logger: Logger) { } + constructor(private logger: Logger) {} getHeroes() { this.logger.log('Getting heroes ...'); diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts index 402c5292ea5..9837be3a74d 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts @@ -1,6 +1,6 @@ // #docregion -import { Injectable } from '@angular/core'; -import { HEROES } from './mock-heroes'; +import {Injectable} from '@angular/core'; +import {HEROES} from './mock-heroes'; @Injectable({ // declares that this service should be created @@ -8,5 +8,7 @@ import { HEROES } from './mock-heroes'; providedIn: 'root', }) export class HeroService { - getHeroes() { return HEROES; } + getHeroes() { + return HEROES; + } } diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.5.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.5.ts index 5ab112158a7..7b444dbf89c 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.5.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.5.ts @@ -1,12 +1,10 @@ // #docregion -import { EnvironmentInjector, inject, Injectable, runInInjectionContext } from '@angular/core'; +import {EnvironmentInjector, inject, Injectable, runInInjectionContext} from '@angular/core'; -@Injectable({providedIn: - 'root' -}) +@Injectable({providedIn: 'root'}) export class SomeService {} - // #docregion run-in-context +// #docregion run-in-context @Injectable({ providedIn: 'root', }) diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts index ff07716d3f3..529536d9ab2 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts @@ -1,7 +1,7 @@ // #docregion -import { HeroService } from './hero.service'; -import { Logger } from '../logger.service'; -import { UserService } from '../user.service'; +import {HeroService} from './hero.service'; +import {Logger} from '../logger.service'; +import {UserService} from '../user.service'; // #docregion factory const heroServiceFactory = (logger: Logger, userService: UserService) => @@ -9,9 +9,9 @@ const heroServiceFactory = (logger: Logger, userService: UserService) => // #enddocregion factory // #docregion provider -export const heroServiceProvider = - { provide: HeroService, - useFactory: heroServiceFactory, - deps: [Logger, UserService] - }; +export const heroServiceProvider = { + provide: HeroService, + useFactory: heroServiceFactory, + deps: [Logger, UserService], +}; // #enddocregion provider diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.ts index 7d022131536..2caf09cf83b 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/hero.service.ts @@ -1,25 +1,26 @@ // #docregion -import { Injectable } from '@angular/core'; -import { HEROES } from './mock-heroes'; -import { Logger } from '../logger.service'; -import { UserService } from '../user.service'; +import {Injectable} from '@angular/core'; +import {HEROES} from './mock-heroes'; +import {Logger} from '../logger.service'; +import {UserService} from '../user.service'; @Injectable({ providedIn: 'root', useFactory: (logger: Logger, userService: UserService) => - new HeroService(logger, userService.user.isAuthorized), + new HeroService(logger, userService.user.isAuthorized), deps: [Logger, UserService], }) export class HeroService { // #docregion internals constructor( private logger: Logger, - private isAuthorized: boolean) { } + private isAuthorized: boolean, + ) {} getHeroes() { const auth = this.isAuthorized ? 'authorized ' : 'unauthorized'; this.logger.log(`Getting heroes for ${auth} user.`); - return HEROES.filter(hero => this.isAuthorized || !hero.isSecret); + return HEROES.filter((hero) => this.isAuthorized || !hero.isSecret); } // #enddocregion internals } diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts index f0be2bd82c3..07a63e4bbde 100755 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { HeroListComponent } from './hero-list.component'; +import {Component} from '@angular/core'; +import {HeroListComponent} from './hero-list.component'; /** * A version of `HeroesComponent` that does not provide the `HeroService` (and thus relies on its @@ -14,6 +14,6 @@ import { HeroListComponent } from './hero-list.component';

    Heroes

    `, - imports: [HeroListComponent] + imports: [HeroListComponent], }) -export class HeroesTspComponent { } +export class HeroesTspComponent {} diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts index 5b3b2200d70..68d8a2f65f3 100755 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts @@ -1,16 +1,16 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { HeroService } from './hero.service'; -import { HeroListComponent } from './hero-list.component'; +import {HeroService} from './hero.service'; +import {HeroListComponent} from './hero-list.component'; @Component({ standalone: true, selector: 'app-heroes', - providers: [ HeroService ], + providers: [HeroService], template: `

    Heroes

    `, - imports: [HeroListComponent] + imports: [HeroListComponent], }) -export class HeroesComponent { } +export class HeroesComponent {} diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.ts index 6d87b5f9d4f..ccba9bdd586 100755 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.ts @@ -1,16 +1,16 @@ // #docregion -import { Component } from '@angular/core'; -import { heroServiceProvider } from './hero.service.provider'; -import { HeroListComponent } from './hero-list.component'; +import {Component} from '@angular/core'; +import {heroServiceProvider} from './hero.service.provider'; +import {HeroListComponent} from './hero-list.component'; @Component({ standalone: true, selector: 'app-heroes', - providers: [ heroServiceProvider ], + providers: [heroServiceProvider], template: `

    Heroes

    `, - imports: [HeroListComponent] + imports: [HeroListComponent], }) -export class HeroesComponent { } +export class HeroesComponent {} diff --git a/adev/src/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts b/adev/src/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts index c6eb57c4811..32c2c78412a 100644 --- a/adev/src/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts +++ b/adev/src/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts @@ -1,14 +1,14 @@ // #docregion -import { Hero } from './hero'; +import {Hero} from './hero'; export const HEROES: Hero[] = [ - { id: 12, isSecret: false, name: 'Dr. Nice' }, - { id: 13, isSecret: false, name: 'Bombasto' }, - { id: 14, isSecret: false, name: 'Celeritas' }, - { id: 15, isSecret: false, name: 'Magneta' }, - { id: 16, isSecret: false, name: 'RubberMan' }, - { id: 17, isSecret: false, name: 'Dynama' }, - { id: 18, isSecret: true, name: 'Dr. IQ' }, - { id: 19, isSecret: true, name: 'Magma' }, - { id: 20, isSecret: true, name: 'Tornado' } + {id: 12, isSecret: false, name: 'Dr. Nice'}, + {id: 13, isSecret: false, name: 'Bombasto'}, + {id: 14, isSecret: false, name: 'Celeritas'}, + {id: 15, isSecret: false, name: 'Magneta'}, + {id: 16, isSecret: false, name: 'RubberMan'}, + {id: 17, isSecret: false, name: 'Dynama'}, + {id: 18, isSecret: true, name: 'Dr. IQ'}, + {id: 19, isSecret: true, name: 'Magma'}, + {id: 20, isSecret: true, name: 'Tornado'}, ]; diff --git a/adev/src/content/examples/dependency-injection/src/app/injection.config.ts b/adev/src/content/examples/dependency-injection/src/app/injection.config.ts index 3e86786964e..4a76a54d7b7 100755 --- a/adev/src/content/examples/dependency-injection/src/app/injection.config.ts +++ b/adev/src/content/examples/dependency-injection/src/app/injection.config.ts @@ -1,13 +1,13 @@ -import { AppConfig } from './app-config'; -export { AppConfig } from './app-config'; +import {AppConfig} from './app-config'; +export {AppConfig} from './app-config'; // #docregion token -import { InjectionToken } from '@angular/core'; +import {InjectionToken} from '@angular/core'; export const APP_CONFIG = new InjectionToken('app.config'); // #enddocregion token export const HERO_DI_CONFIG: AppConfig = { apiEndpoint: 'api.heroes.com', - title: 'Dependency Injection' + title: 'Dependency Injection', }; diff --git a/adev/src/content/examples/dependency-injection/src/app/injector.component.ts b/adev/src/content/examples/dependency-injection/src/app/injector.component.ts index 00f6a45cb9b..f0720a8b983 100755 --- a/adev/src/content/examples/dependency-injection/src/app/injector.component.ts +++ b/adev/src/content/examples/dependency-injection/src/app/injector.component.ts @@ -1,12 +1,12 @@ // #docplaster // #docregion -import { Component, Injector } from '@angular/core'; +import {Component, Injector} from '@angular/core'; -import { Car, Engine, Tires } from './car/car'; -import { Hero } from './heroes/hero'; -import { HeroService } from './heroes/hero.service'; -import { heroServiceProvider } from './heroes/hero.service.provider'; -import { Logger } from './logger.service'; +import {Car, Engine, Tires} from './car/car'; +import {Hero} from './heroes/hero'; +import {HeroService} from './heroes/hero.service'; +import {heroServiceProvider} from './heroes/hero.service.provider'; +import {Logger} from './logger.service'; @Component({ standalone: true, @@ -17,7 +17,7 @@ import { Logger } from './logger.service';
    {{hero.name}}
    {{rodent}}
    `, - providers: [Car, Engine, Tires, heroServiceProvider, Logger] + providers: [Car, Engine, Tires, heroServiceProvider, Logger], }) export class InjectorComponent { car: Car; @@ -41,4 +41,4 @@ export class InjectorComponent { * R.O.U.S. - Rodents Of Unusual Size * // https://www.youtube.com/watch?v=BOv5ZjAOpC8 */ -class ROUS { } +class ROUS {} diff --git a/adev/src/content/examples/dependency-injection/src/app/logger.service.ts b/adev/src/content/examples/dependency-injection/src/app/logger.service.ts index 3dd172c5f35..0a132328a11 100644 --- a/adev/src/content/examples/dependency-injection/src/app/logger.service.ts +++ b/adev/src/content/examples/dependency-injection/src/app/logger.service.ts @@ -1,8 +1,8 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class Logger { logs: string[] = []; // capture logs for testing diff --git a/adev/src/content/examples/dependency-injection/src/app/providers.component.ts b/adev/src/content/examples/dependency-injection/src/app/providers.component.ts index d4327d5765d..29f7216db13 100755 --- a/adev/src/content/examples/dependency-injection/src/app/providers.component.ts +++ b/adev/src/content/examples/dependency-injection/src/app/providers.component.ts @@ -2,17 +2,14 @@ * A collection of demo components showing different ways to provide services * in @Component metadata */ -import { Component, Inject, Injectable, OnInit } from '@angular/core'; +import {Component, Inject, Injectable, OnInit} from '@angular/core'; -import { - APP_CONFIG, - AppConfig, - HERO_DI_CONFIG } from './injection.config'; +import {APP_CONFIG, AppConfig, HERO_DI_CONFIG} from './injection.config'; -import { HeroService } from './heroes/hero.service'; -import { heroServiceProvider } from './heroes/hero.service.provider'; -import { Logger } from './logger.service'; -import { UserService } from './user.service'; +import {HeroService} from './heroes/hero.service'; +import {heroServiceProvider} from './heroes/hero.service.provider'; +import {Logger} from './logger.service'; +import {UserService} from './user.service'; const template = '{{log}}'; @@ -40,8 +37,8 @@ export class Provider1Component { template, providers: // #docregion providers-3 - [{ provide: Logger, useClass: Logger }] - // #enddocregion providers-3 + [{provide: Logger, useClass: Logger}], + // #enddocregion providers-3 }) export class Provider3Component { log: string; @@ -60,8 +57,8 @@ export class BetterLogger extends Logger {} template, providers: // #docregion providers-4 - [{ provide: Logger, useClass: BetterLogger }] - // #enddocregion providers-4 + [{provide: Logger, useClass: BetterLogger}], + // #enddocregion providers-4 }) export class Provider4Component { log: string; @@ -76,7 +73,9 @@ export class Provider4Component { // #docregion EvenBetterLogger @Injectable() export class EvenBetterLogger extends Logger { - constructor(private userService: UserService) { super(); } + constructor(private userService: UserService) { + super(); + } override log(message: string) { const name = this.userService.user.name; @@ -91,9 +90,8 @@ export class EvenBetterLogger extends Logger { template, providers: // #docregion providers-5 - [ UserService, - { provide: Logger, useClass: EvenBetterLogger }] - // #enddocregion providers-5 + [UserService, {provide: Logger, useClass: EvenBetterLogger}], + // #enddocregion providers-5 }) export class Provider5Component { log: string; @@ -118,10 +116,11 @@ export class OldLogger { standalone: true, selector: 'provider-6a', template, - providers: - [ NewLogger, - // Not aliased! Creates two instances of `NewLogger` - { provide: OldLogger, useClass: NewLogger}] + providers: [ + NewLogger, + // Not aliased! Creates two instances of `NewLogger` + {provide: OldLogger, useClass: NewLogger}, + ], }) export class Provider6aComponent { log: string; @@ -142,10 +141,12 @@ export class Provider6aComponent { template, providers: // #docregion providers-6b - [ NewLogger, + [ + NewLogger, // Alias OldLogger w/ reference to NewLogger - { provide: OldLogger, useExisting: NewLogger}] - // #enddocregion providers-6b + {provide: OldLogger, useExisting: NewLogger}, + ], + // #enddocregion providers-6b }) export class Provider6bComponent { log: string; @@ -165,15 +166,14 @@ function silentLoggerFn() {} export const SilentLogger = { logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'], - log: silentLoggerFn + log: silentLoggerFn, }; @Component({ standalone: true, selector: 'provider-7', template, - providers: - [{ provide: Logger, useValue: SilentLogger }] + providers: [{provide: Logger, useValue: SilentLogger}], }) export class Provider7Component { log: string; @@ -189,13 +189,13 @@ export class Provider7Component { standalone: true, selector: 'provider-8', template, - providers: [heroServiceProvider, Logger, UserService] + providers: [heroServiceProvider, Logger, UserService], }) export class Provider8Component { // must be true else this component would have blown up at runtime log = 'Hero service injected successfully via heroServiceProvider'; - constructor(heroService: HeroService) { } + constructor(heroService: HeroService) {} } ///////////////// @@ -211,7 +211,7 @@ export class Provider8Component { // #enddocregion providers-9-interface */ // #docregion providers-9 - providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }] + providers: [{provide: APP_CONFIG, useValue: HERO_DI_CONFIG}], // #enddocregion providers-9 }) export class Provider9Component implements OnInit { @@ -222,17 +222,17 @@ export class Provider9Component implements OnInit { constructor(private config: AppConfig){ } // #enddocregion provider-9-ctor-interface */ - constructor(@Inject(APP_CONFIG) private config: AppConfig) { } + constructor(@Inject(APP_CONFIG) private config: AppConfig) {} ngOnInit() { - this.log = 'APP_CONFIG Application title is ' + this.config.title; + this.log = 'APP_CONFIG Application title is ' + this.config.title; } } ////////////////////////////////////////// // Sample providers 1 to 7 illustrate a required logger dependency. // Optional logger, can be null -import { Optional } from '@angular/core'; +import {Optional} from '@angular/core'; const someMessage = 'Hello from the injected logger'; @@ -240,7 +240,7 @@ const someMessage = 'Hello from the injected logger'; standalone: true, selector: 'provider-10', template, - providers: [{ provide: Logger, useValue: null }] + providers: [{provide: Logger, useValue: null}], }) export class Provider10Component implements OnInit { log = ''; @@ -283,7 +283,7 @@ export class Provider10Component implements OnInit { Provider7Component, Provider8Component, Provider9Component, - Provider10Component - ] + Provider10Component, + ], }) -export class ProvidersComponent { } +export class ProvidersComponent {} diff --git a/adev/src/content/examples/dependency-injection/src/app/providers.module.ts b/adev/src/content/examples/dependency-injection/src/app/providers.module.ts index 5dc27192a8b..4fc63a55f01 100644 --- a/adev/src/content/examples/dependency-injection/src/app/providers.module.ts +++ b/adev/src/content/examples/dependency-injection/src/app/providers.module.ts @@ -1,4 +1,4 @@ -import { NgModule } from '@angular/core'; +import {NgModule} from '@angular/core'; import { Provider1Component, @@ -28,6 +28,6 @@ import { Provider10Component, ProvidersComponent, ], - exports: [ ProvidersComponent ] - }) - export class ProvidersModule {} + exports: [ProvidersComponent], +}) +export class ProvidersModule {} diff --git a/adev/src/content/examples/dependency-injection/src/app/test.component.ts b/adev/src/content/examples/dependency-injection/src/app/test.component.ts index 4d243e2ac8d..d5acc67b718 100755 --- a/adev/src/content/examples/dependency-injection/src/app/test.component.ts +++ b/adev/src/content/examples/dependency-injection/src/app/test.component.ts @@ -1,11 +1,11 @@ // Simulate a simple test // Reader should look to the testing chapter for the real thing -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Hero } from './heroes/hero'; -import { HeroService } from './heroes/hero.service'; -import { HeroListComponent } from './heroes/hero-list.component'; +import {Hero} from './heroes/hero'; +import {HeroService} from './heroes/hero.service'; +import {HeroListComponent} from './heroes/hero-list.component'; @Component({ standalone: true, @@ -13,7 +13,7 @@ import { HeroListComponent } from './heroes/hero-list.component'; template: `

    Tests

    Tests {{results.pass}}: {{results.message}}

    - ` + `, }) export class TestComponent { results = runTests(); @@ -21,9 +21,8 @@ export class TestComponent { ///////////////////////////////////// function runTests() { - const expectedHeroes = [{name: 'A'}, {name: 'B'}]; - const mockService = {getHeroes: () => expectedHeroes } as HeroService; + const mockService = {getHeroes: () => expectedHeroes} as HeroService; it('should have heroes when HeroListComponent created', () => { // Pass the mock to the constructor as the Angular injector would @@ -37,15 +36,16 @@ function runTests() { ////////////////////////////////// // Fake Jasmine infrastructure let testName: string; -let testResults: {pass: string, message: string}; +let testResults: {pass: string; message: string}; function expect(actual: any) { return { toEqual: (expected: any) => { - testResults = actual === expected ? - {pass: 'passed', message: testName} : - {pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`}; - } + testResults = + actual === expected + ? {pass: 'passed', message: testName} + : {pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`}; + }, }; } diff --git a/adev/src/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts b/adev/src/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts index a42ee57bfc3..5b998b6f4f6 100644 --- a/adev/src/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts +++ b/adev/src/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts @@ -1,15 +1,10 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; -import { ServiceModule } from './service-and-module'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; +import {ServiceModule} from './service-and-module'; // #docregion @NgModule({ - imports: [ - BrowserModule, - RouterModule.forRoot([]), - ServiceModule, - ], + imports: [BrowserModule, RouterModule.forRoot([]), ServiceModule], }) -export class AppModule { -} +export class AppModule {} diff --git a/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts b/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts index 11100e3ffe9..62492b3e867 100644 --- a/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts +++ b/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts @@ -1,14 +1,12 @@ // #docregion -import { Injectable, NgModule } from '@angular/core'; +import {Injectable, NgModule} from '@angular/core'; @Injectable() export class Service { - doSomething(): void { - } + doSomething(): void {} } @NgModule({ providers: [Service], }) -export class ServiceModule { -} +export class ServiceModule {} diff --git a/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts b/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts index 50607d7375a..521d1a1b535 100644 --- a/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts +++ b/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; // #docregion @Injectable({ @@ -6,6 +6,5 @@ import { Injectable } from '@angular/core'; useFactory: () => new Service('dependency'), }) export class Service { - constructor(private dep: string) { - } + constructor(private dep: string) {} } diff --git a/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.ts b/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.ts index 2013120432e..e5dc837303a 100644 --- a/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.ts +++ b/adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.ts @@ -1,8 +1,7 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; // #docregion @Injectable({ providedIn: 'root', }) -export class Service { -} +export class Service {} diff --git a/adev/src/content/examples/dependency-injection/src/app/user.service.ts b/adev/src/content/examples/dependency-injection/src/app/user.service.ts index 35de8c92da8..31aaf61e150 100644 --- a/adev/src/content/examples/dependency-injection/src/app/user.service.ts +++ b/adev/src/content/examples/dependency-injection/src/app/user.service.ts @@ -1,10 +1,11 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; export class User { constructor( public name: string, - public isAuthorized = false) { } + public isAuthorized = false, + ) {} } // TODO: get the user; don't 'new' it. @@ -12,13 +13,13 @@ const alice = new User('Alice', true); const bob = new User('Bob', false); @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class UserService { - user = bob; // initial user is Bob + user = bob; // initial user is Bob // swap users getNewUser() { - return this.user = this.user === bob ? alice : bob; + return (this.user = this.user === bob ? alice : bob); } } diff --git a/adev/src/content/examples/dependency-injection/src/main.ts b/adev/src/content/examples/dependency-injection/src/main.ts index a964b873df0..b03d104ab29 100755 --- a/adev/src/content/examples/dependency-injection/src/main.ts +++ b/adev/src/content/examples/dependency-injection/src/main.ts @@ -1,5 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; import appConfig from './app/app.config'; bootstrapApplication(AppComponent, appConfig); diff --git a/adev/src/content/examples/displaying-data/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/displaying-data/e2e/src/app.e2e-spec.ts index 6ede202dae8..93612238525 100644 --- a/adev/src/content/examples/displaying-data/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/displaying-data/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Displaying Data Tests', () => { const title = 'Tour of Heroes'; diff --git a/adev/src/content/examples/displaying-data/src/app/app-ctor.component.1.ts b/adev/src/content/examples/displaying-data/src/app/app-ctor.component.1.ts index 117bc3d86ab..efc649892c4 100644 --- a/adev/src/content/examples/displaying-data/src/app/app-ctor.component.1.ts +++ b/adev/src/content/examples/displaying-data/src/app/app-ctor.component.1.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', template: `

    {{title}} [Ctor version]

    My favorite hero is: {{myHero}}

    - ` + `, }) export class AppComponent { title = 'Tour of Heroes'; diff --git a/adev/src/content/examples/displaying-data/src/app/app.component.1.ts b/adev/src/content/examples/displaying-data/src/app/app.component.1.ts index 349f7028ae4..56c4cb2cba0 100644 --- a/adev/src/content/examples/displaying-data/src/app/app.component.1.ts +++ b/adev/src/content/examples/displaying-data/src/app/app.component.1.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', template: `

    {{title}}

    My favorite hero is: {{myHero}}

    - ` + `, }) export class AppComponent { title = 'Tour of Heroes'; diff --git a/adev/src/content/examples/displaying-data/src/app/app.component.2.ts b/adev/src/content/examples/displaying-data/src/app/app.component.2.ts index 7b70d6ac1eb..546f3449c19 100644 --- a/adev/src/content/examples/displaying-data/src/app/app.component.2.ts +++ b/adev/src/content/examples/displaying-data/src/app/app.component.2.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; {{ hero }} - ` + `, }) export class AppComponent { title = 'Tour of Heroes'; diff --git a/adev/src/content/examples/displaying-data/src/app/app.component.3.ts b/adev/src/content/examples/displaying-data/src/app/app.component.3.ts index c3ebc5c0906..57bdea82374 100644 --- a/adev/src/content/examples/displaying-data/src/app/app.component.3.ts +++ b/adev/src/content/examples/displaying-data/src/app/app.component.3.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ selector: 'app-root', @@ -13,7 +13,7 @@ import { Hero } from './hero'; {{ hero.name }} - ` + `, }) export class AppComponent { title = 'Tour of Heroes'; @@ -21,7 +21,7 @@ export class AppComponent { new Hero(1, 'Windstorm'), new Hero(13, 'Bombasto'), new Hero(15, 'Magneta'), - new Hero(20, 'Tornado') + new Hero(20, 'Tornado'), ]; myHero = this.heroes[0]; } diff --git a/adev/src/content/examples/displaying-data/src/app/app.component.ts b/adev/src/content/examples/displaying-data/src/app/app.component.ts index de95f0adbbf..9e1b7772f8f 100644 --- a/adev/src/content/examples/displaying-data/src/app/app.component.ts +++ b/adev/src/content/examples/displaying-data/src/app/app.component.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ selector: 'app-root', @@ -14,7 +14,7 @@ import { Hero } from './hero';

    There are many heroes!

    -` +`, }) export class AppComponent { title = 'Tour of Heroes'; @@ -22,7 +22,7 @@ export class AppComponent { new Hero(1, 'Windstorm'), new Hero(13, 'Bombasto'), new Hero(15, 'Magneta'), - new Hero(20, 'Tornado') + new Hero(20, 'Tornado'), ]; myHero = this.heroes[0]; } diff --git a/adev/src/content/examples/displaying-data/src/app/app.module.ts b/adev/src/content/examples/displaying-data/src/app/app.module.ts index 691b8c51fc2..71f5db2a524 100644 --- a/adev/src/content/examples/displaying-data/src/app/app.module.ts +++ b/adev/src/content/examples/displaying-data/src/app/app.module.ts @@ -1,16 +1,12 @@ // #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; @NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent - ], - bootstrap: [ AppComponent ] + imports: [BrowserModule], + declarations: [AppComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/displaying-data/src/app/hero.ts b/adev/src/content/examples/displaying-data/src/app/hero.ts index 27671db0bbc..63da0f7946d 100644 --- a/adev/src/content/examples/displaying-data/src/app/hero.ts +++ b/adev/src/content/examples/displaying-data/src/app/hero.ts @@ -1,5 +1,6 @@ export class Hero { constructor( public id: number, - public name: string) { } + public name: string, + ) {} } diff --git a/adev/src/content/examples/displaying-data/src/main.ts b/adev/src/content/examples/displaying-data/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/displaying-data/src/main.ts +++ b/adev/src/content/examples/displaying-data/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/dynamic-component-loader/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/dynamic-component-loader/e2e/src/app.e2e-spec.ts index e8aed6656ec..3b4e9696e6e 100644 --- a/adev/src/content/examples/dynamic-component-loader/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/dynamic-component-loader/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Dynamic Component Loader', () => { - // The tests trigger periodic asynchronous operations (via `setInterval()`), which will prevent // the app from stabilizing. See https://angular.dev/api/core/ApplicationRef#is-stable-examples // for more details. diff --git a/adev/src/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/adev/src/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts index 7851ce630e6..d2d33a8b0fe 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts @@ -1,9 +1,9 @@ // #docregion -import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; -import { AdDirective } from './ad.directive'; -import { AdItem } from './ad-item'; -import { AdComponent } from './ad.component'; +import {AdDirective} from './ad.directive'; +import {AdItem} from './ad-item'; +import {AdComponent} from './ad.component'; @Component({ selector: 'app-ad-banner', @@ -13,7 +13,7 @@ import { AdComponent } from './ad.component';

    Advertisements

    - ` + `, // #enddocregion ad-host }) // #docregion class diff --git a/adev/src/content/examples/dynamic-component-loader/src/app/ad-item.ts b/adev/src/content/examples/dynamic-component-loader/src/app/ad-item.ts index ef8ca705771..25e2d04d3f9 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/app/ad-item.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/app/ad-item.ts @@ -1,6 +1,9 @@ // #docregion -import { Type } from '@angular/core'; +import {Type} from '@angular/core'; export class AdItem { - constructor(public component: Type, public data: any) {} + constructor( + public component: Type, + public data: any, + ) {} } diff --git a/adev/src/content/examples/dynamic-component-loader/src/app/ad.directive.ts b/adev/src/content/examples/dynamic-component-loader/src/app/ad.directive.ts index c927c0926e1..834d1915580 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/app/ad.directive.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/app/ad.directive.ts @@ -1,11 +1,10 @@ /* eslint-disable @angular-eslint/directive-selector */ // #docregion -import { Directive, ViewContainerRef } from '@angular/core'; +import {Directive, ViewContainerRef} from '@angular/core'; @Directive({ selector: '[adHost]', }) export class AdDirective { - constructor(public viewContainerRef: ViewContainerRef) { } + constructor(public viewContainerRef: ViewContainerRef) {} } - diff --git a/adev/src/content/examples/dynamic-component-loader/src/app/ad.service.ts b/adev/src/content/examples/dynamic-component-loader/src/app/ad.service.ts index f6d076c4955..4e189144dec 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/app/ad.service.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/app/ad.service.ts @@ -1,30 +1,24 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { HeroJobAdComponent } from './hero-job-ad.component'; -import { HeroProfileComponent } from './hero-profile.component'; -import { AdItem } from './ad-item'; +import {HeroJobAdComponent} from './hero-job-ad.component'; +import {HeroProfileComponent} from './hero-profile.component'; +import {AdItem} from './ad-item'; @Injectable() export class AdService { getAds() { return [ - new AdItem( - HeroProfileComponent, - { name: 'Bombasto', bio: 'Brave as they come' } - ), - new AdItem( - HeroProfileComponent, - { name: 'Dr. IQ', bio: 'Smart as they come' } - ), - new AdItem( - HeroJobAdComponent, - { headline: 'Hiring for several positions', body: 'Submit your resume today!' } - ), - new AdItem( - HeroJobAdComponent, - { headline: 'Openings in all departments', body: 'Apply today' } - ) + new AdItem(HeroProfileComponent, {name: 'Bombasto', bio: 'Brave as they come'}), + new AdItem(HeroProfileComponent, {name: 'Dr. IQ', bio: 'Smart as they come'}), + new AdItem(HeroJobAdComponent, { + headline: 'Hiring for several positions', + body: 'Submit your resume today!', + }), + new AdItem(HeroJobAdComponent, { + headline: 'Openings in all departments', + body: 'Apply today', + }), ]; } } diff --git a/adev/src/content/examples/dynamic-component-loader/src/app/app.component.ts b/adev/src/content/examples/dynamic-component-loader/src/app/app.component.ts index 65cd6d9228d..8daf5e3cf45 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/app/app.component.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/app/app.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; -import { AdService } from './ad.service'; -import { AdItem } from './ad-item'; +import {AdService} from './ad.service'; +import {AdItem} from './ad-item'; @Component({ selector: 'app-root', @@ -10,7 +10,7 @@ import { AdItem } from './ad-item';
    - ` + `, }) export class AppComponent implements OnInit { ads: AdItem[] = []; @@ -21,4 +21,3 @@ export class AppComponent implements OnInit { this.ads = this.adService.getAds(); } } - diff --git a/adev/src/content/examples/dynamic-component-loader/src/app/app.module.ts b/adev/src/content/examples/dynamic-component-loader/src/app/app.module.ts index ced8a294bbf..8d0247f9c0d 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/app/app.module.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/app/app.module.ts @@ -1,23 +1,22 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { AppComponent } from './app.component'; -import { HeroJobAdComponent } from './hero-job-ad.component'; -import { AdBannerComponent } from './ad-banner.component'; -import { HeroProfileComponent } from './hero-profile.component'; -import { AdDirective } from './ad.directive'; -import { AdService } from './ad.service'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {AppComponent} from './app.component'; +import {HeroJobAdComponent} from './hero-job-ad.component'; +import {AdBannerComponent} from './ad-banner.component'; +import {HeroProfileComponent} from './hero-profile.component'; +import {AdDirective} from './ad.directive'; +import {AdService} from './ad.service'; @NgModule({ - imports: [ BrowserModule ], - providers: [ AdService ], + imports: [BrowserModule], + providers: [AdService], declarations: [ AppComponent, AdBannerComponent, HeroJobAdComponent, HeroProfileComponent, - AdDirective + AdDirective, ], - bootstrap: [ AppComponent ] + bootstrap: [AppComponent], }) -export class AppModule { } - +export class AppModule {} diff --git a/adev/src/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts b/adev/src/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts index c7f976516a4..cf364647103 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; -import { AdComponent } from './ad.component'; +import {AdComponent} from './ad.component'; @Component({ template: ` @@ -9,9 +9,8 @@ import { AdComponent } from './ad.component';

    {{data.headline}}

    {{data.body}} - ` + `, }) export class HeroJobAdComponent implements AdComponent { @Input() data: any; } - diff --git a/adev/src/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts b/adev/src/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts index 1c7cd6d0d41..53f82d77e51 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; -import { AdComponent } from './ad.component'; +import {AdComponent} from './ad.component'; @Component({ template: ` @@ -13,10 +13,8 @@ import { AdComponent } from './ad.component'; Hire this hero today! - ` + `, }) export class HeroProfileComponent implements AdComponent { @Input() data: any; } - - diff --git a/adev/src/content/examples/dynamic-component-loader/src/main.ts b/adev/src/content/examples/dynamic-component-loader/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/dynamic-component-loader/src/main.ts +++ b/adev/src/content/examples/dynamic-component-loader/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts index a1863426292..25e95778a9c 100644 --- a/adev/src/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts @@ -1,21 +1,21 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Dynamic Form', () => { + beforeAll(() => browser.get('')); - beforeAll(() => browser.get('')); + it('should submit form', async () => { + const firstNameElement = element.all(by.css('input[id=firstName]')).get(0); + expect(await firstNameElement.getAttribute('value')).toEqual('Bombasto'); - it('should submit form', async () => { - const firstNameElement = element.all(by.css('input[id=firstName]')).get(0); - expect(await firstNameElement.getAttribute('value')).toEqual('Bombasto'); + const emailElement = element.all(by.css('input[id=emailAddress]')).get(0); + const email = 'test@test.com'; + await emailElement.sendKeys(email); + expect(await emailElement.getAttribute('value')).toEqual(email); - const emailElement = element.all(by.css('input[id=emailAddress]')).get(0); - const email = 'test@test.com'; - await emailElement.sendKeys(email); - expect(await emailElement.getAttribute('value')).toEqual(email); - - await element(by.css('select option[value="solid"]')).click(); - await element.all(by.css('button')).get(0).click(); - expect(await element(by.cssContainingText('strong', 'Saved the following values')).isPresent()).toBe(true); + await element(by.css('select option[value="solid"]')).click(); + await element.all(by.css('button')).get(0).click(); + expect( + await element(by.cssContainingText('strong', 'Saved the following values')).isPresent(), + ).toBe(true); }); - }); diff --git a/adev/src/content/examples/dynamic-form/src/app/question-base.ts b/adev/src/content/examples/dynamic-form/src/app/question-base.ts index 009355819ee..215739555b3 100644 --- a/adev/src/content/examples/dynamic-form/src/app/question-base.ts +++ b/adev/src/content/examples/dynamic-form/src/app/question-base.ts @@ -1,15 +1,16 @@ // #docregion export class QuestionBase { - value: T|undefined; + value: T | undefined; key: string; label: string; required: boolean; order: number; controlType: string; type: string; - options: {key: string, value: string}[]; + options: {key: string; value: string}[]; - constructor(options: { + constructor( + options: { value?: T; key?: string; label?: string; @@ -17,8 +18,9 @@ export class QuestionBase { order?: number; controlType?: string; type?: string; - options?: {key: string, value: string}[]; - } = {}) { + options?: {key: string; value: string}[]; + } = {}, + ) { this.value = options.value; this.key = options.key || ''; this.label = options.label || ''; diff --git a/adev/src/content/examples/dynamic-form/src/app/question-control.service.ts b/adev/src/content/examples/dynamic-form/src/app/question-control.service.ts index 458b1adee69..3c26ea7f3a9 100644 --- a/adev/src/content/examples/dynamic-form/src/app/question-control.service.ts +++ b/adev/src/content/examples/dynamic-form/src/app/question-control.service.ts @@ -1,17 +1,18 @@ // #docregion -import { Injectable } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; +import {Injectable} from '@angular/core'; +import {FormControl, FormGroup, Validators} from '@angular/forms'; -import { QuestionBase } from './question-base'; +import {QuestionBase} from './question-base'; @Injectable() export class QuestionControlService { - toFormGroup(questions: QuestionBase[] ) { + toFormGroup(questions: QuestionBase[]) { const group: any = {}; - questions.forEach(question => { - group[question.key] = question.required ? new FormControl(question.value || '', Validators.required) - : new FormControl(question.value || ''); + questions.forEach((question) => { + group[question.key] = question.required + ? new FormControl(question.value || '', Validators.required) + : new FormControl(question.value || ''); }); return new FormGroup(group); } diff --git a/adev/src/content/examples/dynamic-form/src/app/question-dropdown.ts b/adev/src/content/examples/dynamic-form/src/app/question-dropdown.ts index 661de379e93..f989c7bca47 100644 --- a/adev/src/content/examples/dynamic-form/src/app/question-dropdown.ts +++ b/adev/src/content/examples/dynamic-form/src/app/question-dropdown.ts @@ -1,5 +1,5 @@ // #docregion -import { QuestionBase } from './question-base'; +import {QuestionBase} from './question-base'; export class DropdownQuestion extends QuestionBase { override controlType = 'dropdown'; diff --git a/adev/src/content/examples/dynamic-form/src/app/question-textbox.ts b/adev/src/content/examples/dynamic-form/src/app/question-textbox.ts index 2cd3669a887..0d796978312 100644 --- a/adev/src/content/examples/dynamic-form/src/app/question-textbox.ts +++ b/adev/src/content/examples/dynamic-form/src/app/question-textbox.ts @@ -1,5 +1,5 @@ // #docregion -import { QuestionBase } from './question-base'; +import {QuestionBase} from './question-base'; export class TextboxQuestion extends QuestionBase { override controlType = 'textbox'; diff --git a/adev/src/content/examples/dynamic-form/src/app/question.service.ts b/adev/src/content/examples/dynamic-form/src/app/question.service.ts index ff0a257d509..fc7d323d524 100644 --- a/adev/src/content/examples/dynamic-form/src/app/question.service.ts +++ b/adev/src/content/examples/dynamic-form/src/app/question.service.ts @@ -1,29 +1,26 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { DropdownQuestion } from './question-dropdown'; -import { QuestionBase } from './question-base'; -import { TextboxQuestion } from './question-textbox'; -import { of } from 'rxjs'; +import {DropdownQuestion} from './question-dropdown'; +import {QuestionBase} from './question-base'; +import {TextboxQuestion} from './question-textbox'; +import {of} from 'rxjs'; @Injectable() export class QuestionService { - // TODO: get from a remote source of question metadata getQuestions() { - const questions: QuestionBase[] = [ - new DropdownQuestion({ key: 'favoriteAnimal', label: 'Favorite Animal', options: [ - {key: 'cat', value: 'Cat'}, - {key: 'dog', value: 'Dog'}, - {key: 'horse', value: 'Horse'}, - {key: 'capybara', value: 'Capybara'}, + {key: 'cat', value: 'Cat'}, + {key: 'dog', value: 'Dog'}, + {key: 'horse', value: 'Horse'}, + {key: 'capybara', value: 'Capybara'}, ], - order: 3 + order: 3, }), new TextboxQuestion({ @@ -31,15 +28,15 @@ export class QuestionService { label: 'First name', value: 'Alex', required: true, - order: 1 + order: 1, }), new TextboxQuestion({ key: 'emailAddress', label: 'Email', type: 'email', - order: 2 - }) + order: 2, + }), ]; return of(questions.sort((a, b) => a.order - b.order)); diff --git a/adev/src/content/examples/elements/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/elements/e2e/src/app.e2e-spec.ts index e8b25824eb7..f807fdfb476 100644 --- a/adev/src/content/examples/elements/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/elements/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, by, element, ElementFinder, ExpectedConditions as EC } from 'protractor'; +import {browser, by, element, ElementFinder, ExpectedConditions as EC} from 'protractor'; describe('Elements', () => { const messageInput = element(by.css('input')); diff --git a/adev/src/content/examples/errors/cyclic-imports/parent.component.ts b/adev/src/content/examples/errors/cyclic-imports/parent.component.ts index 287e8229ca6..81d6946efd1 100644 --- a/adev/src/content/examples/errors/cyclic-imports/parent.component.ts +++ b/adev/src/content/examples/errors/cyclic-imports/parent.component.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import { ChildComponent } from './child.component'; +import {ChildComponent} from './child.component'; @Component({ standalone: true, diff --git a/adev/src/content/examples/event-binding/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/event-binding/e2e/src/app.e2e-spec.ts index a5a1dbf5588..78e20713728 100644 --- a/adev/src/content/examples/event-binding/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/event-binding/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Event binding example', () => { - beforeEach(() => browser.get('')); const saveButton = element.all(by.css('button')).get(0); @@ -11,7 +10,6 @@ describe('Event binding example', () => { const saveNoProp = element.all(by.css('button')).get(4); const saveProp = element.all(by.css('button')).get(5); - it('should display Event Binding with Angular', async () => { expect(await element(by.css('h1')).getText()).toEqual('Event Binding'); }); @@ -46,13 +44,17 @@ describe('Event binding example', () => { await browser.switchTo().alert().accept(); expect(await childDiv.getText()).toEqual('Click me too! (child)'); await childDiv.click(); - expect(await browser.switchTo().alert().getText()).toEqual('Click me. Event target class is child-div'); + expect(await browser.switchTo().alert().getText()).toEqual( + 'Click me. Event target class is child-div', + ); await browser.switchTo().alert().accept(); }); it('should show 1 alert from Save, no prop, button', async () => { await saveNoProp.click(); - expect(await browser.switchTo().alert().getText()).toEqual('Saved. Event target is Save, no propagation'); + expect(await browser.switchTo().alert().getText()).toEqual( + 'Saved. Event target is Save, no propagation', + ); await browser.switchTo().alert().accept(); }); diff --git a/adev/src/content/examples/event-binding/src/app/item.ts b/adev/src/content/examples/event-binding/src/app/item.ts index 6e7f806fa8a..8fa4777e2ed 100644 --- a/adev/src/content/examples/event-binding/src/app/item.ts +++ b/adev/src/content/examples/event-binding/src/app/item.ts @@ -1,4 +1,3 @@ export class Item { name = ''; } - diff --git a/adev/src/content/examples/feature-modules/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/feature-modules/e2e/src/app.e2e-spec.ts index 78e8b1ee46b..b86cb55f632 100644 --- a/adev/src/content/examples/feature-modules/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/feature-modules/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { AppPage } from './app.po'; +import {AppPage} from './app.po'; describe('feature-modules App', () => { let page: AppPage; diff --git a/adev/src/content/examples/feature-modules/src/app/app.component.ts b/adev/src/content/examples/feature-modules/src/app/app.component.ts index ff63e050488..2fe84b78ed7 100644 --- a/adev/src/content/examples/feature-modules/src/app/app.component.ts +++ b/adev/src/content/examples/feature-modules/src/app/app.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'app works!'; diff --git a/adev/src/content/examples/feature-modules/src/app/app.module.ts b/adev/src/content/examples/feature-modules/src/app/app.module.ts index dd55e2ea044..44f138abf81 100644 --- a/adev/src/content/examples/feature-modules/src/app/app.module.ts +++ b/adev/src/content/examples/feature-modules/src/app/app.module.ts @@ -1,26 +1,24 @@ // #docplaster // #docregion app-module -import { HttpClientModule } from '@angular/common/http'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; +import {HttpClientModule} from '@angular/common/http'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {BrowserModule} from '@angular/platform-browser'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; // import the feature module here so you can add it to the imports array below -import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module'; +import {CustomerDashboardModule} from './customer-dashboard/customer-dashboard.module'; @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserModule, FormsModule, HttpClientModule, - CustomerDashboardModule // add the feature module here + CustomerDashboardModule, // add the feature module here ], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} // #enddocregion app-module diff --git a/adev/src/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts b/adev/src/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts index bf6476803bf..06ef2fcce6f 100644 --- a/adev/src/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts +++ b/adev/src/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts @@ -1,26 +1,19 @@ // #docplaster -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; // #docregion customer-dashboard-component // import the new component -import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component'; +import {CustomerDashboardComponent} from './customer-dashboard/customer-dashboard.component'; @NgModule({ - imports: [ - CommonModule - ], - declarations: [ - CustomerDashboardComponent - ], + imports: [CommonModule], + declarations: [CustomerDashboardComponent], // #enddocregion customer-dashboard-component // #docregion component-exports - exports: [ - CustomerDashboardComponent - ] + exports: [CustomerDashboardComponent], // #enddocregion component-exports // #docregion customer-dashboard-component }) // #enddocregion customer-dashboard-component - -export class CustomerDashboardModule { } +export class CustomerDashboardModule {} diff --git a/adev/src/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts b/adev/src/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts index f5d776a6139..113978dbe3e 100644 --- a/adev/src/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts +++ b/adev/src/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts @@ -1,10 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-customer-dashboard', templateUrl: './customer-dashboard.component.html', - styleUrls: ['./customer-dashboard.component.css'] + styleUrls: ['./customer-dashboard.component.css'], }) -export class CustomerDashboardComponent { - -} +export class CustomerDashboardComponent {} diff --git a/adev/src/content/examples/feature-modules/src/main.ts b/adev/src/content/examples/feature-modules/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/feature-modules/src/main.ts +++ b/adev/src/content/examples/feature-modules/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/form-validation/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/form-validation/e2e/src/app.e2e-spec.ts index 39541180855..f6a3dbd3e06 100644 --- a/adev/src/content/examples/form-validation/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/form-validation/e2e/src/app.e2e-spec.ts @@ -1,8 +1,7 @@ -import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor'; +import {browser, element, by, protractor, ElementFinder, ElementArrayFinder} from 'protractor'; // THESE TESTS ARE INCOMPLETE describe('Form Validation Tests', () => { - beforeAll(() => browser.get('')); describe('Template-driven form', () => { @@ -68,7 +67,6 @@ function getPage(sectionTag: string) { } function tests(title: string) { - it('should display correct title', async () => { expect(await page.title.getText()).toContain(title); }); @@ -142,8 +140,10 @@ function tests(title: string) { it('clicking edit button should reveal form again', async () => { const newFormBtn = page.actorSubmitted.element(by.css('button')); await newFormBtn.click(); - expect(await page.actorSubmitted.isElementPresent(by.css('p'))) - .toBe(false, 'submitted hidden again'); + expect(await page.actorSubmitted.isElementPresent(by.css('p'))).toBe( + false, + 'submitted hidden again', + ); expect(await page.title.isDisplayed()).toBe(true, 'can see form title'); }); } diff --git a/adev/src/content/examples/form-validation/src/app/app.component.ts b/adev/src/content/examples/form-validation/src/app/app.component.ts index 58c1dc75486..9b5b155231e 100644 --- a/adev/src/content/examples/form-validation/src/app/app.component.ts +++ b/adev/src/content/examples/form-validation/src/app/app.component.ts @@ -1,11 +1,11 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', template: `

    Form validation example

    - ` + `, }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/form-validation/src/app/app.module.ts b/adev/src/content/examples/form-validation/src/app/app.module.ts index 0f2a6f5065c..a5fbfce81a2 100644 --- a/adev/src/content/examples/form-validation/src/app/app.module.ts +++ b/adev/src/content/examples/form-validation/src/app/app.module.ts @@ -1,21 +1,17 @@ // #docregion -import { NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {BrowserModule} from '@angular/platform-browser'; -import { AppComponent } from './app.component'; -import { ActorFormTemplateComponent } from './template/actor-form-template.component'; -import { ActorFormReactiveComponent } from './reactive/actor-form-reactive.component'; -import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive'; -import { UnambiguousRoleValidatorDirective } from './shared/unambiguous-role.directive'; -import { UniqueRoleValidatorDirective } from './shared/role.directive'; +import {AppComponent} from './app.component'; +import {ActorFormTemplateComponent} from './template/actor-form-template.component'; +import {ActorFormReactiveComponent} from './reactive/actor-form-reactive.component'; +import {ForbiddenValidatorDirective} from './shared/forbidden-name.directive'; +import {UnambiguousRoleValidatorDirective} from './shared/unambiguous-role.directive'; +import {UniqueRoleValidatorDirective} from './shared/role.directive'; @NgModule({ - imports: [ - BrowserModule, - FormsModule, - ReactiveFormsModule - ], + imports: [BrowserModule, FormsModule, ReactiveFormsModule], declarations: [ AppComponent, ActorFormTemplateComponent, @@ -24,6 +20,6 @@ import { UniqueRoleValidatorDirective } from './shared/role.directive'; UnambiguousRoleValidatorDirective, UniqueRoleValidatorDirective, ], - bootstrap: [ AppComponent ] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts b/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts index 8ccb1877c1f..837349316aa 100644 --- a/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts +++ b/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts @@ -1,8 +1,8 @@ // #docplaster // #docregion -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { forbiddenNameValidator } from '../shared/forbidden-name.directive'; +import {Component, OnInit} from '@angular/core'; +import {FormControl, FormGroup, Validators} from '@angular/forms'; +import {forbiddenNameValidator} from '../shared/forbidden-name.directive'; @Component({ selector: 'app-actor-form-reactive', @@ -10,7 +10,6 @@ import { forbiddenNameValidator } from '../shared/forbidden-name.directive'; styleUrls: ['./actor-form-reactive.component.css'], }) export class HeroFormReactiveComponent implements OnInit { - skills = ['Method Acting', 'Singing', 'Dancing', 'Swordfighting']; actor = {name: 'Tom Cruise', role: 'Romeo', skill: this.skills[3]}; @@ -24,18 +23,21 @@ export class HeroFormReactiveComponent implements OnInit { name: new FormControl(this.actor.name, [ Validators.required, Validators.minLength(4), - forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator. + forbiddenNameValidator(/bob/i), // <-- Here's how you pass in the custom validator. ]), role: new FormControl(this.actor.role), - skill: new FormControl(this.actor.skill, Validators.required) + skill: new FormControl(this.actor.skill, Validators.required), }); // #enddocregion custom-validator - } - get name() { return this.actorForm.get('name'); } + get name() { + return this.actorForm.get('name'); + } - get skill() { return this.actorForm.get('skill'); } + get skill() { + return this.actorForm.get('skill'); + } // #enddocregion form-group } // #enddocregion diff --git a/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts b/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts index a791e742f1b..d55c5b48666 100644 --- a/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts +++ b/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { forbiddenNameValidator } from '../shared/forbidden-name.directive'; -import { UniqueRoleValidator } from '../shared/role.directive'; +import {Component, OnInit} from '@angular/core'; +import {FormControl, FormGroup, Validators} from '@angular/forms'; +import {forbiddenNameValidator} from '../shared/forbidden-name.directive'; +import {UniqueRoleValidator} from '../shared/role.directive'; @Component({ selector: 'app-actor-form-reactive', @@ -11,7 +11,6 @@ import { UniqueRoleValidator } from '../shared/role.directive'; styleUrls: ['./actor-form-reactive.component.css'], }) export class HeroFormReactiveComponent implements OnInit { - skills = ['Method Acting', 'Singing', 'Dancing', 'Swordfighting']; actor = {name: 'Tom Cruise', role: 'Romeo', skill: this.skills[3]}; @@ -22,27 +21,33 @@ export class HeroFormReactiveComponent implements OnInit { // #docregion async-validator-usage const roleControl = new FormControl('', { asyncValidators: [this.roleValidator.validate.bind(this.roleValidator)], - updateOn: 'blur' + updateOn: 'blur', }); // #enddocregion async-validator-usage - roleControl.setValue(this.actor.role); + roleControl.setValue(this.actor.role); this.actorForm = new FormGroup({ name: new FormControl(this.actor.name, [ Validators.required, Validators.minLength(4), - forbiddenNameValidator(/bob/i) + forbiddenNameValidator(/bob/i), ]), role: roleControl, - skill: new FormControl(this.actor.skill, Validators.required) + skill: new FormControl(this.actor.skill, Validators.required), }); } - get name() { return this.actorForm.get('name'); } + get name() { + return this.actorForm.get('name'); + } - get skill() { return this.actorForm.get('skill'); } + get skill() { + return this.actorForm.get('skill'); + } - get role() { return this.actorForm.get('role'); } + get role() { + return this.actorForm.get('role'); + } // #docregion async-validator-inject constructor(private roleValidator: UniqueRoleValidator) {} diff --git a/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.ts b/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.ts index 0719ace7cdf..07afa314733 100644 --- a/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.ts +++ b/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.ts @@ -1,9 +1,9 @@ // #docregion -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { forbiddenNameValidator } from '../shared/forbidden-name.directive'; -import { unambiguousRoleValidator } from '../shared/identity-revealed.directive'; -import { UniqueRoleValidator } from '../shared/role.directive'; +import {Component, OnInit} from '@angular/core'; +import {FormControl, FormGroup, Validators} from '@angular/forms'; +import {forbiddenNameValidator} from '../shared/forbidden-name.directive'; +import {unambiguousRoleValidator} from '../shared/identity-revealed.directive'; +import {UniqueRoleValidator} from '../shared/role.directive'; @Component({ selector: 'app-actor-form-reactive', @@ -11,7 +11,6 @@ import { UniqueRoleValidator } from '../shared/role.directive'; styleUrls: ['./actor-form-reactive.component.css'], }) export class ActorFormReactiveComponent implements OnInit { - skills = ['Method Acting', 'Singing', 'Dancing', 'Swordfighting']; actor = {name: 'Tom Cruise', role: 'Romeo', skill: this.skills[3]}; @@ -19,25 +18,34 @@ export class ActorFormReactiveComponent implements OnInit { actorForm!: FormGroup; ngOnInit(): void { - this.actorForm = new FormGroup({ - name: new FormControl(this.actor.name, [ - Validators.required, - Validators.minLength(4), - forbiddenNameValidator(/bob/i) - ]), - role: new FormControl(this.actor.role, { - asyncValidators: [this.roleValidator.validate.bind(this.roleValidator)], - updateOn: 'blur' - }), - skill: new FormControl(this.actor.skill, Validators.required) - }, { validators: unambiguousRoleValidator }); // <-- add custom validator at the FormGroup level + this.actorForm = new FormGroup( + { + name: new FormControl(this.actor.name, [ + Validators.required, + Validators.minLength(4), + forbiddenNameValidator(/bob/i), + ]), + role: new FormControl(this.actor.role, { + asyncValidators: [this.roleValidator.validate.bind(this.roleValidator)], + updateOn: 'blur', + }), + skill: new FormControl(this.actor.skill, Validators.required), + }, + {validators: unambiguousRoleValidator}, + ); // <-- add custom validator at the FormGroup level } - get name() { return this.actorForm.get('name')!; } + get name() { + return this.actorForm.get('name')!; + } - get skill() { return this.actorForm.get('skill')!; } + get skill() { + return this.actorForm.get('skill')!; + } - get role() { return this.actorForm.get('role')!; } + get role() { + return this.actorForm.get('role')!; + } - constructor(private roleValidator: UniqueRoleValidator) { } + constructor(private roleValidator: UniqueRoleValidator) {} } diff --git a/adev/src/content/examples/form-validation/src/app/shared/actors.service.ts b/adev/src/content/examples/form-validation/src/app/shared/actors.service.ts index 1ff9ec2ad27..47971ec6046 100644 --- a/adev/src/content/examples/form-validation/src/app/shared/actors.service.ts +++ b/adev/src/content/examples/form-validation/src/app/shared/actors.service.ts @@ -1,10 +1,10 @@ -import { Injectable } from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; +import {Injectable} from '@angular/core'; +import {Observable, of} from 'rxjs'; +import {delay} from 'rxjs/operators'; const ROLES = ['Hamlet', 'Ophelia', 'Romeo', 'Juliet']; -@Injectable({ providedIn: 'root' }) +@Injectable({providedIn: 'root'}) export class ActorsService { isRoleTaken(role: string): Observable { const isTaken = ROLES.includes(role); diff --git a/adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts b/adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts index a957afd637a..3fb5e518ffd 100644 --- a/adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts +++ b/adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts @@ -1,6 +1,12 @@ // #docregion -import { Directive, Input } from '@angular/core'; -import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn } from '@angular/forms'; +import {Directive, Input} from '@angular/core'; +import { + AbstractControl, + NG_VALIDATORS, + ValidationErrors, + Validator, + ValidatorFn, +} from '@angular/forms'; // #docregion custom-validator /** An actor's name can't match the given regular expression */ @@ -16,16 +22,16 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { @Directive({ selector: '[appForbiddenName]', // #docregion directive-providers - providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}] + providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}], // #enddocregion directive-providers }) export class ForbiddenValidatorDirective implements Validator { @Input('appForbiddenName') forbiddenName = ''; validate(control: AbstractControl): ValidationErrors | null { - return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control) - : null; + return this.forbiddenName + ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control) + : null; } } // #enddocregion directive - diff --git a/adev/src/content/examples/form-validation/src/app/shared/role.directive.ts b/adev/src/content/examples/form-validation/src/app/shared/role.directive.ts index f63f9f8249d..137a9d80c82 100644 --- a/adev/src/content/examples/form-validation/src/app/shared/role.directive.ts +++ b/adev/src/content/examples/form-validation/src/app/shared/role.directive.ts @@ -1,25 +1,23 @@ -import { Directive, forwardRef, Injectable } from '@angular/core'; +import {Directive, forwardRef, Injectable} from '@angular/core'; import { AsyncValidator, AbstractControl, NG_ASYNC_VALIDATORS, - ValidationErrors + ValidationErrors, } from '@angular/forms'; -import { catchError, map } from 'rxjs/operators'; -import { ActorsService } from './actors.service'; -import { Observable, of } from 'rxjs'; +import {catchError, map} from 'rxjs/operators'; +import {ActorsService} from './actors.service'; +import {Observable, of} from 'rxjs'; // #docregion async-validator -@Injectable({ providedIn: 'root' }) +@Injectable({providedIn: 'root'}) export class UniqueRoleValidator implements AsyncValidator { constructor(private actorsService: ActorsService) {} - validate( - control: AbstractControl - ): Observable { + validate(control: AbstractControl): Observable { return this.actorsService.isRoleTaken(control.value).pipe( - map(isTaken => (isTaken ? { uniqueRole: true } : null)), - catchError(() => of(null)) + map((isTaken) => (isTaken ? {uniqueRole: true} : null)), + catchError(() => of(null)), ); } } @@ -32,16 +30,14 @@ export class UniqueRoleValidator implements AsyncValidator { { provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => UniqueRoleValidatorDirective), - multi: true - } - ] + multi: true, + }, + ], }) export class UniqueRoleValidatorDirective implements AsyncValidator { constructor(private validator: UniqueRoleValidator) {} - validate( - control: AbstractControl - ): Observable { + validate(control: AbstractControl): Observable { return this.validator.validate(control); } } diff --git a/adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts b/adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts index 7183b25db5d..52afce37d8d 100644 --- a/adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts +++ b/adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts @@ -1,21 +1,31 @@ // #docregion -import { Directive } from '@angular/core'; -import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn } from '@angular/forms'; +import {Directive} from '@angular/core'; +import { + AbstractControl, + NG_VALIDATORS, + ValidationErrors, + Validator, + ValidatorFn, +} from '@angular/forms'; // #docregion cross-validation-validator /** An actor's name can't match the actor's role */ -export const unambiguousRoleValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { +export const unambiguousRoleValidator: ValidatorFn = ( + control: AbstractControl, +): ValidationErrors | null => { const name = control.get('name'); const role = control.get('role'); - return name && role && name.value === role.value ? { unambiguousRole: true } : null; + return name && role && name.value === role.value ? {unambiguousRole: true} : null; }; // #enddocregion cross-validation-validator // #docregion cross-validation-directive @Directive({ selector: '[appUnambiguousRole]', - providers: [{ provide: NG_VALIDATORS, useExisting: UnambiguousRoleValidatorDirective, multi: true }] + providers: [ + {provide: NG_VALIDATORS, useExisting: UnambiguousRoleValidatorDirective, multi: true}, + ], }) export class UnambiguousRoleValidatorDirective implements Validator { validate(control: AbstractControl): ValidationErrors | null { diff --git a/adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.ts b/adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.ts index 552b38b41ec..e22c03c3620 100644 --- a/adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.ts +++ b/adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.ts @@ -1,21 +1,31 @@ // #docregion -import { Directive } from '@angular/core'; -import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn } from '@angular/forms'; +import {Directive} from '@angular/core'; +import { + AbstractControl, + NG_VALIDATORS, + ValidationErrors, + Validator, + ValidatorFn, +} from '@angular/forms'; // #docregion cross-validation-validator /** An actor's name can't match the actor's role */ -export const unambiguousRoleValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { +export const unambiguousRoleValidator: ValidatorFn = ( + control: AbstractControl, +): ValidationErrors | null => { const name = control.get('name'); const role = control.get('role'); - return name && role && name.value === role.value ? { identityRevealed: true } : null; + return name && role && name.value === role.value ? {identityRevealed: true} : null; }; // #enddocregion cross-validation-validator // #docregion cross-validation-directive @Directive({ selector: '[appUnambiguousRole]', - providers: [{ provide: NG_VALIDATORS, useExisting: UnambiguousRoleValidatorDirective, multi: true }] + providers: [ + {provide: NG_VALIDATORS, useExisting: UnambiguousRoleValidatorDirective, multi: true}, + ], }) export class UnambiguousRoleValidatorDirective implements Validator { validate(control: AbstractControl): ValidationErrors | null { diff --git a/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.ts b/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.ts index 4b24fa73e4d..ba80ddda2fa 100644 --- a/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.ts +++ b/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-actor-form-template', @@ -6,9 +6,7 @@ import { Component } from '@angular/core'; styleUrls: ['./actor-form-template.component.css'], }) export class ActorFormTemplateComponent { - skills = ['Method Acting', 'Singing', 'Dancing', 'Swordfighting']; actor = {name: 'Tom Cruise', role: 'Romeo', skill: this.skills[3]}; - } diff --git a/adev/src/content/examples/form-validation/src/main.ts b/adev/src/content/examples/form-validation/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/form-validation/src/main.ts +++ b/adev/src/content/examples/form-validation/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/forms-overview/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/forms-overview/e2e/src/app.e2e-spec.ts index 34703dbf9c5..c7d881f87a8 100644 --- a/adev/src/content/examples/forms-overview/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/forms-overview/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { AppPage } from './app.po'; +import {AppPage} from './app.po'; describe('forms-overview App', () => { let page: AppPage; diff --git a/adev/src/content/examples/forms-overview/src/app/app.component.spec.ts b/adev/src/content/examples/forms-overview/src/app/app.component.spec.ts index 10398318eb4..5fdaf2ef9b1 100644 --- a/adev/src/content/examples/forms-overview/src/app/app.component.spec.ts +++ b/adev/src/content/examples/forms-overview/src/app/app.component.spec.ts @@ -1,31 +1,29 @@ -import { TestBed, waitForAsync } from '@angular/core/testing'; +import {TestBed, waitForAsync} from '@angular/core/testing'; -import { AppComponent } from './app.component'; -import { ReactiveModule } from './reactive/reactive.module'; -import { TemplateModule } from './template/template.module'; +import {AppComponent} from './app.component'; +import {ReactiveModule} from './reactive/reactive.module'; +import {TemplateModule} from './template/template.module'; describe('AppComponent', () => { beforeEach(waitForAsync(() => { - TestBed - .configureTestingModule({ - imports: [ReactiveModule, TemplateModule], - declarations: [AppComponent], - }) - .compileComponents(); + TestBed.configureTestingModule({ + imports: [ReactiveModule, TemplateModule], + declarations: [AppComponent], + }).compileComponents(); })); it('should create the app', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; - expect(app).toBeTruthy(); - })); + expect(app).toBeTruthy(); + })); it('should render title', waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Forms Overview'); - })); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Forms Overview'); + })); }); diff --git a/adev/src/content/examples/forms-overview/src/app/app.component.ts b/adev/src/content/examples/forms-overview/src/app/app.component.ts index 26f42471ce9..f9404abc195 100644 --- a/adev/src/content/examples/forms-overview/src/app/app.component.ts +++ b/adev/src/content/examples/forms-overview/src/app/app.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'forms-intro'; diff --git a/adev/src/content/examples/forms-overview/src/app/app.module.ts b/adev/src/content/examples/forms-overview/src/app/app.module.ts index fbce0eff3e4..287f4ee384e 100644 --- a/adev/src/content/examples/forms-overview/src/app/app.module.ts +++ b/adev/src/content/examples/forms-overview/src/app/app.module.ts @@ -1,19 +1,13 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; -import { AppComponent } from './app.component'; -import { ReactiveModule } from './reactive/reactive.module'; -import { TemplateModule } from './template/template.module'; +import {AppComponent} from './app.component'; +import {ReactiveModule} from './reactive/reactive.module'; +import {TemplateModule} from './template/template.module'; @NgModule({ - declarations: [ - AppComponent, - ], - imports: [ - BrowserModule, - ReactiveModule, - TemplateModule - ], - bootstrap: [AppComponent] + declarations: [AppComponent], + imports: [BrowserModule, ReactiveModule, TemplateModule], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts b/adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts index 47e7549501f..95f4c9000a6 100644 --- a/adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts +++ b/adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts @@ -1,18 +1,18 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { ReactiveFormsModule } from '@angular/forms'; +import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; +import {ReactiveFormsModule} from '@angular/forms'; -import { createNewEvent } from '../../shared/utils'; -import { FavoriteColorComponent } from './favorite-color.component'; +import {createNewEvent} from '../../shared/utils'; +import {FavoriteColorComponent} from './favorite-color.component'; describe('Favorite Color Component', () => { let component: FavoriteColorComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { - TestBed - .configureTestingModule( - {imports: [ReactiveFormsModule], declarations: [FavoriteColorComponent]}) - .compileComponents(); + TestBed.configureTestingModule({ + imports: [ReactiveFormsModule], + declarations: [FavoriteColorComponent], + }).compileComponents(); })); beforeEach(() => { diff --git a/adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts b/adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts index 282df4d8dbe..32b801fde72 100644 --- a/adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts +++ b/adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core'; -import { FormControl } from '@angular/forms'; +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; @Component({ selector: 'app-reactive-favorite-color', template: ` Favorite Color: - ` + `, }) export class FavoriteColorComponent { favoriteColorControl = new FormControl(''); diff --git a/adev/src/content/examples/forms-overview/src/app/reactive/reactive.module.ts b/adev/src/content/examples/forms-overview/src/app/reactive/reactive.module.ts index 3b85430dda2..8b497658ca3 100644 --- a/adev/src/content/examples/forms-overview/src/app/reactive/reactive.module.ts +++ b/adev/src/content/examples/forms-overview/src/app/reactive/reactive.module.ts @@ -1,14 +1,11 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { ReactiveFormsModule } from '@angular/forms'; -import { FavoriteColorComponent } from './favorite-color/favorite-color.component'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {ReactiveFormsModule} from '@angular/forms'; +import {FavoriteColorComponent} from './favorite-color/favorite-color.component'; @NgModule({ - imports: [ - CommonModule, - ReactiveFormsModule - ], + imports: [CommonModule, ReactiveFormsModule], declarations: [FavoriteColorComponent], exports: [FavoriteColorComponent], }) -export class ReactiveModule { } +export class ReactiveModule {} diff --git a/adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts b/adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts index 65da048069f..52302204200 100644 --- a/adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts +++ b/adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts @@ -1,16 +1,18 @@ -import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; +import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing'; +import {FormsModule} from '@angular/forms'; -import { createNewEvent } from '../../shared/utils'; -import { FavoriteColorComponent } from './favorite-color.component'; +import {createNewEvent} from '../../shared/utils'; +import {FavoriteColorComponent} from './favorite-color.component'; describe('FavoriteColorComponent', () => { let component: FavoriteColorComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({imports: [FormsModule], declarations: [FavoriteColorComponent]}) - .compileComponents(); + TestBed.configureTestingModule({ + imports: [FormsModule], + declarations: [FavoriteColorComponent], + }).compileComponents(); })); beforeEach(() => { diff --git a/adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts b/adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts index 7a965b7c33c..59accc9d5ff 100644 --- a/adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts +++ b/adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-template-favorite-color', template: ` Favorite Color: - ` + `, }) export class FavoriteColorComponent { favoriteColor = ''; diff --git a/adev/src/content/examples/forms-overview/src/app/template/template.module.ts b/adev/src/content/examples/forms-overview/src/app/template/template.module.ts index dc2ade4f25f..31ff3712d4f 100644 --- a/adev/src/content/examples/forms-overview/src/app/template/template.module.ts +++ b/adev/src/content/examples/forms-overview/src/app/template/template.module.ts @@ -1,14 +1,11 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { FavoriteColorComponent } from './favorite-color/favorite-color.component'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {FavoriteColorComponent} from './favorite-color/favorite-color.component'; @NgModule({ - imports: [ - CommonModule, - FormsModule - ], + imports: [CommonModule, FormsModule], declarations: [FavoriteColorComponent], - exports: [FavoriteColorComponent] + exports: [FavoriteColorComponent], }) -export class TemplateModule { } +export class TemplateModule {} diff --git a/adev/src/content/examples/forms-overview/src/main.ts b/adev/src/content/examples/forms-overview/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/forms-overview/src/main.ts +++ b/adev/src/content/examples/forms-overview/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/forms/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/forms/e2e/src/app.e2e-spec.ts index a9e09fe10cc..09b0c4601bf 100644 --- a/adev/src/content/examples/forms/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/forms/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Forms Tests', () => { - beforeEach(() => browser.get('')); it('should display correct title', async () => { diff --git a/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts b/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts index c7b0b5eb2cb..e25f8952efe 100644 --- a/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts +++ b/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts @@ -1,15 +1,14 @@ // #docplaster // #docregion , v1, final -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Actor } from '../actor'; +import {Actor} from '../actor'; @Component({ selector: 'app-actor-form', templateUrl: './actor-form.component.html', }) export class ActorFormComponent { - skills = ['Method Acting', 'Singing', 'Dancing', 'Swordfighting']; model = new Actor(18, 'Tom Cruise', this.skills[3], 'CW Productions'); @@ -17,7 +16,9 @@ export class ActorFormComponent { // #docregion submitted submitted = false; - onSubmit() { this.submitted = true; } + onSubmit() { + this.submitted = true; + } // #enddocregion submitted // #enddocregion final @@ -31,7 +32,7 @@ export class ActorFormComponent { heroine(): Actor { // #docregion Marilyn - const myActress = new Actor(42, 'Marilyn Monroe', 'Singing'); + const myActress = new Actor(42, 'Marilyn Monroe', 'Singing'); console.log('My actress is called ' + myActress.name); // "My actress is called Marilyn" // #enddocregion Marilyn return myActress; @@ -42,8 +43,7 @@ export class ActorFormComponent { // Reveal in html: // Name via form.controls = {{showFormControls(actorForm)}} showFormControls(form: any) { - return form && form.controls.name && - form.controls.name.value; // Tom Cruise + return form && form.controls.name && form.controls.name.value; // Tom Cruise } ///////////////////////////// diff --git a/adev/src/content/examples/forms/src/app/actor.ts b/adev/src/content/examples/forms/src/app/actor.ts index f36c8586042..a6b68135ee8 100644 --- a/adev/src/content/examples/forms/src/app/actor.ts +++ b/adev/src/content/examples/forms/src/app/actor.ts @@ -1,11 +1,9 @@ // #docregion export class Actor { - constructor( public id: number, public name: string, public skill: string, public studio?: string, - ) { } - + ) {} } diff --git a/adev/src/content/examples/forms/src/app/app.component.ts b/adev/src/content/examples/forms/src/app/app.component.ts index 78449b76bc9..13119352764 100644 --- a/adev/src/content/examples/forms/src/app/app.component.ts +++ b/adev/src/content/examples/forms/src/app/app.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/forms/src/app/app.module.ts b/adev/src/content/examples/forms/src/app/app.module.ts index d499488ab88..8ce90fe864f 100644 --- a/adev/src/content/examples/forms/src/app/app.module.ts +++ b/adev/src/content/examples/forms/src/app/app.module.ts @@ -11,7 +11,6 @@ import {ActorFormComponent} from './actor-form/actor-form.component'; imports: [BrowserModule, CommonModule, FormsModule], declarations: [AppComponent, ActorFormComponent], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { -} +export class AppModule {} diff --git a/adev/src/content/examples/forms/src/main.ts b/adev/src/content/examples/forms/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/forms/src/main.ts +++ b/adev/src/content/examples/forms/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/getting-started/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/getting-started/e2e/src/app.e2e-spec.ts index 13f089c6f32..18e84cf46f0 100644 --- a/adev/src/content/examples/getting-started/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/getting-started/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by, ExpectedConditions as EC, logging } from 'protractor'; +import {browser, element, by, ExpectedConditions as EC, logging} from 'protractor'; describe('Getting Started', () => { const pageElements = { @@ -9,7 +9,7 @@ describe('Getting Started', () => { productListItems: element.all(by.css('app-root app-product-list h3')), productListLinks: element.all(by.css('app-root app-product-list a')), productDetailsPage: element(by.css('app-root app-product-details div')), - cartPage: element(by.css('app-root app-cart')) + cartPage: element(by.css('app-root app-cart')), }; describe('General', () => { @@ -79,7 +79,6 @@ describe('Getting Started', () => { }); describe('Cart', () => { - beforeEach(async () => { await browser.get('/'); }); @@ -108,7 +107,9 @@ describe('Getting Started', () => { await purchaseButton.click(); const logs = await browser.manage().logs().get(logging.Type.BROWSER); - const cartMessages = logs.filter(({ message }) => message.includes('Your order has been submitted')); + const cartMessages = logs.filter(({message}) => + message.includes('Your order has been submitted'), + ); expect(cartMessages.length).toBe(1); }); diff --git a/adev/src/content/examples/getting-started/src/app/app.component.ts b/adev/src/content/examples/getting-started/src/app/app.component.ts index 400d937a2f4..1d99c108f8c 100644 --- a/adev/src/content/examples/getting-started/src/app/app.component.ts +++ b/adev/src/content/examples/getting-started/src/app/app.component.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/getting-started/src/app/app.module.ts b/adev/src/content/examples/getting-started/src/app/app.module.ts index 5534497a262..09383e6aaac 100644 --- a/adev/src/content/examples/getting-started/src/app/app.module.ts +++ b/adev/src/content/examples/getting-started/src/app/app.module.ts @@ -1,23 +1,23 @@ // #docplaster -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; // #docregion http-client-module-import -import { HttpClientModule } from '@angular/common/http'; +import {HttpClientModule} from '@angular/common/http'; // #enddocregion http-client-module-import -import { ReactiveFormsModule } from '@angular/forms'; +import {ReactiveFormsModule} from '@angular/forms'; -import { AppComponent } from './app.component'; -import { TopBarComponent } from './top-bar/top-bar.component'; -import { ProductListComponent } from './product-list/product-list.component'; +import {AppComponent} from './app.component'; +import {TopBarComponent} from './top-bar/top-bar.component'; +import {ProductListComponent} from './product-list/product-list.component'; // #docregion declare-product-alerts -import { ProductAlertsComponent } from './product-alerts/product-alerts.component'; +import {ProductAlertsComponent} from './product-alerts/product-alerts.component'; // #enddocregion declare-product-alerts -import { ProductDetailsComponent } from './product-details/product-details.component'; +import {ProductDetailsComponent} from './product-details/product-details.component'; // #docregion declare-cart -import { CartComponent } from './cart/cart.component'; +import {CartComponent} from './cart/cart.component'; // #enddocregion declare-cart -import { ShippingComponent } from './shipping/shipping.component'; +import {ShippingComponent} from './shipping/shipping.component'; // #docregion product-details-route, http-client-module, shipping-route, cart-route, declare-product-alerts // #docregion declare-cart @@ -31,15 +31,15 @@ import { ShippingComponent } from './shipping/shipping.component'; // #docregion product-details-route, cart-route ReactiveFormsModule, RouterModule.forRoot([ - { path: '', component: ProductListComponent }, - { path: 'products/:productId', component: ProductDetailsComponent }, -// #enddocregion product-details-route - { path: 'cart', component: CartComponent }, -// #enddocregion cart-route, http-client-module - { path: 'shipping', component: ShippingComponent }, -// #enddocregion shipping-route -// #docregion product-details-route, http-client-module, shipping-route, cart-route - ]) + {path: '', component: ProductListComponent}, + {path: 'products/:productId', component: ProductDetailsComponent}, + // #enddocregion product-details-route + {path: 'cart', component: CartComponent}, + // #enddocregion cart-route, http-client-module + {path: 'shipping', component: ShippingComponent}, + // #enddocregion shipping-route + // #docregion product-details-route, http-client-module, shipping-route, cart-route + ]), ], // #enddocregion cart-route // #docregion declare-product-alerts, declare-cart @@ -53,13 +53,11 @@ import { ShippingComponent } from './shipping/shipping.component'; // #enddocregion product-details-route CartComponent, // #enddocregion declare-cart -// #enddocregion http-client-module - ShippingComponent - // #docregion declare-product-alerts, http-client-module, product-details-route, declare-cart + // #enddocregion http-client-module + ShippingComponent, + // #docregion declare-product-alerts, http-client-module, product-details-route, declare-cart ], // #enddocregion declare-product-alerts, product-details-route, declare-cart - bootstrap: [ - AppComponent - ] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/getting-started/src/app/cart.service.1.ts b/adev/src/content/examples/getting-started/src/app/cart.service.1.ts index 0ea267c518a..92885674aa7 100644 --- a/adev/src/content/examples/getting-started/src/app/cart.service.1.ts +++ b/adev/src/content/examples/getting-started/src/app/cart.service.1.ts @@ -1,6 +1,6 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class CartService {} diff --git a/adev/src/content/examples/getting-started/src/app/cart.service.ts b/adev/src/content/examples/getting-started/src/app/cart.service.ts index 880008b4312..e619e248ee5 100644 --- a/adev/src/content/examples/getting-started/src/app/cart.service.ts +++ b/adev/src/content/examples/getting-started/src/app/cart.service.ts @@ -1,24 +1,22 @@ // #docregion import-http -import { HttpClient } from '@angular/common/http'; +import {HttpClient} from '@angular/common/http'; // #docregion props -import { Product } from './products'; -import { Injectable } from '@angular/core'; +import {Product} from './products'; +import {Injectable} from '@angular/core'; // #enddocregion props, import-http // #docregion props, methods, inject-http, get-shipping @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class CartService { -// #enddocregion get-shipping + // #enddocregion get-shipping items: Product[] = []; -// #enddocregion props, methods + // #enddocregion props, methods - constructor( - private http: HttpClient - ) {} -// #enddocregion inject-http -// #docregion methods + constructor(private http: HttpClient) {} + // #enddocregion inject-http + // #docregion methods addToCart(product: Product) { this.items.push(product); @@ -32,12 +30,12 @@ export class CartService { this.items = []; return this.items; } -// #enddocregion methods + // #enddocregion methods -// #docregion get-shipping + // #docregion get-shipping getShippingPrices() { - return this.http.get<{type: string, price: number}[]>('/assets/shipping.json'); + return this.http.get<{type: string; price: number}[]>('/assets/shipping.json'); } -// #docregion props, methods, inject-http + // #docregion props, methods, inject-http } // #enddocregion props, methods, inject-http diff --git a/adev/src/content/examples/getting-started/src/app/cart/cart.component.1.ts b/adev/src/content/examples/getting-started/src/app/cart/cart.component.1.ts index 3a219371f86..cf98384286c 100644 --- a/adev/src/content/examples/getting-started/src/app/cart/cart.component.1.ts +++ b/adev/src/content/examples/getting-started/src/app/cart/cart.component.1.ts @@ -1,11 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-cart', templateUrl: './cart.component.html', - styleUrls: ['./cart.component.css'] + styleUrls: ['./cart.component.css'], }) -export class CartComponent { - - -} +export class CartComponent {} diff --git a/adev/src/content/examples/getting-started/src/app/cart/cart.component.2.ts b/adev/src/content/examples/getting-started/src/app/cart/cart.component.2.ts index 77d9b911466..b609bf02899 100644 --- a/adev/src/content/examples/getting-started/src/app/cart/cart.component.2.ts +++ b/adev/src/content/examples/getting-started/src/app/cart/cart.component.2.ts @@ -1,22 +1,19 @@ // #docplaster // #docregion imports -import { Component } from '@angular/core'; -import { CartService } from '../cart.service'; +import {Component} from '@angular/core'; +import {CartService} from '../cart.service'; // #enddocregion imports @Component({ selector: 'app-cart', templateUrl: './cart.component.html', - styleUrls: ['./cart.component.css'] + styleUrls: ['./cart.component.css'], }) // #docregion inject-cart, items export class CartComponent { - -// #enddocregion inject-cart + // #enddocregion inject-cart items = this.cartService.getItems(); -// #docregion inject-cart + // #docregion inject-cart - constructor( - private cartService: CartService - ) { } + constructor(private cartService: CartService) {} } diff --git a/adev/src/content/examples/getting-started/src/app/cart/cart.component.3.ts b/adev/src/content/examples/getting-started/src/app/cart/cart.component.3.ts index 9b7774e7b01..e2a4177f72c 100644 --- a/adev/src/content/examples/getting-started/src/app/cart/cart.component.3.ts +++ b/adev/src/content/examples/getting-started/src/app/cart/cart.component.3.ts @@ -1,21 +1,17 @@ -import { Component, OnInit } from '@angular/core'; -import { CartService } from '../cart.service'; +import {Component, OnInit} from '@angular/core'; +import {CartService} from '../cart.service'; @Component({ selector: 'app-cart', templateUrl: './cart.component.html', - styleUrls: ['./cart.component.css'] + styleUrls: ['./cart.component.css'], }) export class CartComponent implements OnInit { - items; - constructor( - private cartService: CartService - ) { } + constructor(private cartService: CartService) {} - ngOnInit(): void { + ngOnInit(): void { this.items = this.cartService.getItems(); } - } diff --git a/adev/src/content/examples/getting-started/src/app/cart/cart.component.ts b/adev/src/content/examples/getting-started/src/app/cart/cart.component.ts index 340d122ee54..26806c7b77d 100644 --- a/adev/src/content/examples/getting-started/src/app/cart/cart.component.ts +++ b/adev/src/content/examples/getting-started/src/app/cart/cart.component.ts @@ -1,33 +1,32 @@ // #docplaster // #docregion imports -import { Component } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; +import {Component} from '@angular/core'; +import {FormBuilder} from '@angular/forms'; -import { CartService } from '../cart.service'; +import {CartService} from '../cart.service'; // #enddocregion imports @Component({ selector: 'app-cart', templateUrl: './cart.component.html', - styleUrls: ['./cart.component.css'] + styleUrls: ['./cart.component.css'], }) // #docregion inject-form-builder, checkout-form-group export class CartComponent { - // #enddocregion inject-form-builder items = this.cartService.getItems(); checkoutForm = this.formBuilder.group({ name: '', - address: '' + address: '', }); -// #docregion inject-form-builder + // #docregion inject-form-builder constructor( private cartService: CartService, private formBuilder: FormBuilder, ) {} -// #enddocregion inject-form-builder, checkout-form-group + // #enddocregion inject-form-builder, checkout-form-group onSubmit(): void { // Process checkout data here @@ -35,5 +34,5 @@ export class CartComponent { console.warn('Your order has been submitted', this.checkoutForm.value); this.checkoutForm.reset(); } -// #docregion inject-form-builder, checkout-form-group + // #docregion inject-form-builder, checkout-form-group } diff --git a/adev/src/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts b/adev/src/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts index 6f3e958a340..693f7b33660 100644 --- a/adev/src/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts +++ b/adev/src/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts @@ -1,20 +1,18 @@ // #docplaster // #docregion imports -import { Component, Input } from '@angular/core'; -import { Product } from '../products'; +import {Component, Input} from '@angular/core'; +import {Product} from '../products'; // #enddocregion imports // #docregion as-generated @Component({ selector: 'app-product-alerts', templateUrl: './product-alerts.component.html', - styleUrls: ['./product-alerts.component.css'] + styleUrls: ['./product-alerts.component.css'], }) // #docregion input-decorator export class ProductAlertsComponent { - -// #enddocregion as-generated + // #enddocregion as-generated @Input() product: Product | undefined; -// #docregion as-generated - + // #docregion as-generated } diff --git a/adev/src/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts b/adev/src/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts index dbe828dfecb..97d933cb5df 100644 --- a/adev/src/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts +++ b/adev/src/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts @@ -1,13 +1,13 @@ // #docplaster // #docregion imports -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { Product } from '../products'; +import {Component, Input, Output, EventEmitter} from '@angular/core'; +import {Product} from '../products'; // #enddocregion imports @Component({ selector: 'app-product-alerts', templateUrl: './product-alerts.component.html', - styleUrls: ['./product-alerts.component.css'] + styleUrls: ['./product-alerts.component.css'], }) // #docregion input-output export class ProductAlertsComponent { diff --git a/adev/src/content/examples/getting-started/src/app/product-details/product-details.component.1.ts b/adev/src/content/examples/getting-started/src/app/product-details/product-details.component.1.ts index 8ce3b685b1a..3cf52ee6d6f 100644 --- a/adev/src/content/examples/getting-started/src/app/product-details/product-details.component.1.ts +++ b/adev/src/content/examples/getting-started/src/app/product-details/product-details.component.1.ts @@ -1,23 +1,22 @@ // #docplaster // #docregion imports -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; -import { Product, products } from '../products'; +import {Product, products} from '../products'; // #enddocregion imports @Component({ selector: 'app-product-details', templateUrl: './product-details.component.html', - styleUrls: ['./product-details.component.css'] + styleUrls: ['./product-details.component.css'], }) // #docregion props-methods, product-prop export class ProductDetailsComponent implements OnInit { - product: Product | undefined; // #enddocregion product-prop - constructor(private route: ActivatedRoute) { } + constructor(private route: ActivatedRoute) {} // #enddocregion props-methods // #docregion get-product @@ -27,7 +26,7 @@ export class ProductDetailsComponent implements OnInit { const productIdFromRoute = Number(routeParams.get('productId')); // Find the product that correspond with the id provided in route. - this.product = products.find(product => product.id === productIdFromRoute); + this.product = products.find((product) => product.id === productIdFromRoute); } // #enddocregion get-product // #docregion product-prop diff --git a/adev/src/content/examples/getting-started/src/app/product-details/product-details.component.ts b/adev/src/content/examples/getting-started/src/app/product-details/product-details.component.ts index c690732fa12..bd7416f5679 100644 --- a/adev/src/content/examples/getting-started/src/app/product-details/product-details.component.ts +++ b/adev/src/content/examples/getting-started/src/app/product-details/product-details.component.ts @@ -1,29 +1,28 @@ // #docplaster // #docregion cart-service -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; -import { Product, products } from '../products'; -import { CartService } from '../cart.service'; +import {Product, products} from '../products'; +import {CartService} from '../cart.service'; // #enddocregion cart-service @Component({ selector: 'app-product-details', templateUrl: './product-details.component.html', - styleUrls: ['./product-details.component.css'] + styleUrls: ['./product-details.component.css'], }) // #docregion inject-cart-service, add-to-cart export class ProductDetailsComponent implements OnInit { - -// #enddocregion add-to-cart, inject-cart-service + // #enddocregion add-to-cart, inject-cart-service product: Product | undefined; -// #docregion inject-cart-service + // #docregion inject-cart-service constructor( private route: ActivatedRoute, - private cartService: CartService - ) { } -// #enddocregion inject-cart-service + private cartService: CartService, + ) {} + // #enddocregion inject-cart-service ngOnInit() { // First get the product id from the current route. @@ -31,13 +30,13 @@ export class ProductDetailsComponent implements OnInit { const productIdFromRoute = Number(routeParams.get('productId')); // Find the product that correspond with the id provided in route. - this.product = products.find(product => product.id === productIdFromRoute); + this.product = products.find((product) => product.id === productIdFromRoute); } -// #docregion add-to-cart + // #docregion add-to-cart addToCart(product: Product) { this.cartService.addToCart(product); window.alert('Your product has been added to the cart!'); } -// #docregion inject-cart-service + // #docregion inject-cart-service } diff --git a/adev/src/content/examples/getting-started/src/app/product-list/product-list.component.1.ts b/adev/src/content/examples/getting-started/src/app/product-list/product-list.component.1.ts index 2fd806464b4..ed62175d999 100644 --- a/adev/src/content/examples/getting-started/src/app/product-list/product-list.component.1.ts +++ b/adev/src/content/examples/getting-started/src/app/product-list/product-list.component.1.ts @@ -1,13 +1,12 @@ -import { Component } from '@angular/core'; -import { products } from '../products'; +import {Component} from '@angular/core'; +import {products} from '../products'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', - styleUrls: ['./product-list.component.css'] + styleUrls: ['./product-list.component.css'], }) export class ProductListComponent { - products = [...products]; share() { diff --git a/adev/src/content/examples/getting-started/src/app/product-list/product-list.component.ts b/adev/src/content/examples/getting-started/src/app/product-list/product-list.component.ts index 7dd9ff68f6d..af31a9980a8 100644 --- a/adev/src/content/examples/getting-started/src/app/product-list/product-list.component.ts +++ b/adev/src/content/examples/getting-started/src/app/product-list/product-list.component.ts @@ -1,15 +1,14 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { products } from '../products'; +import {products} from '../products'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', - styleUrls: ['./product-list.component.css'] + styleUrls: ['./product-list.component.css'], }) // #docregion on-notify export class ProductListComponent { - products = [...products]; share() { diff --git a/adev/src/content/examples/getting-started/src/app/products.ts b/adev/src/content/examples/getting-started/src/app/products.ts index 4d9980709c5..951ba821bb8 100644 --- a/adev/src/content/examples/getting-started/src/app/products.ts +++ b/adev/src/content/examples/getting-started/src/app/products.ts @@ -10,18 +10,18 @@ export const products: Product[] = [ id: 1, name: 'Phone XL', price: 799, - description: 'A large phone with one of the best screens' + description: 'A large phone with one of the best screens', }, { id: 2, name: 'Phone Mini', price: 699, - description: 'A great phone with one of the best cameras' + description: 'A great phone with one of the best cameras', }, { id: 3, name: 'Phone Standard', price: 299, - description: '' - } + description: '', + }, ]; diff --git a/adev/src/content/examples/getting-started/src/app/shipping/shipping.component.1.ts b/adev/src/content/examples/getting-started/src/app/shipping/shipping.component.1.ts index 7d57bffc800..4985d5b02d8 100644 --- a/adev/src/content/examples/getting-started/src/app/shipping/shipping.component.1.ts +++ b/adev/src/content/examples/getting-started/src/app/shipping/shipping.component.1.ts @@ -1,10 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-shipping', templateUrl: './shipping.component.html', - styleUrls: ['./shipping.component.css'] + styleUrls: ['./shipping.component.css'], }) -export class ShippingComponent { - -} +export class ShippingComponent {} diff --git a/adev/src/content/examples/getting-started/src/app/shipping/shipping.component.ts b/adev/src/content/examples/getting-started/src/app/shipping/shipping.component.ts index d12b033d9cd..406b52a5608 100644 --- a/adev/src/content/examples/getting-started/src/app/shipping/shipping.component.ts +++ b/adev/src/content/examples/getting-started/src/app/shipping/shipping.component.ts @@ -1,29 +1,27 @@ // #docplaster // #docregion imports -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; -import { Observable } from 'rxjs'; -import { CartService } from '../cart.service'; +import {Observable} from 'rxjs'; +import {CartService} from '../cart.service'; // #enddocregion @Component({ selector: 'app-shipping', templateUrl: './shipping.component.html', - styleUrls: ['./shipping.component.css'] + styleUrls: ['./shipping.component.css'], }) // #docregion props export class ShippingComponent implements OnInit { + shippingCosts!: Observable<{type: string; price: number}[]>; + // #enddocregion props - shippingCosts!: Observable<{ type: string, price: number }[]>; -// #enddocregion props - -// #docregion inject-cart-service - constructor(private cartService: CartService) { } -// #enddocregion inject-cart-service -// #docregion props + // #docregion inject-cart-service + constructor(private cartService: CartService) {} + // #enddocregion inject-cart-service + // #docregion props ngOnInit(): void { - this.shippingCosts = this.cartService.getShippingPrices(); + this.shippingCosts = this.cartService.getShippingPrices(); } - } diff --git a/adev/src/content/examples/getting-started/src/app/top-bar/top-bar.component.ts b/adev/src/content/examples/getting-started/src/app/top-bar/top-bar.component.ts index 9d24f963e30..7a0f996be12 100644 --- a/adev/src/content/examples/getting-started/src/app/top-bar/top-bar.component.ts +++ b/adev/src/content/examples/getting-started/src/app/top-bar/top-bar.component.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-top-bar', templateUrl: './top-bar.component.html', - styleUrls: ['./top-bar.component.css'] + styleUrls: ['./top-bar.component.css'], }) -export class TopBarComponent { } +export class TopBarComponent {} diff --git a/adev/src/content/examples/getting-started/src/main.ts b/adev/src/content/examples/getting-started/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/getting-started/src/main.ts +++ b/adev/src/content/examples/getting-started/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts index ccf31b92f7d..ec6fffe7da0 100644 --- a/adev/src/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, by, element } from 'protractor'; +import {browser, by, element} from 'protractor'; describe('Hierarchical dependency injection', () => { - beforeAll(() => browser.get('')); describe('Heroes Scenario', () => { @@ -14,9 +13,15 @@ describe('Hierarchical dependency injection', () => { heroCardEl: element(by.css('app-heroes-list app-hero-tax-return')), // first hero tax-return taxReturnNameEl: element.all(by.css('app-heroes-list app-hero-tax-return #name')).get(0), incomeInputEl: element.all(by.css('app-heroes-list app-hero-tax-return input')).get(0), - cancelButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Cancel')), - closeButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Close')), - saveButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Save')) + cancelButtonEl: element( + by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Cancel'), + ), + closeButtonEl: element( + by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Close'), + ), + saveButtonEl: element( + by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Save'), + ), }; it('should list multiple heroes', async () => { @@ -44,7 +49,10 @@ describe('Hierarchical dependency injection', () => { expect(await page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777'); await page.cancelButtonEl.click(); - expect(await page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777'); + expect(await page.incomeInputEl.getAttribute('value')).not.toBe( + '777', + 'income should not be 777', + ); }); it('should be able to save change', async () => { @@ -53,14 +61,16 @@ describe('Hierarchical dependency injection', () => { expect(await page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999'); await page.saveButtonEl.click(); - expect(await page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999'); + expect(await page.incomeInputEl.getAttribute('value')).toBe( + '999', + 'income should still be 999', + ); }); it('should be able to close tax-return', async () => { await page.saveButtonEl.click(); expect(await element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0); }); - }); describe('Villains Scenario', () => { @@ -70,7 +80,6 @@ describe('Hierarchical dependency injection', () => { }); describe('Cars Scenario', () => { - it('A-component should use expected services', async () => { expect(await element(by.css('a-car')).getText()).toContain('C1-E1-T1'); }); diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/app.component.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/app.component.ts index f1376dbbc22..749cd843e3d 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/app.component.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/app.component.ts @@ -1,8 +1,8 @@ -import { NgIf } from '@angular/common'; -import { Component } from '@angular/core'; -import { CarsComponent } from './car.components'; -import { HeroesListComponent } from './heroes-list.component'; -import { VillainsListComponent } from './villains-list.component'; +import {NgIf} from '@angular/common'; +import {Component} from '@angular/core'; +import {CarsComponent} from './car.components'; +import {HeroesListComponent} from './heroes-list.component'; +import {VillainsListComponent} from './villains-list.component'; @Component({ standalone: true, @@ -27,7 +27,7 @@ import { VillainsListComponent } from './villains-list.component'; @if (showVillains) {} @if (showCars) {} `, - imports: [NgIf, CarsComponent, HeroesListComponent, VillainsListComponent] + imports: [NgIf, CarsComponent, HeroesListComponent, VillainsListComponent], }) export class AppComponent { showCars = true; diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/app.config.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/app.config.ts index 630e62bd72f..0c79cb955d4 100644 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/app.config.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/app.config.ts @@ -1,11 +1,11 @@ -import { ApplicationConfig } from '@angular/core'; -import { provideProtractorTestingSupport } from '@angular/platform-browser'; +import {ApplicationConfig} from '@angular/core'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; const appConfg: ApplicationConfig = { - providers: [ - // required for e2e testing - provideProtractorTestingSupport() - ] + providers: [ + // required for e2e testing + provideProtractorTestingSupport(), + ], }; export default appConfg; diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/car.components.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/car.components.ts index 73804093887..b077cd9a048 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/car.components.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/car.components.ts @@ -1,8 +1,12 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; import { - CarService, CarService2, CarService3, - EngineService, EngineService2, TiresService + CarService, + CarService2, + CarService3, + EngineService, + EngineService2, + TiresService, } from './car.services'; ////////// CCarComponent //////////// @@ -10,9 +14,7 @@ import { standalone: true, selector: 'c-car', template: '
    C: {{description}}
    ', - providers: [ - { provide: CarService, useClass: CarService3 } - ] + providers: [{provide: CarService, useClass: CarService3}], }) export class CCarComponent { description: string; @@ -30,10 +32,10 @@ export class CCarComponent { `, providers: [ - { provide: CarService, useClass: CarService2 }, - { provide: EngineService, useClass: EngineService2 } + {provide: CarService, useClass: CarService2}, + {provide: EngineService, useClass: EngineService2}, ], - imports: [CCarComponent] + imports: [CCarComponent], }) export class BCarComponent { description: string; @@ -49,7 +51,7 @@ export class BCarComponent { template: `
    A: {{description}}
    `, - imports: [BCarComponent] + imports: [BCarComponent], }) export class ACarComponent { description: string; @@ -64,18 +66,13 @@ export class ACarComponent { template: `

    Cars

    `, - imports: [ACarComponent] + imports: [ACarComponent], }) -export class CarsComponent { } +export class CarsComponent {} //////////////// -export const carComponents = [ - CarsComponent, - ACarComponent, BCarComponent, CCarComponent -]; +export const carComponents = [CarsComponent, ACarComponent, BCarComponent, CCarComponent]; // generic car-related services -export const carServices = [ - CarService, EngineService, TiresService -]; +export const carServices = [CarService, EngineService, TiresService]; diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/car.services.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/car.services.ts index 791e9991645..178312386a0 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/car.services.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/car.services.ts @@ -1,13 +1,17 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; /// Model /// export class Car { name = 'Avocado Motors'; - constructor(public engine: Engine, public tires: Tires) { } + constructor( + public engine: Engine, + public tires: Tires, + ) {} get description() { - return `${this.name} car with ` + - `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; + return ( + `${this.name} car with ` + `${this.engine.cylinders} cylinders and ${this.tires.make} tires.` + ); } } @@ -16,21 +20,23 @@ export class Engine { } export class Tires { - make = 'Flintstone'; + make = 'Flintstone'; model = 'Square'; } //// Engine services /// @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class EngineService { id = 'E1'; - getEngine() { return new Engine(); } + getEngine() { + return new Engine(); + } } @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class EngineService2 { id = 'E2'; @@ -43,28 +49,29 @@ export class EngineService2 { //// Tire services /// @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class TiresService { id = 'T1'; - getTires() { return new Tires(); } + getTires() { + return new Tires(); + } } /// Car Services /// @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class CarService { id = 'C1'; constructor( protected engineService: EngineService, - protected tiresService: TiresService) { } + protected tiresService: TiresService, + ) {} getCar() { - return new Car( - this.engineService.getEngine(), - this.tiresService.getTires()); + return new Car(this.engineService.getEngine(), this.tiresService.getTires()); } get name() { @@ -73,14 +80,15 @@ export class CarService { } @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class CarService2 extends CarService { override id = 'C2'; constructor( protected override engineService: EngineService, - protected override tiresService: TiresService) { + protected override tiresService: TiresService, + ) { super(engineService, tiresService); } @@ -92,14 +100,15 @@ export class CarService2 extends CarService { } @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class CarService3 extends CarService2 { override id = 'C3'; constructor( protected override engineService: EngineService, - protected override tiresService: TiresService) { + protected override tiresService: TiresService, + ) { super(engineService, tiresService); } @@ -109,4 +118,3 @@ export class CarService3 extends CarService2 { return car; } } - diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts index 5105927ebc8..d2d3d6ff9f4 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts @@ -1,19 +1,19 @@ /* eslint-disable @angular-eslint/no-output-native */ // #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { HeroTaxReturn } from './hero'; -import { HeroTaxReturnService } from './hero-tax-return.service'; -import { FormsModule } from '@angular/forms'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {HeroTaxReturn} from './hero'; +import {HeroTaxReturnService} from './hero-tax-return.service'; +import {FormsModule} from '@angular/forms'; @Component({ standalone: true, selector: 'app-hero-tax-return', templateUrl: './hero-tax-return.component.html', - styleUrls: [ './hero-tax-return.component.css' ], + styleUrls: ['./hero-tax-return.component.css'], // #docregion providers - providers: [ HeroTaxReturnService ], + providers: [HeroTaxReturnService], // #enddocregion providers, - imports: [FormsModule] + imports: [FormsModule], }) export class HeroTaxReturnComponent { message = ''; @@ -29,14 +29,16 @@ export class HeroTaxReturnComponent { this.heroTaxReturnService.taxReturn = htr; } - constructor(private heroTaxReturnService: HeroTaxReturnService) { } + constructor(private heroTaxReturnService: HeroTaxReturnService) {} - onCanceled() { + onCanceled() { this.flashMessage('Canceled'); this.heroTaxReturnService.restoreTaxReturn(); } - onClose() { this.close.emit(); } + onClose() { + this.close.emit(); + } onSaved() { this.flashMessage('Saved'); @@ -45,6 +47,6 @@ export class HeroTaxReturnComponent { flashMessage(msg: string) { this.message = msg; - setTimeout(() => this.message = '', 500); + setTimeout(() => (this.message = ''), 500); } } diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts index 30593be3bd7..cf695554465 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts @@ -1,18 +1,18 @@ // #docregion -import { Injectable } from '@angular/core'; -import { HeroTaxReturn } from './hero'; -import { HeroesService } from './heroes.service'; +import {Injectable} from '@angular/core'; +import {HeroTaxReturn} from './hero'; +import {HeroesService} from './heroes.service'; @Injectable() export class HeroTaxReturnService { private currentTaxReturn!: HeroTaxReturn; private originalTaxReturn!: HeroTaxReturn; - constructor(private heroService: HeroesService) { } + constructor(private heroService: HeroesService) {} set taxReturn(htr: HeroTaxReturn) { this.originalTaxReturn = htr; - this.currentTaxReturn = htr.clone(); + this.currentTaxReturn = htr.clone(); } get taxReturn(): HeroTaxReturn { diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero.ts index 954d6520176..c9e71aa755e 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/hero.ts @@ -13,13 +13,22 @@ export class HeroTaxReturn { constructor( public id = nextId++, public hero: Hero, - public income = 0 ) { - if (id === 0) { id = nextId++; } + public income = 0, + ) { + if (id === 0) { + id = nextId++; } + } - get name() { return this.hero.name; } - get tax() { return this.income ? .10 * this.income : 0; } - get tid() { return this.hero.tid; } + get name() { + return this.hero.name; + } + get tax() { + return this.income ? 0.1 * this.income : 0; + } + get tid() { + return this.hero.tid; + } toString() { return `${this.hero.name}`; diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts index babb5bfb8bb..d61ee15d111 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts @@ -1,11 +1,11 @@ // #docregion -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; +import {Component} from '@angular/core'; +import {Observable} from 'rxjs'; -import { Hero, HeroTaxReturn } from './hero'; -import { HeroesService } from './heroes.service'; -import { HeroTaxReturnComponent } from './hero-tax-return.component'; -import { AsyncPipe, NgFor } from '@angular/common'; +import {Hero, HeroTaxReturn} from './hero'; +import {HeroesService} from './heroes.service'; +import {HeroTaxReturnComponent} from './hero-tax-return.component'; +import {AsyncPipe, NgFor} from '@angular/common'; @Component({ standalone: true, @@ -28,14 +28,16 @@ import { AsyncPipe, NgFor } from '@angular/common'; } `, - styles: [` + styles: [ + ` li button { font-size: inherit; margin: 0.3rem; padding: 0.5rem; } - `], - imports: [HeroTaxReturnComponent, NgFor, AsyncPipe] + `, + ], + imports: [HeroTaxReturnComponent, NgFor, AsyncPipe], }) export class HeroesListComponent { heroes: Observable; @@ -46,10 +48,9 @@ export class HeroesListComponent { } showTaxReturn(hero: Hero) { - this.heroesService.getTaxReturn(hero) - .subscribe(htr => { + this.heroesService.getTaxReturn(hero).subscribe((htr) => { // show if not currently shown - if (!this.selectedTaxReturns.find(tr => tr.id === htr.id)) { + if (!this.selectedTaxReturns.find((tr) => tr.id === htr.id)) { this.selectedTaxReturns.push(htr); } }); diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts index 76b8ec09bb9..b93deb73091 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts @@ -1,21 +1,21 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { Observable, Observer } from 'rxjs'; +import {Observable, Observer} from 'rxjs'; -import { Hero, HeroTaxReturn } from './hero'; +import {Hero, HeroTaxReturn} from './hero'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class HeroesService { heroes: Hero[] = [ - { id: 1, name: 'RubberMan', tid: '082-27-5678'}, - { id: 2, name: 'Tornado', tid: '099-42-4321'} + {id: 1, name: 'RubberMan', tid: '082-27-5678'}, + {id: 2, name: 'Tornado', tid: '099-42-4321'}, ]; heroTaxReturns: HeroTaxReturn[] = [ new HeroTaxReturn(10, this.heroes[0], 35000), - new HeroTaxReturn(20, this.heroes[1], 1250000) + new HeroTaxReturn(20, this.heroes[1], 1250000), ]; getHeroes(): Observable { @@ -27,7 +27,7 @@ export class HeroesService { getTaxReturn(hero: Hero): Observable { return new Observable((observer: Observer) => { - const htr = this.heroTaxReturns.find(t => t.hero.id === hero.id); + const htr = this.heroTaxReturns.find((t) => t.hero.id === hero.id); observer.next(htr || new HeroTaxReturn(0, hero)); observer.complete(); }); @@ -35,7 +35,7 @@ export class HeroesService { saveTaxReturn(heroTaxReturn: HeroTaxReturn): Observable { return new Observable((observer: Observer) => { - const htr = this.heroTaxReturns.find(t => t.id === heroTaxReturn.id); + const htr = this.heroTaxReturns.find((t) => t.id === heroTaxReturn.id); if (htr) { heroTaxReturn = Object.assign(htr, heroTaxReturn); // demo: mutate } else { diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts index 2fe704c80bb..f959e477fa1 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts @@ -1,17 +1,17 @@ // #docregion -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; +import {Component} from '@angular/core'; +import {Observable} from 'rxjs'; -import { Villain, VillainsService } from './villains.service'; -import { AsyncPipe, NgFor } from '@angular/common'; +import {Villain, VillainsService} from './villains.service'; +import {AsyncPipe, NgFor} from '@angular/common'; // #docregion metadata @Component({ standalone: true, selector: 'app-villains-list', templateUrl: './villains-list.component.html', - providers: [ VillainsService ], - imports: [ NgFor, AsyncPipe ] + providers: [VillainsService], + imports: [NgFor, AsyncPipe], }) // #enddocregion metadata export class VillainsListComponent { diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts index 5c898c2aa02..9e8f35eb744 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts @@ -1,6 +1,6 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { of } from 'rxjs'; +import {of} from 'rxjs'; export interface Villain { id: number; @@ -9,9 +9,9 @@ export interface Villain { @Injectable() export class VillainsService { - villains: Villain[] = [ - { id: 1, name: 'Dr. Evil'}, - { id: 2, name: 'Moriarty'} + villains: Villain[] = [ + {id: 1, name: 'Dr. Evil'}, + {id: 2, name: 'Moriarty'}, ]; getVillains() { diff --git a/adev/src/content/examples/hierarchical-dependency-injection/src/main.ts b/adev/src/content/examples/hierarchical-dependency-injection/src/main.ts index 32b21e0d5fb..da89ac56ff4 100755 --- a/adev/src/content/examples/hierarchical-dependency-injection/src/main.ts +++ b/adev/src/content/examples/hierarchical-dependency-injection/src/main.ts @@ -1,5 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; import appConfg from './app/app.config'; // #docregion diff --git a/adev/src/content/examples/i18n/doc-files/app.locale_data.ts b/adev/src/content/examples/i18n/doc-files/app.locale_data.ts index 3c99a59e090..4e5fe7b9ea4 100644 --- a/adev/src/content/examples/i18n/doc-files/app.locale_data.ts +++ b/adev/src/content/examples/i18n/doc-files/app.locale_data.ts @@ -1,4 +1,4 @@ -import { registerLocaleData } from '@angular/common'; +import {registerLocaleData} from '@angular/common'; import localeFr from '@angular/common/locales/fr'; // the second parameter 'fr-FR' is optional diff --git a/adev/src/content/examples/i18n/doc-files/app.locale_data_extra.ts b/adev/src/content/examples/i18n/doc-files/app.locale_data_extra.ts index f31ce034bb3..692a59a5434 100644 --- a/adev/src/content/examples/i18n/doc-files/app.locale_data_extra.ts +++ b/adev/src/content/examples/i18n/doc-files/app.locale_data_extra.ts @@ -1,4 +1,4 @@ -import { registerLocaleData } from '@angular/common'; +import {registerLocaleData} from '@angular/common'; import localeFrExtra from '@angular/common/locales/extra/fr'; import localeFr from '@angular/common/locales/fr'; diff --git a/adev/src/content/examples/i18n/doc-files/app.module.ts b/adev/src/content/examples/i18n/doc-files/app.module.ts index 02a71cc246d..cf0d31d2960 100644 --- a/adev/src/content/examples/i18n/doc-files/app.module.ts +++ b/adev/src/content/examples/i18n/doc-files/app.module.ts @@ -1,14 +1,14 @@ // For documenting NgModule Apps only // #docregion -import { LOCALE_ID, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import {LOCALE_ID, NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; -import { AppComponent } from '../src/app/app.component'; +import {AppComponent} from '../src/app/app.component'; @NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - providers: [ { provide: LOCALE_ID, useValue: 'fr' } ], - bootstrap: [ AppComponent ] + imports: [BrowserModule], + declarations: [AppComponent], + providers: [{provide: LOCALE_ID, useValue: 'fr'}], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/i18n/doc-files/locale_plural_function.ts b/adev/src/content/examples/i18n/doc-files/locale_plural_function.ts index d99e2f47665..1c60cb36281 100644 --- a/adev/src/content/examples/i18n/doc-files/locale_plural_function.ts +++ b/adev/src/content/examples/i18n/doc-files/locale_plural_function.ts @@ -1,7 +1,8 @@ /* eslint-disable */ // #docregion function plural(n: number): number { - let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length; + let i = Math.floor(Math.abs(n)), + v = n.toString().replace(/^[^.]*\.?/, '').length; if (i === 1 && v === 0) return 1; return 5; } diff --git a/adev/src/content/examples/i18n/doc-files/main.1.ts b/adev/src/content/examples/i18n/doc-files/main.1.ts index 9cd15da95dd..589f3f5e386 100644 --- a/adev/src/content/examples/i18n/doc-files/main.1.ts +++ b/adev/src/content/examples/i18n/doc-files/main.1.ts @@ -1,4 +1,4 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; bootstrapApplication(AppComponent); diff --git a/adev/src/content/examples/i18n/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/i18n/e2e/src/app.e2e-spec.ts index 42c50f03a7b..4d576a6736f 100644 --- a/adev/src/content/examples/i18n/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/i18n/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('i18n E2E Tests', () => { - beforeEach(() => browser.get('')); it('should display i18n translated welcome: Bonjour !', async () => { @@ -39,5 +38,4 @@ describe('i18n E2E Tests', () => { await element.all(by.css('button')).get(4).click(); expect(await nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`); }); - }); diff --git a/adev/src/content/examples/i18n/src/app/app.component.ts b/adev/src/content/examples/i18n/src/app/app.component.ts index 4712daf5f6c..b3a1d975b96 100644 --- a/adev/src/content/examples/i18n/src/app/app.component.ts +++ b/adev/src/content/examples/i18n/src/app/app.component.ts @@ -1,10 +1,10 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ standalone: true, selector: 'app-root', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) export class AppComponent { minutes = 0; @@ -14,8 +14,13 @@ export class AppComponent { inc(i: number) { this.minutes = Math.min(5, Math.max(0, this.minutes + i)); } - male() { this.gender = 'male'; } - female() { this.gender = 'female'; } - other() { this.gender = 'other'; } + male() { + this.gender = 'male'; + } + female() { + this.gender = 'female'; + } + other() { + this.gender = 'other'; + } } - diff --git a/adev/src/content/examples/i18n/src/main.ts b/adev/src/content/examples/i18n/src/main.ts index cfc7d025db6..d34775046de 100644 --- a/adev/src/content/examples/i18n/src/main.ts +++ b/adev/src/content/examples/i18n/src/main.ts @@ -2,12 +2,12 @@ import '@angular/common/locales/global/fr'; // #enddocregion global-locale -import { provideProtractorTestingSupport } from '@angular/platform-browser'; -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; bootstrapApplication(AppComponent, { providers: [ provideProtractorTestingSupport(), // essential for e2e testing - ] + ], }); diff --git a/adev/src/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts index 86cf1d592a6..85767b0a32e 100644 --- a/adev/src/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts @@ -1,16 +1,12 @@ -import { browser, element, by, logging, ExpectedConditions as EC } from 'protractor'; +import {browser, element, by, logging, ExpectedConditions as EC} from 'protractor'; describe('Inputs and Outputs', () => { - beforeEach(() => browser.get('')); - // helper function used to test what's logged to the console + // helper function used to test what's logged to the console async function logChecker(contents: string) { - const logs = await browser - .manage() - .logs() - .get(logging.Type.BROWSER); - const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1); + const logs = await browser.manage().logs().get(logging.Type.BROWSER); + const messages = logs.filter(({message}) => message.indexOf(contents) !== -1); expect(messages.length).toBeGreaterThan(0); } @@ -59,5 +55,4 @@ describe('Inputs and Outputs', () => { await addToParentButton.click(); expect(await addedItem.getText()).toEqual('Television'); }); - }); diff --git a/adev/src/content/examples/inputs-outputs/src/app/aliasing.component.ts b/adev/src/content/examples/inputs-outputs/src/app/aliasing.component.ts index fffa67a124d..d2d053f65af 100644 --- a/adev/src/content/examples/inputs-outputs/src/app/aliasing.component.ts +++ b/adev/src/content/examples/inputs-outputs/src/app/aliasing.component.ts @@ -2,7 +2,7 @@ @angular-eslint/no-inputs-metadata-property, @angular-eslint/no-output-rename, @angular-eslint/no-outputs-metadata-property */ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; @Component({ standalone: true, @@ -15,17 +15,15 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; `, inputs: ['input1: saveForLaterItem'], // propertyName:alias - outputs: ['outputEvent1: saveForLaterEvent'] + outputs: ['outputEvent1: saveForLaterEvent'], }) export class AliasingComponent { - input1 = ''; outputEvent1: EventEmitter = new EventEmitter(); @Input('wishListItem') input2 = ''; // @Input(alias) @Output('wishEvent') outputEvent2 = new EventEmitter(); // @Output(alias) propertyName = ... - saveIt() { console.warn('Child says: emitting outputEvent1 with', this.input1); this.outputEvent1.emit(this.input1); @@ -35,5 +33,4 @@ export class AliasingComponent { console.warn('Child says: emitting outputEvent2', this.input2); this.outputEvent2.emit(this.input2); } - } diff --git a/adev/src/content/examples/inputs-outputs/src/app/app.component.ts b/adev/src/content/examples/inputs-outputs/src/app/app.component.ts index 4a457bc574f..bc2cc8bb1cd 100644 --- a/adev/src/content/examples/inputs-outputs/src/app/app.component.ts +++ b/adev/src/content/examples/inputs-outputs/src/app/app.component.ts @@ -1,13 +1,13 @@ // #docplaster -import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; +import {Component} from '@angular/core'; +import {NgFor} from '@angular/common'; -import { AliasingComponent } from './aliasing.component'; -import { InputOutputComponent } from './input-output.component'; -import { InTheMetadataComponent } from './in-the-metadata.component'; -import { ItemDetailComponent } from './item-detail.component'; -import { ItemDetailMetadataComponent } from './item-details-metadata.component'; -import { ItemOutputComponent } from './item-output.component'; +import {AliasingComponent} from './aliasing.component'; +import {InputOutputComponent} from './input-output.component'; +import {InTheMetadataComponent} from './in-the-metadata.component'; +import {ItemDetailComponent} from './item-detail.component'; +import {ItemDetailMetadataComponent} from './item-details-metadata.component'; +import {ItemOutputComponent} from './item-output.component'; @Component({ standalone: true, @@ -20,21 +20,21 @@ import { ItemOutputComponent } from './item-output.component'; ItemDetailComponent, ItemDetailMetadataComponent, ItemOutputComponent, - NgFor - ] + NgFor, + ], }) // #docregion parent-property // #docregion add-new-item export class AppComponent { -// #enddocregion add-new-item + // #enddocregion add-new-item currentItem = 'Television'; // #enddocregion parent-property lastChanceItem = 'Beanbag'; -// #docregion add-new-item + // #docregion add-new-item items = ['item1', 'item2', 'item3', 'item4']; -// #enddocregion add-new-item + // #enddocregion add-new-item wishlist = ['Drone', 'Computer']; // #docregion add-new-item @@ -44,7 +44,6 @@ export class AppComponent { } // #enddocregion add-new-item - crossOffItem(item: string) { console.warn(`Parent says: crossing off ${item}.`); } @@ -62,8 +61,8 @@ export class AppComponent { this.wishlist.push(wish); console.warn(this.wishlist); } -// #docregion add-new-item -// #docregion parent-property + // #docregion add-new-item + // #docregion parent-property } // #enddocregion add-new-item // #enddocregion parent-property diff --git a/adev/src/content/examples/inputs-outputs/src/app/in-the-metadata.component.ts b/adev/src/content/examples/inputs-outputs/src/app/in-the-metadata.component.ts index be9c05a9755..4659503c4cb 100644 --- a/adev/src/content/examples/inputs-outputs/src/app/in-the-metadata.component.ts +++ b/adev/src/content/examples/inputs-outputs/src/app/in-the-metadata.component.ts @@ -1,5 +1,5 @@ /* eslint-disable @angular-eslint/no-inputs-metadata-property, @angular-eslint/no-outputs-metadata-property */ -import { Component, EventEmitter } from '@angular/core'; +import {Component, EventEmitter} from '@angular/core'; @Component({ standalone: true, @@ -10,11 +10,9 @@ import { Component, EventEmitter } from '@angular/core'; `, inputs: ['clearanceItem'], - outputs: ['buyEvent'] + outputs: ['buyEvent'], }) -export class InTheMetadataComponent { - - +export class InTheMetadataComponent { buyEvent = new EventEmitter(); clearanceItem = ''; @@ -22,5 +20,4 @@ export class InTheMetadataComponent { console.warn('Child says: emitting buyEvent with', this.clearanceItem); this.buyEvent.emit(this.clearanceItem); } - } diff --git a/adev/src/content/examples/inputs-outputs/src/app/input-output.component.ts b/adev/src/content/examples/inputs-outputs/src/app/input-output.component.ts index b2a0252453d..108cda63c60 100644 --- a/adev/src/content/examples/inputs-outputs/src/app/input-output.component.ts +++ b/adev/src/content/examples/inputs-outputs/src/app/input-output.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import {Component, Input, Output, EventEmitter} from '@angular/core'; @Component({ standalone: true, @@ -9,7 +9,6 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; `, }) export class InputOutputComponent { - @Input() item = ''; @Output() deleteRequest = new EventEmitter(); diff --git a/adev/src/content/examples/inputs-outputs/src/app/item-detail.component.ts b/adev/src/content/examples/inputs-outputs/src/app/item-detail.component.ts index 6d11fa75b98..d5c73b312f9 100644 --- a/adev/src/content/examples/inputs-outputs/src/app/item-detail.component.ts +++ b/adev/src/content/examples/inputs-outputs/src/app/item-detail.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion use-input -import { Component, Input } from '@angular/core'; // First, import Input +import {Component, Input} from '@angular/core'; // First, import Input // #enddocregion use-input @Component({ diff --git a/adev/src/content/examples/inputs-outputs/src/app/item-details-metadata.component.ts b/adev/src/content/examples/inputs-outputs/src/app/item-details-metadata.component.ts index b2e6dfa3d11..f4561b77a76 100644 --- a/adev/src/content/examples/inputs-outputs/src/app/item-details-metadata.component.ts +++ b/adev/src/content/examples/inputs-outputs/src/app/item-details-metadata.component.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion use-input-metadata-required -import { Component, Input } from '@angular/core'; // First, import Input +import {Component, Input} from '@angular/core'; // First, import Input // #enddocregion use-input-metadata-required // #docregion use-input-metadata-boolean-transform -import { booleanAttribute } from '@angular/core'; // First, import booleanAttribute +import {booleanAttribute} from '@angular/core'; // First, import booleanAttribute // #enddocregion use-input-metadata-boolean-transform @Component({ standalone: true, @@ -15,9 +15,8 @@ import { booleanAttribute } from '@angular/core'; // First, import booleanAttrib Today's item: {{item}} Item's Availability: {{itemAvailability}}

    - ` + `, }) - export class ItemDetailMetadataComponent { // #docregion use-input-metadata-required @Input({required: true}) item!: string; // Second, decorate the property with required metadata @@ -27,4 +26,3 @@ export class ItemDetailMetadataComponent { @Input({transform: booleanAttribute}) itemAvailability!: boolean; // Second, decorate the property with transform // #enddocregion use-input-metadata-boolean-transform } - diff --git a/adev/src/content/examples/inputs-outputs/src/app/item-output.component.ts b/adev/src/content/examples/inputs-outputs/src/app/item-output.component.ts index 4474de1a7b9..c708bc8d3f1 100644 --- a/adev/src/content/examples/inputs-outputs/src/app/item-output.component.ts +++ b/adev/src/content/examples/inputs-outputs/src/app/item-output.component.ts @@ -1,4 +1,4 @@ -import { Component, Output, EventEmitter } from '@angular/core'; +import {Component, Output, EventEmitter} from '@angular/core'; @Component({ standalone: true, @@ -7,11 +7,11 @@ import { Component, Output, EventEmitter } from '@angular/core'; }) // #docregion item-output-class export class ItemOutputComponent { -// #docregion item-output + // #docregion item-output @Output() newItemEvent = new EventEmitter(); -// #enddocregion item-output + // #enddocregion item-output addNewItem(value: string) { this.newItemEvent.emit(value); } diff --git a/adev/src/content/examples/inputs-outputs/src/main.ts b/adev/src/content/examples/inputs-outputs/src/main.ts index 5a2dcb1b362..52a1ee4382f 100644 --- a/adev/src/content/examples/inputs-outputs/src/main.ts +++ b/adev/src/content/examples/inputs-outputs/src/main.ts @@ -1,9 +1,9 @@ -import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/platform-browser'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; import {AppComponent} from './app/app.component'; bootstrapApplication(AppComponent, { providers: [ provideProtractorTestingSupport(), // essential for e2e testing - ] + ], }); diff --git a/adev/src/content/examples/interpolation/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/interpolation/e2e/src/app.e2e-spec.ts index a2ce3747e72..c5e3929bcfe 100644 --- a/adev/src/content/examples/interpolation/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/interpolation/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Interpolation e2e tests', () => { - beforeEach(() => browser.get('')); it('should display Interpolation and Template Expressions', async () => { @@ -13,7 +12,9 @@ describe('Interpolation e2e tests', () => { }); it('should display The sum of 1 + 1 is not 4.', async () => { - expect(await element.all(by.css('p:last-child')).get(0).getText()).toBe(`The sum of 1 + 1 is not 4.`); + expect(await element.all(by.css('p:last-child')).get(0).getText()).toBe( + `The sum of 1 + 1 is not 4.`, + ); }); it('should display Expression Context', async () => { diff --git a/adev/src/content/examples/interpolation/src/app/app.component.1.ts b/adev/src/content/examples/interpolation/src/app/app.component.1.ts index 412078270c5..b16bb2aa316 100644 --- a/adev/src/content/examples/interpolation/src/app/app.component.1.ts +++ b/adev/src/content/examples/interpolation/src/app/app.component.1.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; +import {Component} from '@angular/core'; +import {NgFor} from '@angular/common'; // #docregion var-collision @Component({ diff --git a/adev/src/content/examples/interpolation/src/app/app.component.ts b/adev/src/content/examples/interpolation/src/app/app.component.ts index 35696e9d377..2e7b7963ef6 100644 --- a/adev/src/content/examples/interpolation/src/app/app.component.ts +++ b/adev/src/content/examples/interpolation/src/app/app.component.ts @@ -1,14 +1,14 @@ -import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; +import {Component} from '@angular/core'; +import {NgFor} from '@angular/common'; -import { CUSTOMERS } from './customers'; +import {CUSTOMERS} from './customers'; @Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', imports: [NgFor], - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { customers = CUSTOMERS; @@ -25,6 +25,4 @@ export class AppComponent { getVal(): number { return 2; } - - } diff --git a/adev/src/content/examples/interpolation/src/app/customers.ts b/adev/src/content/examples/interpolation/src/app/customers.ts index a1d25b93c9f..01f6232ff5e 100644 --- a/adev/src/content/examples/interpolation/src/app/customers.ts +++ b/adev/src/content/examples/interpolation/src/app/customers.ts @@ -1,9 +1,9 @@ -import { Customer } from './customer'; +import {Customer} from './customer'; export const CUSTOMERS: Customer[] = [ - { name: 'Maria' }, - { name: 'Oliver' }, - { name: 'Walter' }, - { name: 'Lakshmi' }, - { name: 'Yasha' } + {name: 'Maria'}, + {name: 'Oliver'}, + {name: 'Walter'}, + {name: 'Lakshmi'}, + {name: 'Yasha'}, ]; diff --git a/adev/src/content/examples/interpolation/src/main.ts b/adev/src/content/examples/interpolation/src/main.ts index 5a2dcb1b362..52a1ee4382f 100644 --- a/adev/src/content/examples/interpolation/src/main.ts +++ b/adev/src/content/examples/interpolation/src/main.ts @@ -1,9 +1,9 @@ -import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/platform-browser'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; import {AppComponent} from './app/app.component'; bootstrapApplication(AppComponent, { providers: [ provideProtractorTestingSupport(), // essential for e2e testing - ] + ], }); diff --git a/adev/src/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts index 33ea8d11965..cb9fca64b1b 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts @@ -1,6 +1,5 @@ -import { element, by, ExpectedConditions, browser } from 'protractor'; -import { AppPage } from './app.po'; - +import {element, by, ExpectedConditions, browser} from 'protractor'; +import {AppPage} from './app.po'; describe('providers App', () => { let page: AppPage; @@ -25,7 +24,6 @@ describe('providers App', () => { await browser.wait(ExpectedConditions.visibilityOf(customersMessage)); expect(await customersMessage.getText()).toBe('customers works!'); }); - }); describe('Orders', () => { @@ -36,7 +34,5 @@ describe('providers App', () => { await browser.wait(ExpectedConditions.visibilityOf(ordersMessage)); expect(await ordersMessage.getText()).toBe('orders works!'); }); - }); - }); diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts index 06ddc0c8d60..bd9b0e5198c 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts @@ -1,34 +1,31 @@ // #docplaster -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; // #docregion const-routes, routes-customers, routes-customers-orders const routes: Routes = [ { path: 'customers', - loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) + loadChildren: () => import('./customers/customers.module').then((m) => m.CustomersModule), // #enddocregion routes-customers }, { path: 'orders', - loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) + loadChildren: () => import('./orders/orders.module').then((m) => m.OrdersModule), // #enddocregion routes-customers-orders }, { path: '', redirectTo: '', - pathMatch: 'full' + pathMatch: 'full', // #docregion routes-customers, routes-customers-orders - } + }, ]; // #enddocregion const-routes, routes-customers, routes-customers-orders @NgModule({ - imports: [ - RouterModule.forRoot(routes) - ], + imports: [RouterModule.forRoot(routes)], exports: [RouterModule], - providers: [] + providers: [], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/app.component.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/app.component.ts index 665b2ef0959..033435dcc2b 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/app.component.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/app.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'Lazy loading feature modules'; diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/app.module.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/app.module.ts index 7848845cef4..67950c3d4db 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/app.module.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/app.module.ts @@ -1,22 +1,15 @@ -import { HttpClientModule } from '@angular/common/http'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; +import {HttpClientModule} from '@angular/common/http'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {BrowserModule} from '@angular/platform-browser'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; +import {AppRoutingModule} from './app-routing.module'; +import {AppComponent} from './app.component'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpClientModule, - AppRoutingModule - ], + declarations: [AppComponent], + imports: [BrowserModule, FormsModule, HttpClientModule, AppRoutingModule], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts index 21e9b46be96..969f473c500 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts @@ -1,21 +1,20 @@ // #docplaster // #docregion customers-routing-module -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { CustomersComponent } from './customers.component'; +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; +import {CustomersComponent} from './customers.component'; const routes: Routes = [ { path: '', - component: CustomersComponent - } + component: CustomersComponent, + }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class CustomersRoutingModule { } +export class CustomersRoutingModule {} // #enddocregion customers-routing-module diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers.component.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers.component.ts index cf87dffbbe6..b662f805fc5 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers.component.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers.component.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-customers', templateUrl: './customers.component.html', - styleUrls: ['./customers.component.css'] + styleUrls: ['./customers.component.css'], }) export class CustomersComponent {} diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts index 83e841e50b1..d6e0076fb45 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts @@ -1,16 +1,13 @@ // #docplaster // #docregion customers-module -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { CustomersRoutingModule } from './customers-routing.module'; -import { CustomersComponent } from './customers.component'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {CustomersRoutingModule} from './customers-routing.module'; +import {CustomersComponent} from './customers.component'; @NgModule({ - imports: [ - CommonModule, - CustomersRoutingModule - ], - declarations: [CustomersComponent] + imports: [CommonModule, CustomersRoutingModule], + declarations: [CustomersComponent], }) -export class CustomersModule { } +export class CustomersModule {} // #enddocregion customers-module diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts index c69dbd0d295..e8ec7e7eac5 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts @@ -1,20 +1,20 @@ // #docplaster -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; // #docregion orders-routing-module-detail -import { OrdersComponent } from './orders.component'; +import {OrdersComponent} from './orders.component'; const routes: Routes = [ { path: '', - component: OrdersComponent - } + component: OrdersComponent, + }, ]; // #enddocregion orders-routing-module-detail @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class OrdersRoutingModule { } +export class OrdersRoutingModule {} diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders.component.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders.component.ts index 89819fa50a2..ec63e7e9476 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders.component.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders.component.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-orders', templateUrl: './orders.component.html', - styleUrls: ['./orders.component.css'] + styleUrls: ['./orders.component.css'], }) export class OrdersComponent {} diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts index 0fbe55c108c..4cab5b755f6 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts @@ -1,14 +1,11 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; -import { OrdersRoutingModule } from './orders-routing.module'; -import { OrdersComponent } from './orders.component'; +import {OrdersRoutingModule} from './orders-routing.module'; +import {OrdersComponent} from './orders.component'; @NgModule({ - imports: [ - CommonModule, - OrdersRoutingModule - ], - declarations: [OrdersComponent] + imports: [CommonModule, OrdersRoutingModule], + declarations: [OrdersComponent], }) -export class OrdersModule { } +export class OrdersModule {} diff --git a/adev/src/content/examples/lazy-loading-ngmodules/src/main.ts b/adev/src/content/examples/lazy-loading-ngmodules/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/lazy-loading-ngmodules/src/main.ts +++ b/adev/src/content/examples/lazy-loading-ngmodules/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts index 40e53501907..8fb86e30bfc 100644 --- a/adev/src/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, ElementFinder, by } from 'protractor'; +import {browser, element, ElementFinder, by} from 'protractor'; describe('Lifecycle hooks', () => { const sendKeys = async (el: ElementFinder, input: string) => { @@ -15,7 +15,10 @@ describe('Lifecycle hooks', () => { it('should support peek-a-boo', async () => { const pabComp = element(by.css('peek-a-boo-parent peek-a-boo')); - expect(await pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component'); + expect(await pabComp.isPresent()).toBe( + false, + 'should not be able to find the "peek-a-boo" component', + ); const pabButton = element.all(by.css('peek-a-boo-parent button')).get(0); const updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1); @@ -23,16 +26,25 @@ describe('Lifecycle hooks', () => { await pabButton.click(); expect(await pabButton.getText()).toContain('Destroy Peek'); - expect(await pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component'); + expect(await pabComp.isDisplayed()).toBe( + true, + 'should be able to see the "peek-a-boo" component', + ); expect(await pabComp.getText()).toContain('Windstorm'); expect(await pabComp.getText()).not.toContain('Windstorm!'); - expect(await updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button'); + expect(await updateHeroButton.isPresent()).toBe( + true, + 'should be able to see the update hero button', + ); await updateHeroButton.click(); expect(await pabComp.getText()).toContain('Windstorm!'); await pabButton.click(); - expect(await pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component'); + expect(await pabComp.isPresent()).toBe( + false, + 'should no longer be able to find the "peek-a-boo" component', + ); }); it('should support OnChanges hook', async () => { @@ -73,13 +85,19 @@ describe('Lifecycle hooks', () => { await sendKeys(heroNameInputEle, '-foo-'); count = await changeLogEles.count(); expect(await titleEle.getText()).toContain('Windstorm-foo- can sing'); - expect(count).toBeGreaterThanOrEqual(logCount + 5, 'should add at least one more message for each keystroke'); + expect(count).toBeGreaterThanOrEqual( + logCount + 5, + 'should add at least one more message for each keystroke', + ); logCount = count; await sendKeys(powerInputEle, '-bar-'); count = await changeLogEles.count(); expect(await titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); - expect(count).toBeGreaterThanOrEqual(logCount + 5, 'should add at least one more message for each keystroke'); + expect(count).toBeGreaterThanOrEqual( + logCount + 5, + 'should add at least one more message for each keystroke', + ); }); it('should support AfterView hooks', async () => { @@ -101,8 +119,14 @@ describe('Lifecycle hooks', () => { expect(await commentEle.getText()).toContain('long name'); const count = await logEles.count(); - expect(logCount + 7).toBeGreaterThan(count - 3, '7 additional log messages should have been added'); - expect(logCount + 7).toBeLessThan(count + 3, '7 additional log messages should have been added'); + expect(logCount + 7).toBeGreaterThan( + count - 3, + '7 additional log messages should have been added', + ); + expect(logCount + 7).toBeLessThan( + count + 3, + '7 additional log messages should have been added', + ); logCount = count; await buttonEle.click(); @@ -125,7 +149,10 @@ describe('Lifecycle hooks', () => { expect(await childViewInputEle.getAttribute('value')).toContain('-test-'); expect(await commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); expect(await commentEle.getText()).toContain('long name'); - expect(count).toBeGreaterThanOrEqual(logCount + 5, 'additional log messages should have been added'); + expect(count).toBeGreaterThanOrEqual( + logCount + 5, + 'additional log messages should have been added', + ); logCount = count; await buttonEle.click(); @@ -150,7 +177,10 @@ describe('Lifecycle hooks', () => { await resetHeroesButtonEle.click(); expect(await heroEles.count()).toBe(0, 'should no longer have any heroes'); - expect(await logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall'); + expect(await logEles.count()).toBe( + 7, + 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall', + ); }); it('should support "spy counter"', async () => { @@ -160,18 +190,23 @@ describe('Lifecycle hooks', () => { const logEles = element.all(by.css('counter-parent .info .log')); expect(await textEle.getText()).toContain('Counter = 0'); - expect(await logEles.count()) - .toBe(3, 'should start with one change log and two lifecycle log entries, including reset'); + expect(await logEles.count()).toBe( + 3, + 'should start with one change log and two lifecycle log entries, including reset', + ); await updateCounterButtonEle.click(); expect(await textEle.getText()).toContain('Counter = 1'); - expect(await logEles.count()) - .toBe(5, 'should now have 2 change log entries and 3 lifecycle log entries, including reset'); + expect(await logEles.count()).toBe( + 5, + 'should now have 2 change log entries and 3 lifecycle log entries, including reset', + ); await resetCounterButtonEle.click(); expect(await textEle.getText()).toContain('Counter = 0'); - expect(await logEles.count()) - .toBe(8, 'should now have 8 log entries - 1 change log + 2 reset + 2 destroy + 3 init'); - + expect(await logEles.count()).toBe( + 8, + 'should now have 8 log entries - 1 change log + 2 reset + 2 destroy + 3 init', + ); }); }); diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/after-content-parent.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/after-content-parent.component.ts index 0132f437e58..37e5ad26544 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/after-content-parent.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/after-content-parent.component.ts @@ -1,20 +1,21 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { LoggerService } from './logger.service'; +import {LoggerService} from './logger.service'; @Component({ selector: 'after-content-parent', - template: ` + template: + `

    AfterContent

    ` + - // #docregion parent-template - ` + // #docregion parent-template + ` - ` - // #enddocregion parent-template - + `
    + ` + + // #enddocregion parent-template + `

    AfterContent Logs

    @@ -23,17 +24,17 @@ import { LoggerService } from './logger.service';
    `, - providers: [LoggerService] + providers: [LoggerService], }) export class AfterContentParentComponent { show = true; - constructor(public logger: LoggerService) { } + constructor(public logger: LoggerService) {} reset() { this.logger.clear(); // quickly remove and reload AfterContentComponent which recreates it this.show = false; - this.logger.tick_then(() => this.show = true); + this.logger.tick_then(() => (this.show = true)); } } diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/after-content.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/after-content.component.ts index d3215e1b024..2f7668e59e2 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/after-content.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/after-content.component.ts @@ -1,24 +1,25 @@ // #docplaster // #docregion -import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core'; +import {AfterContentChecked, AfterContentInit, Component, ContentChild} from '@angular/core'; -import { ChildComponent } from './child.component'; -import { LoggerService } from './logger.service'; +import {ChildComponent} from './child.component'; +import {LoggerService} from './logger.service'; @Component({ selector: 'after-content', -// #docregion template - template: ` + // #docregion template + template: + `
    projected content begins
    projected content ends
    - ` -// #enddocregion template - + ` + ` + + // #enddocregion template + `

    {{comment}}

    - ` + `, }) // #docregion hooks export class AfterContentComponent implements AfterContentChecked, AfterContentInit { @@ -28,12 +29,12 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI // Query for a CONTENT child of type `ChildComponent` @ContentChild(ChildComponent) contentChild!: ChildComponent; -// #enddocregion hooks + // #enddocregion hooks constructor(private logger: LoggerService) { this.logIt('AfterContent constructor'); } -// #docregion hooks + // #docregion hooks ngAfterContentInit() { // contentChild is set after the content has been initialized this.logIt('AfterContentInit'); @@ -50,7 +51,7 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI this.doSomething(); } } -// #enddocregion hooks + // #enddocregion hooks // This surrogate for real business logic sets the `comment` private doSomething() { @@ -62,7 +63,7 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI const message = `${method}: ${child ? child.hero : 'no'} child content`; this.logger.log(message); } -// #docregion hooks + // #docregion hooks // ... } // #enddocregion hooks diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/after-view-parent.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/after-view-parent.component.ts index 8caa68f23ca..380b1f11a9b 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/after-view-parent.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/after-view-parent.component.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { LoggerService } from './logger.service'; +import {LoggerService} from './logger.service'; @Component({ selector: 'after-view-parent', @@ -15,17 +15,17 @@ import { LoggerService } from './logger.service';
    {{msg}}
    `, - providers: [LoggerService] + providers: [LoggerService], }) export class AfterViewParentComponent { show = true; - constructor(public logger: LoggerService) { } + constructor(public logger: LoggerService) {} reset() { this.logger.clear(); // quickly remove and reload AfterViewComponent which recreates it this.show = false; - this.logger.tick_then(() => this.show = true); + this.logger.tick_then(() => (this.show = true)); } } diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/after-view.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/after-view.component.ts index 284e0dceff1..b3143afc74c 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/after-view.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/after-view.component.ts @@ -1,27 +1,28 @@ // #docplaster // #docregion -import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core'; +import {AfterViewChecked, AfterViewInit, Component, ViewChild} from '@angular/core'; -import { ChildViewComponent } from './child-view.component'; -import { LoggerService } from './logger.service'; +import {ChildViewComponent} from './child-view.component'; +import {LoggerService} from './logger.service'; @Component({ selector: 'after-view', -// #docregion template - template: ` + // #docregion template + template: + `
    child view begins
    child view ends
    - ` -// #enddocregion template - + ` + ` + + // #enddocregion template + `

    {{comment}}

    - ` + `, }) // #docregion hooks -export class AfterViewComponent implements AfterViewChecked, AfterViewInit { +export class AfterViewComponent implements AfterViewChecked, AfterViewInit { // #enddocregion hooks comment = ''; // #docregion hooks @@ -60,7 +61,7 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit { const c = this.viewChild.hero.length > 10 ? "That's a long name" : ''; if (c !== this.comment) { // Wait a tick because the component's view has already been checked - this.logger.tick_then(() => this.comment = c); + this.logger.tick_then(() => (this.comment = c)); } } // #enddocregion do-something diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/app.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/app.component.ts index 7b3cf496f14..25bc874f0f3 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/app.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/app.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/app.module.ts b/adev/src/content/examples/lifecycle-hooks/src/app/app.module.ts index 383f6c2a3f2..edf817ae3fe 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/app.module.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/app.module.ts @@ -1,38 +1,35 @@ // #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; -import { AfterContentParentComponent } from './after-content-parent.component'; -import { AfterContentComponent } from './after-content.component'; -import { ChildComponent } from './child.component'; +import {AfterContentParentComponent} from './after-content-parent.component'; +import {AfterContentComponent} from './after-content.component'; +import {ChildComponent} from './child.component'; -import { AfterViewParentComponent } from './after-view-parent.component'; -import { AfterViewComponent } from './after-view.component'; -import { ChildViewComponent } from './child-view.component'; +import {AfterViewParentComponent} from './after-view-parent.component'; +import {AfterViewComponent} from './after-view.component'; +import {ChildViewComponent} from './child-view.component'; -import { CounterParentComponent } from './counter-parent.component'; -import { MyCounterComponent } from './counter.component'; +import {CounterParentComponent} from './counter-parent.component'; +import {MyCounterComponent} from './counter.component'; -import { DoCheckParentComponent } from './do-check-parent.component'; -import { DoCheckComponent } from './do-check.component'; +import {DoCheckParentComponent} from './do-check-parent.component'; +import {DoCheckComponent} from './do-check.component'; -import { OnChangesParentComponent } from './on-changes-parent.component'; -import { OnChangesComponent } from './on-changes.component'; +import {OnChangesParentComponent} from './on-changes-parent.component'; +import {OnChangesComponent} from './on-changes.component'; -import { PeekABooParentComponent } from './peek-a-boo-parent.component'; -import { PeekABooComponent } from './peek-a-boo.component'; +import {PeekABooParentComponent} from './peek-a-boo-parent.component'; +import {PeekABooComponent} from './peek-a-boo.component'; -import { SpyParentComponent } from './spy.component'; -import { SpyDirective } from './spy.directive'; +import {SpyParentComponent} from './spy.component'; +import {SpyDirective} from './spy.directive'; @NgModule({ - imports: [ - BrowserModule, - FormsModule - ], + imports: [BrowserModule, FormsModule], declarations: [ AppComponent, AfterContentParentComponent, @@ -50,8 +47,8 @@ import { SpyDirective } from './spy.directive'; PeekABooParentComponent, PeekABooComponent, SpyParentComponent, - SpyDirective + SpyDirective, ], - bootstrap: [ AppComponent ] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/child-view.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/child-view.component.ts index dd835a7a8ee..8c5c0e94d4c 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/child-view.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/child-view.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion child-view @Component({ @@ -6,7 +6,7 @@ import { Component } from '@angular/core'; template: ` - ` + `, }) export class ChildViewComponent { hero = 'Magneta'; diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/child.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/child.component.ts index a63fa95c5d6..6f6d1a022c4 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/child.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/child.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-child', template: ` - ` + `, }) export class ChildComponent { hero = 'Magneta'; diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts index 656756d86fa..9b0352ca35c 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { LoggerService } from './logger.service'; +import {LoggerService} from './logger.service'; @Component({ selector: 'counter-parent', @@ -17,7 +17,7 @@ import { LoggerService } from './logger.service';
    {{msg}}
    `, - providers: [LoggerService] + providers: [LoggerService], }) export class CounterParentComponent { value = 0; diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/counter.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/counter.component.ts index 58d7e7057b5..cd0c49dea0c 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/counter.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/counter.component.ts @@ -1,8 +1,5 @@ // #docregion -import { - Component, Input, - OnChanges, SimpleChanges, -} from '@angular/core'; +import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'; @Component({ selector: 'app-counter', @@ -13,14 +10,13 @@ import {

    Counter Change Log

    {{chg}}
    - ` + `, }) export class MyCounterComponent implements OnChanges { @Input() counter = 0; changeLog: string[] = []; ngOnChanges(changes: SimpleChanges) { - // Empty the changeLog whenever counter goes to zero // hint: this is a way to respond programmatically to external value changes. if (this.counter === 0) { diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts index 38f51e882a0..903e9d78f88 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts @@ -1,11 +1,11 @@ -import { Component, ViewChild } from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; -import { DoCheckComponent } from './do-check.component'; -import { Hero } from './hero'; +import {DoCheckComponent} from './do-check.component'; +import {Hero} from './hero'; @Component({ selector: 'do-check-parent', - templateUrl: './do-check-parent.component.html' + templateUrl: './do-check-parent.component.html', }) export class DoCheckParentComponent { hero!: Hero; diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/do-check.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/do-check.component.ts index 3a669ede984..2a596c7611a 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/do-check.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/do-check.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component, DoCheck, Input } from '@angular/core'; +import {Component, DoCheck, Input} from '@angular/core'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ selector: 'do-check', @@ -12,7 +12,7 @@ import { Hero } from './hero';

    Change Log

    {{chg}}
    - ` + `, }) export class DoCheckComponent implements DoCheck { @Input() hero!: Hero; @@ -27,10 +27,11 @@ export class DoCheckComponent implements DoCheck { // #docregion ng-do-check ngDoCheck() { - if (this.hero.name !== this.oldHeroName) { this.changeDetected = true; - this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`); + this.changeLog.push( + `DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`, + ); this.oldHeroName = this.hero.name; } @@ -41,18 +42,18 @@ export class DoCheckComponent implements DoCheck { } if (this.changeDetected) { - this.noChangeCount = 0; + this.noChangeCount = 0; } else { - // log that hook was called when there was no relevant change. - const count = this.noChangeCount += 1; - const noChangeMsg = `DoCheck called ${count}x when no change to hero or power`; - if (count === 1) { - // add new "no change" message - this.changeLog.push(noChangeMsg); - } else { - // update last "no change" message - this.changeLog[this.changeLog.length - 1] = noChangeMsg; - } + // log that hook was called when there was no relevant change. + const count = (this.noChangeCount += 1); + const noChangeMsg = `DoCheck called ${count}x when no change to hero or power`; + if (count === 1) { + // add new "no change" message + this.changeLog.push(noChangeMsg); + } else { + // update last "no change" message + this.changeLog[this.changeLog.length - 1] = noChangeMsg; + } } this.changeDetected = false; diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/hero.ts b/adev/src/content/examples/lifecycle-hooks/src/app/hero.ts index d30f82ba39b..aa5c308feb2 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/hero.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/hero.ts @@ -1,3 +1,3 @@ export class Hero { - constructor(public name: string) { } + constructor(public name: string) {} } diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/logger.service.ts b/adev/src/content/examples/lifecycle-hooks/src/app/logger.service.ts index 312b7857079..6d14cfdebc3 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/logger.service.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/logger.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable() export class LoggerService { @@ -6,10 +6,10 @@ export class LoggerService { prevMsg = ''; prevMsgCount = 1; - log(msg: string) { + log(msg: string) { if (msg === this.prevMsg) { // Repeat message; update last log entry with count. - this.logs[this.logs.length - 1] = msg + ` (${this.prevMsgCount += 1}x)`; + this.logs[this.logs.length - 1] = msg + ` (${(this.prevMsgCount += 1)}x)`; } else { // New message; log it. this.prevMsg = msg; @@ -18,9 +18,15 @@ export class LoggerService { } } - clear() { this.logs = []; } + clear() { + this.logs = []; + } // schedules a view refresh to ensure display catches up - tick() { this.tick_then(() => { }); } - tick_then(fn: () => any) { setTimeout(fn, 0); } + tick() { + this.tick_then(() => {}); + } + tick_then(fn: () => any) { + setTimeout(fn, 0); + } } diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts index 1be9b1af511..86bb6a4e204 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts @@ -1,12 +1,12 @@ -import { Component, ViewChild } from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; -import { Hero } from './hero'; -import { OnChangesComponent } from './on-changes.component'; +import {Hero} from './hero'; +import {OnChangesComponent} from './on-changes.component'; @Component({ selector: 'on-changes-parent', templateUrl: './on-changes-parent.component.html', - styles: [''] + styles: [''], }) export class OnChangesParentComponent { hero!: Hero; diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/on-changes.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/on-changes.component.ts index 951cde275af..cc8a32f1f80 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/on-changes.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/on-changes.component.ts @@ -1,8 +1,8 @@ /* eslint-disable guard-for-in */ // #docregion -import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ selector: 'on-changes', @@ -13,13 +13,13 @@ import { Hero } from './hero';

    Change Log

    {{chg}}
    - ` + `, }) export class OnChangesComponent implements OnChanges { -// #docregion inputs + // #docregion inputs @Input() hero!: Hero; @Input() power = ''; -// #enddocregion inputs + // #enddocregion inputs changeLog: string[] = []; @@ -27,12 +27,14 @@ export class OnChangesComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { for (const propName in changes) { const chng = changes[propName]; - const cur = JSON.stringify(chng.currentValue); + const cur = JSON.stringify(chng.currentValue); const prev = JSON.stringify(chng.previousValue); this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); } } // #enddocregion ng-on-changes - reset() { this.changeLog = []; } + reset() { + this.changeLog = []; + } } diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts index 7dbc52191b4..e4605263711 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { LoggerService } from './logger.service'; +import {LoggerService} from './logger.service'; @Component({ selector: 'peek-a-boo-parent', @@ -23,10 +23,9 @@ import { LoggerService } from './logger.service'; `, - providers: [ LoggerService ] + providers: [LoggerService], }) export class PeekABooParentComponent { - hasChild = false; hookLog: string[] = []; diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts index 2dd201abb47..563c03ba42f 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts @@ -11,23 +11,30 @@ import { OnChanges, OnDestroy, OnInit, - SimpleChanges + SimpleChanges, } from '@angular/core'; -import { LoggerService } from './logger.service'; -import { PeekABooDirective } from './peek-a-boo.directive'; +import {LoggerService} from './logger.service'; +import {PeekABooDirective} from './peek-a-boo.directive'; @Component({ selector: 'peek-a-boo', - template: '

    Now you see my hero, {{name}}

    ' + template: '

    Now you see my hero, {{name}}

    ', }) // Don't HAVE to mention the Lifecycle Hook interfaces // unless we want typing and tool support. -export class PeekABooComponent extends PeekABooDirective implements - OnChanges, OnInit, DoCheck, - AfterContentInit, AfterContentChecked, - AfterViewInit, AfterViewChecked, - OnDestroy { +export class PeekABooComponent + extends PeekABooDirective + implements + OnChanges, + OnInit, + DoCheck, + AfterContentInit, + AfterContentChecked, + AfterViewInit, + AfterViewChecked, + OnDestroy +{ @Input() name = ''; private verb = 'initialized'; @@ -56,19 +63,31 @@ export class PeekABooComponent extends PeekABooDirective implements // Beware! Called frequently! // Called in every change detection cycle anywhere on the page - ngDoCheck() { this.logIt('DoCheck'); } + ngDoCheck() { + this.logIt('DoCheck'); + } - ngAfterContentInit() { this.logIt('AfterContentInit'); } + ngAfterContentInit() { + this.logIt('AfterContentInit'); + } // Beware! Called frequently! // Called in every change detection cycle anywhere on the page - ngAfterContentChecked() { this.logIt('AfterContentChecked'); } + ngAfterContentChecked() { + this.logIt('AfterContentChecked'); + } - ngAfterViewInit() { this.logIt('AfterViewInit'); } + ngAfterViewInit() { + this.logIt('AfterViewInit'); + } // Beware! Called frequently! // Called in every change detection cycle anywhere on the page - ngAfterViewChecked() { this.logIt('AfterViewChecked'); } + ngAfterViewChecked() { + this.logIt('AfterViewChecked'); + } - ngOnDestroy() { this.logIt('OnDestroy'); } + ngOnDestroy() { + this.logIt('OnDestroy'); + } } diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo.directive.ts b/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo.directive.ts index 2bd7b79bc41..80ce8cefb3b 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo.directive.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/peek-a-boo.directive.ts @@ -1,13 +1,13 @@ -import { Directive, OnInit } from '@angular/core'; +import {Directive, OnInit} from '@angular/core'; -import { LoggerService } from './logger.service'; +import {LoggerService} from './logger.service'; let nextId = 1; // #docregion ngOnInit @Directive({selector: '[appPeekABoo]'}) export class PeekABooDirective implements OnInit { - constructor(private logger: LoggerService) { } + constructor(private logger: LoggerService) {} // implement OnInit's `ngOnInit` method ngOnInit() { diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/spy.component.ts b/adev/src/content/examples/lifecycle-hooks/src/app/spy.component.ts index a8f82d4abf9..6f502d0acee 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/spy.component.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/spy.component.ts @@ -1,19 +1,18 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { LoggerService } from './logger.service'; +import {LoggerService} from './logger.service'; @Component({ selector: 'spy-parent', templateUrl: './spy.component.html', - providers: [LoggerService] + providers: [LoggerService], }) export class SpyParentComponent { newName = 'Herbie'; heroes: string[] = ['Windstorm', 'Magneta']; - constructor(public logger: LoggerService) { - } + constructor(public logger: LoggerService) {} addHero() { if (this.newName.trim()) { diff --git a/adev/src/content/examples/lifecycle-hooks/src/app/spy.directive.ts b/adev/src/content/examples/lifecycle-hooks/src/app/spy.directive.ts index c364b3decad..2db78c5952f 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/app/spy.directive.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/app/spy.directive.ts @@ -1,7 +1,7 @@ // #docregion -import { Directive, OnInit, OnDestroy } from '@angular/core'; +import {Directive, OnInit, OnDestroy} from '@angular/core'; -import { LoggerService } from './logger.service'; +import {LoggerService} from './logger.service'; // #docregion spy-directive let nextId = 1; @@ -12,7 +12,7 @@ let nextId = 1; export class SpyDirective implements OnInit, OnDestroy { private id = nextId++; - constructor(private logger: LoggerService) { } + constructor(private logger: LoggerService) {} ngOnInit() { this.logger.log(`Spy #${this.id} onInit`); diff --git a/adev/src/content/examples/lifecycle-hooks/src/main.ts b/adev/src/content/examples/lifecycle-hooks/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/lifecycle-hooks/src/main.ts +++ b/adev/src/content/examples/lifecycle-hooks/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/ngcontainer/src/app/app.component.ts b/adev/src/content/examples/ngcontainer/src/app/app.component.ts index b17014d6a3b..d4171d01466 100644 --- a/adev/src/content/examples/ngcontainer/src/app/app.component.ts +++ b/adev/src/content/examples/ngcontainer/src/app/app.component.ts @@ -1,12 +1,12 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Hero, heroes } from './hero'; +import {Hero, heroes} from './hero'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { heroes = heroes; diff --git a/adev/src/content/examples/ngcontainer/src/app/app.module.ts b/adev/src/content/examples/ngcontainer/src/app/app.module.ts index f18ebb526ed..51ba50ad0a2 100644 --- a/adev/src/content/examples/ngcontainer/src/app/app.module.ts +++ b/adev/src/content/examples/ngcontainer/src/app/app.module.ts @@ -1,19 +1,15 @@ // #docregion -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {BrowserModule} from '@angular/platform-browser'; -import { AppComponent } from './app.component'; -import { ContentComponent } from './content.component'; -import { heroComponents } from './hero.components'; +import {AppComponent} from './app.component'; +import {ContentComponent} from './content.component'; +import {heroComponents} from './hero.components'; @NgModule({ - imports: [ BrowserModule, FormsModule ], - declarations: [ - AppComponent, - ContentComponent, - heroComponents - ], - bootstrap: [ AppComponent ] + imports: [BrowserModule, FormsModule], + declarations: [AppComponent, ContentComponent, heroComponents], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/ngcontainer/src/app/content.component.ts b/adev/src/content/examples/ngcontainer/src/app/content.component.ts index bb3af9c040a..732c7cc38cb 100644 --- a/adev/src/content/examples/ngcontainer/src/app/content.component.ts +++ b/adev/src/content/examples/ngcontainer/src/app/content.component.ts @@ -1,13 +1,14 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'content-comp', - template: - `
    + template: `
    `, - styles: [ ` + styles: [ + ` div { border: medium dashed green; padding: 1em; width: 150px; text-align: center} - `] + `, + ], }) -export class ContentComponent { } +export class ContentComponent {} diff --git a/adev/src/content/examples/ngcontainer/src/app/hero.components.ts b/adev/src/content/examples/ngcontainer/src/app/hero.components.ts index 48205c8f7f1..e4742edf8d5 100644 --- a/adev/src/content/examples/ngcontainer/src/app/hero.components.ts +++ b/adev/src/content/examples/ngcontainer/src/app/hero.components.ts @@ -1,11 +1,11 @@ // #docregion -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ selector: 'happy-hero', - template: 'Wow. You like {{hero.name}}. What a happy hero ... just like you.' + template: 'Wow. You like {{hero.name}}. What a happy hero ... just like you.', }) export class HappyHeroComponent { @Input() hero!: Hero; @@ -13,7 +13,7 @@ export class HappyHeroComponent { @Component({ selector: 'sad-hero', - template: 'You like {{hero.name}}? Such a sad hero. Are you sad too?' + template: 'You like {{hero.name}}? Such a sad hero. Are you sad too?', }) export class SadHeroComponent { @Input() hero!: Hero; @@ -21,7 +21,7 @@ export class SadHeroComponent { @Component({ selector: 'confused-hero', - template: 'Are you as confused as {{hero.name}}?' + template: 'Are you as confused as {{hero.name}}?', }) export class ConfusedHeroComponent { @Input() hero!: Hero; @@ -29,7 +29,7 @@ export class ConfusedHeroComponent { @Component({ selector: 'unknown-hero', - template: '{{message}}' + template: '{{message}}', }) export class UnknownHeroComponent { @Input() hero!: Hero; @@ -44,5 +44,5 @@ export const heroComponents = [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, - UnknownHeroComponent + UnknownHeroComponent, ]; diff --git a/adev/src/content/examples/ngcontainer/src/app/hero.ts b/adev/src/content/examples/ngcontainer/src/app/hero.ts index 2c8a93d3617..56bc4a0f01f 100644 --- a/adev/src/content/examples/ngcontainer/src/app/hero.ts +++ b/adev/src/content/examples/ngcontainer/src/app/hero.ts @@ -6,8 +6,8 @@ export interface Hero { } export const heroes: Hero[] = [ - { id: 1, name: 'Dr. Nice', emotion: 'happy' }, - { id: 2, name: 'RubberMan', emotion: 'sad' }, - { id: 3, name: 'Windstorm', emotion: 'confused' }, - { id: 4, name: 'Magneta' } + {id: 1, name: 'Dr. Nice', emotion: 'happy'}, + {id: 2, name: 'RubberMan', emotion: 'sad'}, + {id: 3, name: 'Windstorm', emotion: 'confused'}, + {id: 4, name: 'Magneta'}, ]; diff --git a/adev/src/content/examples/ngcontainer/src/main.ts b/adev/src/content/examples/ngcontainer/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/ngcontainer/src/main.ts +++ b/adev/src/content/examples/ngcontainer/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/ngmodules/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/ngmodules/e2e/src/app.e2e-spec.ts index a3586e3676a..69e528524d5 100644 --- a/adev/src/content/examples/ngmodules/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/ngmodules/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('NgModule-example', () => { - // helpers const lightgray = 'rgba(239, 238, 237, 1)'; const white = 'rgba(0, 0, 0, 0)'; @@ -14,7 +13,7 @@ describe('NgModule-example', () => { subtitle: element.all(by.css('app-root p i')).get(0), contactButton: buttons.get(0), itemButton: buttons.get(1), - customersButton: buttons.get(2) + customersButton: buttons.get(2), }; } @@ -29,7 +28,7 @@ describe('NgModule-example', () => { validationError: element.all(by.css('app-contact form .alert')).get(0), saveButton: buttons.get(0), // can't be tested nextContactButton: buttons.get(1), - newContactButton: buttons.get(2) + newContactButton: buttons.get(2), }; } @@ -162,5 +161,4 @@ describe('NgModule-example', () => { }); }); }); - }); diff --git a/adev/src/content/examples/ngmodules/src/app/app-routing.module.ts b/adev/src/content/examples/ngmodules/src/app/app-routing.module.ts index f915627de8b..9eba17a9111 100644 --- a/adev/src/content/examples/ngmodules/src/app/app-routing.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/app-routing.module.ts @@ -1,14 +1,17 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; export const routes: Routes = [ - { path: '', redirectTo: 'contact', pathMatch: 'full'}, - { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) }, - { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) } + {path: '', redirectTo: 'contact', pathMatch: 'full'}, + {path: 'items', loadChildren: () => import('./items/items.module').then((m) => m.ItemsModule)}, + { + path: 'customers', + loadChildren: () => import('./customers/customers.module').then((m) => m.CustomersModule), + }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) export class AppRoutingModule {} diff --git a/adev/src/content/examples/ngmodules/src/app/app.component.ts b/adev/src/content/examples/ngmodules/src/app/app.component.ts index f2cda931875..db8a8d5b90c 100644 --- a/adev/src/content/examples/ngmodules/src/app/app.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', @@ -10,7 +10,6 @@ import { Component } from '@angular/core'; Customers - ` + `, }) -export class AppComponent { -} +export class AppComponent {} diff --git a/adev/src/content/examples/ngmodules/src/app/app.module.1.ts b/adev/src/content/examples/ngmodules/src/app/app.module.1.ts index 784cbd00d3d..e59b43254b7 100644 --- a/adev/src/content/examples/ngmodules/src/app/app.module.1.ts +++ b/adev/src/content/examples/ngmodules/src/app/app.module.1.ts @@ -1,12 +1,12 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/ngmodules/src/app/app.module.ts b/adev/src/content/examples/ngmodules/src/app/app.module.ts index c3fde154965..ae4a4df6092 100644 --- a/adev/src/content/examples/ngmodules/src/app/app.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/app.module.ts @@ -1,19 +1,19 @@ // #docplaster -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; /* App Root */ -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; /* Feature Modules */ -import { ContactModule } from './contact/contact.module'; +import {ContactModule} from './contact/contact.module'; // #docregion import-for-root -import { GreetingModule } from './greeting/greeting.module'; +import {GreetingModule} from './greeting/greeting.module'; // #enddocregion import-for-root /* Routing Module */ -import { AppRoutingModule } from './app-routing.module'; +import {AppRoutingModule} from './app-routing.module'; // #docregion import-for-root @NgModule({ @@ -24,15 +24,13 @@ import { AppRoutingModule } from './app-routing.module'; // #docregion import-for-root GreetingModule.forRoot({userName: 'Miss Marple'}), // #enddocregion import-for-root - AppRoutingModule + AppRoutingModule, // #docregion import-for-root ], // #enddocregion import-for-root - declarations: [ - AppComponent - ], - bootstrap: [AppComponent] + declarations: [AppComponent], + bootstrap: [AppComponent], // #docregion import-for-root }) // #enddocregion import-for-root -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/ngmodules/src/app/contact/contact-routing.module.ts b/adev/src/content/examples/ngmodules/src/app/contact/contact-routing.module.ts index a3c11194622..c542bb9406e 100644 --- a/adev/src/content/examples/ngmodules/src/app/contact/contact-routing.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/contact/contact-routing.module.ts @@ -1,15 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { ContactComponent } from './contact.component'; +import {ContactComponent} from './contact.component'; -const routes = [ - { path: 'contact', component: ContactComponent} -]; +const routes = [{path: 'contact', component: ContactComponent}]; @NgModule({ - imports: [ RouterModule.forChild(routes) ], - exports: [ RouterModule ] + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], }) export class ContactRoutingModule {} - diff --git a/adev/src/content/examples/ngmodules/src/app/contact/contact.component.ts b/adev/src/content/examples/ngmodules/src/app/contact/contact.component.ts index 64a7cc31ed4..22256f63bd8 100644 --- a/adev/src/content/examples/ngmodules/src/app/contact/contact.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/contact/contact.component.ts @@ -9,7 +9,7 @@ import {Contact, ContactService} from './contact.service'; @Component({ selector: 'app-contact', templateUrl: './contact.component.html', - styleUrls: ['./contact.component.css'] + styleUrls: ['./contact.component.css'], }) export class ContactComponent implements OnInit { contact!: Contact; @@ -21,7 +21,10 @@ export class ContactComponent implements OnInit { contactForm: FormGroup; constructor( - private contactService: ContactService, userService: UserService, private formBuilder: FormBuilder) { + private contactService: ContactService, + userService: UserService, + private formBuilder: FormBuilder, + ) { this.contactForm = this.formBuilder.group({name: ['', Validators.required]}); this.userName = userService.userName; } @@ -31,7 +34,7 @@ export class ContactComponent implements OnInit { } setupForm() { - this.contactService.getContacts().subscribe(contacts => { + this.contactService.getContacts().subscribe((contacts) => { this.msg = ''; this.contacts = contacts; this.contact = contacts[0]; @@ -64,6 +67,6 @@ export class ContactComponent implements OnInit { /** Display a message briefly, then remove it. */ displayMessage(msg: string) { this.msg = msg; - setTimeout(() => this.msg = '', 1500); + setTimeout(() => (this.msg = ''), 1500); } } diff --git a/adev/src/content/examples/ngmodules/src/app/contact/contact.module.ts b/adev/src/content/examples/ngmodules/src/app/contact/contact.module.ts index 78244428b21..f1909093f2c 100644 --- a/adev/src/content/examples/ngmodules/src/app/contact/contact.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/contact/contact.module.ts @@ -1,18 +1,14 @@ -import { NgModule } from '@angular/core'; -import { SharedModule } from '../shared/shared.module'; -import { ReactiveFormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {SharedModule} from '../shared/shared.module'; +import {ReactiveFormsModule} from '@angular/forms'; -import { ContactComponent } from './contact.component'; -import { ContactService } from './contact.service'; -import { ContactRoutingModule } from './contact-routing.module'; +import {ContactComponent} from './contact.component'; +import {ContactService} from './contact.service'; +import {ContactRoutingModule} from './contact-routing.module'; @NgModule({ - imports: [ - SharedModule, - ContactRoutingModule, - ReactiveFormsModule - ], - declarations: [ ContactComponent ], - providers: [ ContactService ] + imports: [SharedModule, ContactRoutingModule, ReactiveFormsModule], + declarations: [ContactComponent], + providers: [ContactService], }) -export class ContactModule { } +export class ContactModule {} diff --git a/adev/src/content/examples/ngmodules/src/app/contact/contact.service.ts b/adev/src/content/examples/ngmodules/src/app/contact/contact.service.ts index 1cbae2efc0d..296e9f9f97d 100644 --- a/adev/src/content/examples/ngmodules/src/app/contact/contact.service.ts +++ b/adev/src/content/examples/ngmodules/src/app/contact/contact.service.ts @@ -1,16 +1,19 @@ -import { Injectable, OnDestroy } from '@angular/core'; +import {Injectable, OnDestroy} from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; +import {Observable, of} from 'rxjs'; +import {delay} from 'rxjs/operators'; export class Contact { - constructor(public id: number, public name: string) { } + constructor( + public id: number, + public name: string, + ) {} } const CONTACTS: Contact[] = [ new Contact(21, 'Yasha'), new Contact(22, 'Iulia'), - new Contact(23, 'Karina') + new Contact(23, 'Karina'), ]; const FETCH_LATENCY = 500; @@ -18,18 +21,19 @@ const FETCH_LATENCY = 500; /** Simulate a data service that retrieves contacts from a server */ @Injectable() export class ContactService implements OnDestroy { + constructor() { + console.log('ContactService instance created.'); + } + ngOnDestroy() { + console.log('ContactService instance destroyed.'); + } - constructor() { console.log('ContactService instance created.'); } - ngOnDestroy() { console.log('ContactService instance destroyed.'); } - - getContacts(): Observable { + getContacts(): Observable { return of(CONTACTS).pipe(delay(FETCH_LATENCY)); } getContact(id: number | string): Observable { - const contact$ = of(CONTACTS.find(contact => contact.id === +id)!); + const contact$ = of(CONTACTS.find((contact) => contact.id === +id)!); return contact$.pipe(delay(FETCH_LATENCY)); } } - - diff --git a/adev/src/content/examples/ngmodules/src/app/customers/customers-detail.component.ts b/adev/src/content/examples/ngmodules/src/app/customers/customers-detail.component.ts index 32e50c8de73..08cfcd4137a 100644 --- a/adev/src/content/examples/ngmodules/src/app/customers/customers-detail.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/customers/customers-detail.component.ts @@ -1,8 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; -import { Customer, - CustomersService } from './customers.service'; +import {Customer, CustomersService} from './customers.service'; @Component({ template: ` @@ -15,17 +14,18 @@ import { Customer,

    Customer List - ` + `, }) export class CustomersDetailComponent implements OnInit { customer!: Customer; constructor( private route: ActivatedRoute, - private customersService: CustomersService) { } + private customersService: CustomersService, + ) {} ngOnInit() { const id = parseInt(this.route.snapshot.paramMap.get('id')!, 10); - this.customersService.getCustomer(id).subscribe(customer => this.customer = customer); + this.customersService.getCustomer(id).subscribe((customer) => (this.customer = customer)); } } diff --git a/adev/src/content/examples/ngmodules/src/app/customers/customers-list.component.ts b/adev/src/content/examples/ngmodules/src/app/customers/customers-list.component.ts index d29ef6dcfd9..78f747226fc 100644 --- a/adev/src/content/examples/ngmodules/src/app/customers/customers-list.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/customers/customers-list.component.ts @@ -1,8 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; +import {Component, OnInit} from '@angular/core'; +import {Observable} from 'rxjs'; -import { Customer, - CustomersService } from './customers.service'; +import {Customer, CustomersService} from './customers.service'; @Component({ template: ` @@ -10,13 +9,11 @@ import { Customer, - ` + `, }) - export class CustomersListComponent { customers: Observable; constructor(private customersService: CustomersService) { this.customers = this.customersService.getCustomers(); } } - diff --git a/adev/src/content/examples/ngmodules/src/app/customers/customers-routing.module.ts b/adev/src/content/examples/ngmodules/src/app/customers/customers-routing.module.ts index 035bac5f1a1..228b77b1844 100644 --- a/adev/src/content/examples/ngmodules/src/app/customers/customers-routing.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/customers/customers-routing.module.ts @@ -1,23 +1,23 @@ -import { NgModule } from '@angular/core'; -import { Routes, - RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; -import { CustomersComponent } from './customers.component'; -import { CustomersListComponent } from './customers-list.component'; -import { CustomersDetailComponent } from './customers-detail.component'; +import {CustomersComponent} from './customers.component'; +import {CustomersListComponent} from './customers-list.component'; +import {CustomersDetailComponent} from './customers-detail.component'; const routes: Routes = [ - { path: '', + { + path: '', component: CustomersComponent, children: [ - { path: '', component: CustomersListComponent }, - { path: ':id', component: CustomersDetailComponent } - ] - } + {path: '', component: CustomersListComponent}, + {path: ':id', component: CustomersDetailComponent}, + ], + }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) export class CustomersRoutingModule {} diff --git a/adev/src/content/examples/ngmodules/src/app/customers/customers.component.ts b/adev/src/content/examples/ngmodules/src/app/customers/customers.component.ts index a0087247d2e..e2290ec5ec5 100644 --- a/adev/src/content/examples/ngmodules/src/app/customers/customers.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/customers/customers.component.ts @@ -1,14 +1,14 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { CustomersService } from './customers.service'; -import { UserService } from '../greeting/user.service'; +import {CustomersService} from './customers.service'; +import {UserService} from '../greeting/user.service'; @Component({ template: `

    Customers of {{userName}}

    `, - providers: [ UserService ] + providers: [UserService], }) export class CustomersComponent { userName = ''; @@ -16,4 +16,3 @@ export class CustomersComponent { this.userName = userService.userName; } } - diff --git a/adev/src/content/examples/ngmodules/src/app/customers/customers.module.ts b/adev/src/content/examples/ngmodules/src/app/customers/customers.module.ts index baf74678813..59d235685c8 100644 --- a/adev/src/content/examples/ngmodules/src/app/customers/customers.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/customers/customers.module.ts @@ -1,19 +1,16 @@ -import { NgModule } from '@angular/core'; +import {NgModule} from '@angular/core'; -import { SharedModule } from '../shared/shared.module'; - -import { CustomersComponent } from './customers.component'; -import { CustomersDetailComponent } from './customers-detail.component'; -import { CustomersListComponent } from './customers-list.component'; -import { CustomersRoutingModule } from './customers-routing.module'; -import { CustomersService } from './customers.service'; +import {SharedModule} from '../shared/shared.module'; +import {CustomersComponent} from './customers.component'; +import {CustomersDetailComponent} from './customers-detail.component'; +import {CustomersListComponent} from './customers-list.component'; +import {CustomersRoutingModule} from './customers-routing.module'; +import {CustomersService} from './customers.service'; @NgModule({ - imports: [ SharedModule, CustomersRoutingModule ], - declarations: [ - CustomersComponent, CustomersDetailComponent, CustomersListComponent, - ], - providers: [CustomersService] + imports: [SharedModule, CustomersRoutingModule], + declarations: [CustomersComponent, CustomersDetailComponent, CustomersListComponent], + providers: [CustomersService], }) -export class CustomersModule { } +export class CustomersModule {} diff --git a/adev/src/content/examples/ngmodules/src/app/customers/customers.service.ts b/adev/src/content/examples/ngmodules/src/app/customers/customers.service.ts index 0a04ea80834..800df53ad38 100644 --- a/adev/src/content/examples/ngmodules/src/app/customers/customers.service.ts +++ b/adev/src/content/examples/ngmodules/src/app/customers/customers.service.ts @@ -1,10 +1,13 @@ -import { Injectable, OnDestroy } from '@angular/core'; +import {Injectable, OnDestroy} from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; +import {Observable, of} from 'rxjs'; +import {delay} from 'rxjs/operators'; export class Customer { - constructor(public id: number, public name: string) { } + constructor( + public id: number, + public name: string, + ) {} } const CUSTOMERS: Customer[] = [ @@ -13,7 +16,7 @@ const CUSTOMERS: Customer[] = [ new Customer(13, 'Momi'), new Customer(14, 'Madeleine'), new Customer(15, 'Seth'), - new Customer(16, 'Teresa') + new Customer(16, 'Teresa'), ]; const FETCH_LATENCY = 500; @@ -21,16 +24,19 @@ const FETCH_LATENCY = 500; /** Simulate a data service that retrieves heroes from a server */ @Injectable() export class CustomersService implements OnDestroy { + constructor() { + console.log('CustomersService instance created.'); + } + ngOnDestroy() { + console.log('CustomersService instance destroyed.'); + } - constructor() { console.log('CustomersService instance created.'); } - ngOnDestroy() { console.log('CustomersService instance destroyed.'); } - - getCustomers(): Observable { + getCustomers(): Observable { return of(CUSTOMERS).pipe(delay(FETCH_LATENCY)); } getCustomer(id: number | string): Observable { - const customer$ = of(CUSTOMERS.find(customer => customer.id === +id)!); + const customer$ = of(CUSTOMERS.find((customer) => customer.id === +id)!); return customer$.pipe(delay(FETCH_LATENCY)); } } diff --git a/adev/src/content/examples/ngmodules/src/app/greeting/greeting.component.ts b/adev/src/content/examples/ngmodules/src/app/greeting/greeting.component.ts index 0994a2aff62..b69dd91d308 100644 --- a/adev/src/content/examples/ngmodules/src/app/greeting/greeting.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/greeting/greeting.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { UserService } from '../greeting/user.service'; +import {Component} from '@angular/core'; +import {UserService} from '../greeting/user.service'; @Component({ selector: 'app-greeting', diff --git a/adev/src/content/examples/ngmodules/src/app/greeting/greeting.module.ts b/adev/src/content/examples/ngmodules/src/app/greeting/greeting.module.ts index dbd314684d9..617d99f499b 100644 --- a/adev/src/content/examples/ngmodules/src/app/greeting/greeting.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/greeting/greeting.module.ts @@ -1,23 +1,21 @@ // #docregion whole-greeting-module -import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core'; +import {ModuleWithProviders, NgModule, Optional, SkipSelf} from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { GreetingComponent } from './greeting.component'; -import { UserServiceConfig } from './user.service'; +import {CommonModule} from '@angular/common'; +import {GreetingComponent} from './greeting.component'; +import {UserServiceConfig} from './user.service'; @NgModule({ - imports: [ CommonModule ], - declarations: [ GreetingComponent ], - exports: [ GreetingComponent ] + imports: [CommonModule], + declarations: [GreetingComponent], + exports: [GreetingComponent], }) export class GreetingModule { // #docregion ctor constructor(@Optional() @SkipSelf() parentModule?: GreetingModule) { if (parentModule) { - throw new Error( - 'GreetingModule is already loaded. Import it in the AppModule only'); + throw new Error('GreetingModule is already loaded. Import it in the AppModule only'); } } // #enddocregion ctor @@ -26,9 +24,7 @@ export class GreetingModule { static forRoot(config: UserServiceConfig): ModuleWithProviders { return { ngModule: GreetingModule, - providers: [ - {provide: UserServiceConfig, useValue: config } - ] + providers: [{provide: UserServiceConfig, useValue: config}], }; } // #enddocregion for-root diff --git a/adev/src/content/examples/ngmodules/src/app/greeting/user.service.ts b/adev/src/content/examples/ngmodules/src/app/greeting/user.service.ts index 4997526edba..41b9b445216 100644 --- a/adev/src/content/examples/ngmodules/src/app/greeting/user.service.ts +++ b/adev/src/content/examples/ngmodules/src/app/greeting/user.service.ts @@ -1,5 +1,4 @@ - -import { Injectable, Optional } from '@angular/core'; +import {Injectable, Optional} from '@angular/core'; let nextId = 1; @@ -8,14 +7,16 @@ export class UserServiceConfig { } @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class UserService { id = nextId++; // #docregion ctor constructor(@Optional() config?: UserServiceConfig) { - if (config) { this._userName = config.userName; } + if (config) { + this._userName = config.userName; + } } // #enddocregion ctor diff --git a/adev/src/content/examples/ngmodules/src/app/items/items-detail.component.ts b/adev/src/content/examples/ngmodules/src/app/items/items-detail.component.ts index 718dab8acbc..3577b993b11 100644 --- a/adev/src/content/examples/ngmodules/src/app/items/items-detail.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/items/items-detail.component.ts @@ -1,5 +1,5 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ template: ` @@ -7,14 +7,13 @@ import { ActivatedRoute } from '@angular/router';
    Item id: {{id}}

    Items List - ` + `, }) export class ItemsDetailComponent implements OnInit { id = 0; - constructor(private route: ActivatedRoute) { } + constructor(private route: ActivatedRoute) {} ngOnInit() { this.id = parseInt(this.route.snapshot.paramMap.get('id')!, 10); } } - diff --git a/adev/src/content/examples/ngmodules/src/app/items/items-list.component.ts b/adev/src/content/examples/ngmodules/src/app/items/items-list.component.ts index a60564a76c0..6b9c9271a11 100644 --- a/adev/src/content/examples/ngmodules/src/app/items/items-list.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/items/items-list.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; +import {Component, OnInit} from '@angular/core'; +import {Observable} from 'rxjs'; -import { Item, ItemService } from './items.service'; +import {Item, ItemService} from './items.service'; @Component({ template: ` @@ -9,7 +9,7 @@ import { Item, ItemService } from './items.service'; - ` + `, }) export class ItemsListComponent { items: Observable; @@ -17,6 +17,4 @@ export class ItemsListComponent { constructor(private itemService: ItemService) { this.items = this.itemService.getItems(); } - } - diff --git a/adev/src/content/examples/ngmodules/src/app/items/items-routing.module.ts b/adev/src/content/examples/ngmodules/src/app/items/items-routing.module.ts index c2c551c7553..c70773936cb 100644 --- a/adev/src/content/examples/ngmodules/src/app/items/items-routing.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/items/items-routing.module.ts @@ -1,19 +1,17 @@ -import { NgModule } from '@angular/core'; -import { Routes, - RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; -import { ItemsListComponent } from './items-list.component'; -import { ItemsDetailComponent } from './items-detail.component'; +import {ItemsListComponent} from './items-list.component'; +import {ItemsDetailComponent} from './items-detail.component'; const routes: Routes = [ - { path: '', redirectTo: 'list', pathMatch: 'full'}, - { path: 'list', component: ItemsListComponent }, - { path: ':id', component: ItemsDetailComponent } + {path: '', redirectTo: 'list', pathMatch: 'full'}, + {path: 'list', component: ItemsListComponent}, + {path: ':id', component: ItemsDetailComponent}, ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) export class ItemsRoutingModule {} - diff --git a/adev/src/content/examples/ngmodules/src/app/items/items.component.ts b/adev/src/content/examples/ngmodules/src/app/items/items.component.ts index a9bee4800aa..8c9fc2e12c5 100644 --- a/adev/src/content/examples/ngmodules/src/app/items/items.component.ts +++ b/adev/src/content/examples/ngmodules/src/app/items/items.component.ts @@ -1,9 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-items', templateUrl: './items.component.html', - styleUrls: ['./items.component.css'] + styleUrls: ['./items.component.css'], }) export class ItemsComponent {} - diff --git a/adev/src/content/examples/ngmodules/src/app/items/items.module.ts b/adev/src/content/examples/ngmodules/src/app/items/items.module.ts index 9b22b489173..23d44c06b4a 100644 --- a/adev/src/content/examples/ngmodules/src/app/items/items.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/items/items.module.ts @@ -1,15 +1,15 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; -import { ItemsComponent } from './items.component'; -import { ItemsListComponent } from './items-list.component'; -import { ItemsDetailComponent } from './items-detail.component'; -import { ItemService } from './items.service'; -import { ItemsRoutingModule } from './items-routing.module'; +import {ItemsComponent} from './items.component'; +import {ItemsListComponent} from './items-list.component'; +import {ItemsDetailComponent} from './items-detail.component'; +import {ItemService} from './items.service'; +import {ItemsRoutingModule} from './items-routing.module'; @NgModule({ - imports: [ CommonModule, ItemsRoutingModule ], - declarations: [ ItemsComponent, ItemsDetailComponent, ItemsListComponent ], - providers: [ ItemService ] + imports: [CommonModule, ItemsRoutingModule], + declarations: [ItemsComponent, ItemsDetailComponent, ItemsListComponent], + providers: [ItemService], }) export class ItemsModule {} diff --git a/adev/src/content/examples/ngmodules/src/app/items/items.service.ts b/adev/src/content/examples/ngmodules/src/app/items/items.service.ts index 60fd7950c05..7d97bc0d0bf 100644 --- a/adev/src/content/examples/ngmodules/src/app/items/items.service.ts +++ b/adev/src/content/examples/ngmodules/src/app/items/items.service.ts @@ -1,10 +1,13 @@ -import { Injectable, OnDestroy } from '@angular/core'; +import {Injectable, OnDestroy} from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; +import {Observable, of} from 'rxjs'; +import {delay} from 'rxjs/operators'; export class Item { - constructor(public id: number, public name: string) { } + constructor( + public id: number, + public name: string, + ) {} } const ITEMS: Item[] = [ @@ -19,18 +22,19 @@ const FETCH_LATENCY = 500; /** Simulate a data service that retrieves items from a server */ @Injectable() export class ItemService implements OnDestroy { + constructor() { + console.log('ItemService instance created.'); + } + ngOnDestroy() { + console.log('ItemService instance destroyed.'); + } - constructor() { console.log('ItemService instance created.'); } - ngOnDestroy() { console.log('ItemService instance destroyed.'); } - - getItems(): Observable { + getItems(): Observable { return of(ITEMS).pipe(delay(FETCH_LATENCY)); } getItem(id: number | string): Observable { - const item$ = of(ITEMS.find(item => item.id === +id)!); + const item$ = of(ITEMS.find((item) => item.id === +id)!); return item$.pipe(delay(FETCH_LATENCY)); } } - - diff --git a/adev/src/content/examples/ngmodules/src/app/shared/awesome.pipe.ts b/adev/src/content/examples/ngmodules/src/app/shared/awesome.pipe.ts index ffe4949f214..64642ba01f6 100644 --- a/adev/src/content/examples/ngmodules/src/app/shared/awesome.pipe.ts +++ b/adev/src/content/examples/ngmodules/src/app/shared/awesome.pipe.ts @@ -1,6 +1,6 @@ -import { Pipe, PipeTransform } from '@angular/core'; +import {Pipe, PipeTransform} from '@angular/core'; -@Pipe({ name: 'awesome' }) +@Pipe({name: 'awesome'}) /** Precede the input string with the word "Awesome " */ export class AwesomePipe implements PipeTransform { transform(phrase: string) { diff --git a/adev/src/content/examples/ngmodules/src/app/shared/highlight.directive.ts b/adev/src/content/examples/ngmodules/src/app/shared/highlight.directive.ts index 687ee013f48..c10ec5a865d 100644 --- a/adev/src/content/examples/ngmodules/src/app/shared/highlight.directive.ts +++ b/adev/src/content/examples/ngmodules/src/app/shared/highlight.directive.ts @@ -1,13 +1,12 @@ /* eslint-disable @angular-eslint/directive-selector */ // Exact copy of contact/highlight.directive except for color and message -import { Directive, ElementRef } from '@angular/core'; +import {Directive, ElementRef} from '@angular/core'; -@Directive({ selector: '[highlight], input' }) +@Directive({selector: '[highlight], input'}) /** Highlight the attached element or an InputElement in gray */ export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = '#efeeed'; - console.log( - `* Shared highlight called for ${el.nativeElement.tagName}`); + console.log(`* Shared highlight called for ${el.nativeElement.tagName}`); } } diff --git a/adev/src/content/examples/ngmodules/src/app/shared/shared.module.ts b/adev/src/content/examples/ngmodules/src/app/shared/shared.module.ts index 95615fba26d..6f91dac0c7f 100644 --- a/adev/src/content/examples/ngmodules/src/app/shared/shared.module.ts +++ b/adev/src/content/examples/ngmodules/src/app/shared/shared.module.ts @@ -1,14 +1,13 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { AwesomePipe } from './awesome.pipe'; -import { HighlightDirective } from './highlight.directive'; +import {AwesomePipe} from './awesome.pipe'; +import {HighlightDirective} from './highlight.directive'; @NgModule({ - imports: [ CommonModule ], - declarations: [ AwesomePipe, HighlightDirective ], - exports: [ AwesomePipe, HighlightDirective, - CommonModule, FormsModule ] + imports: [CommonModule], + declarations: [AwesomePipe, HighlightDirective], + exports: [AwesomePipe, HighlightDirective, CommonModule, FormsModule], }) -export class SharedModule { } +export class SharedModule {} diff --git a/adev/src/content/examples/ngmodules/src/main.ts b/adev/src/content/examples/ngmodules/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/ngmodules/src/main.ts +++ b/adev/src/content/examples/ngmodules/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/pipes/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/pipes/e2e/src/app.e2e-spec.ts index 4c348c22dc9..762b8118cc2 100644 --- a/adev/src/content/examples/pipes/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/pipes/e2e/src/app.e2e-spec.ts @@ -1,12 +1,13 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Pipes', () => { - beforeAll(() => browser.get('')); it('should open correctly', async () => { expect(await element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes'); - expect(await element(by.css('app-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`); + expect(await element(by.css('app-birthday p')).getText()).toEqual( + `The hero's birthday is Apr 15, 1988`, + ); }); it('should show 4 heroes', async () => { @@ -14,21 +15,28 @@ describe('Pipes', () => { }); it('should show a familiar hero in json', async () => { - expect(await element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto'); + expect( + await element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText(), + ).toContain('Bombasto'); }); it('should show alternate birthday formats', async () => { - expect(await element( - by.cssContainingText('app-birthday-formatting > p', `The hero's birthday is 4/15/88`)).isDisplayed()) - .toBe(true); - expect(await element( - by.cssContainingText('app-birthday-formatting > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()) - .toBe(true); + expect( + await element( + by.cssContainingText('app-birthday-formatting > p', `The hero's birthday is 4/15/88`), + ).isDisplayed(), + ).toBe(true); + expect( + await element( + by.cssContainingText('app-birthday-formatting > p', `The hero's birthday is Apr 15, 1988`), + ).isDisplayed(), + ).toBe(true); }); it('should be able to chain and compose pipes', async () => { const chainedPipeEles = element.all( - by.cssContainingText('app-birthday-pipe-chaining p', `The chained hero's`)); + by.cssContainingText('app-birthday-pipe-chaining p', `The chained hero's`), + ); expect(await chainedPipeEles.count()).toBe(2, 'should have 2 chained pipe examples'); expect(await chainedPipeEles.get(0).getText()).toContain('APR 15, 1988'); expect(await chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988'); @@ -52,7 +60,6 @@ describe('Pipes', () => { expect(await outputEle.getText()).toContain('343'); }); - it('should support flying heroes (pure) ', async () => { const nameEle = element(by.css('app-flying-heroes input[type="text"]')); const canFlyCheckEle = element(by.css('app-flying-heroes #can-fly')); @@ -60,8 +67,14 @@ describe('Pipes', () => { const resetEle = element(by.css('app-flying-heroes button')); const flyingHeroesEle = element.all(by.css('app-flying-heroes #flyers div')); - expect(await canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); - expect(await mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); + expect(await canFlyCheckEle.getAttribute('checked')).toEqual( + 'true', + 'should default to "can fly"', + ); + expect(await mutateCheckEle.getAttribute('checked')).toEqual( + 'true', + 'should default to mutating array', + ); expect(await flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly'); await nameEle.sendKeys('test1\n'); @@ -77,23 +90,32 @@ describe('Pipes', () => { expect(await flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes'); }); - it('should support flying heroes (impure) ', async () => { const nameEle = element(by.css('app-flying-heroes-impure input[type="text"]')); const canFlyCheckEle = element(by.css('app-flying-heroes-impure #can-fly')); const mutateCheckEle = element(by.css('app-flying-heroes-impure #mutate')); const flyingHeroesEle = element.all(by.css('app-flying-heroes-impure #flyers div')); - expect(await canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); - expect(await mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); + expect(await canFlyCheckEle.getAttribute('checked')).toEqual( + 'true', + 'should default to "can fly"', + ); + expect(await mutateCheckEle.getAttribute('checked')).toEqual( + 'true', + 'should default to mutating array', + ); expect(await flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly'); await nameEle.sendKeys('test1\n'); - expect(await flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array'); + expect(await flyingHeroesEle.count()).toEqual( + 3, + 'new flying hero should show in mutating array', + ); }); it('should show an async hero message', async () => { - expect(await element.all(by.tagName('app-hero-async-message')).get(0).getText()).toContain('hero'); + expect(await element.all(by.tagName('app-hero-async-message')).get(0).getText()).toContain( + 'hero', + ); }); - }); diff --git a/adev/src/content/examples/pipes/src/app/app.component.ts b/adev/src/content/examples/pipes/src/app/app.component.ts index 8d979558263..d23e7d097a4 100644 --- a/adev/src/content/examples/pipes/src/app/app.component.ts +++ b/adev/src/content/examples/pipes/src/app/app.component.ts @@ -1,13 +1,13 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { BirthdayComponent } from './birthday.component'; -import { BirthdayFormattingComponent } from './birthday-formatting.component'; -import { BirthdayPipeChainingComponent } from './birthday-pipe-chaining.component'; -import { FlyingHeroesComponent, FlyingHeroesImpureComponent } from './flying-heroes.component'; -import { HeroAsyncMessageComponent } from './hero-async-message.component'; -import { PrecedenceComponent } from './precedence.component'; -import { JsonPipeComponent } from './json-pipe.component'; -import { PowerBoosterComponent } from './power-booster.component'; +import {BirthdayComponent} from './birthday.component'; +import {BirthdayFormattingComponent} from './birthday-formatting.component'; +import {BirthdayPipeChainingComponent} from './birthday-pipe-chaining.component'; +import {FlyingHeroesComponent, FlyingHeroesImpureComponent} from './flying-heroes.component'; +import {HeroAsyncMessageComponent} from './hero-async-message.component'; +import {PrecedenceComponent} from './precedence.component'; +import {JsonPipeComponent} from './json-pipe.component'; +import {PowerBoosterComponent} from './power-booster.component'; @Component({ standalone: true, @@ -26,10 +26,11 @@ import { PowerBoosterComponent } from './power-booster.component'; PowerBoosterComponent, ], styles: [ - 'a[href] {display: block; padding: 10px 0;}', 'a:hover {text-decoration: none;}', + 'a[href] {display: block; padding: 10px 0;}', + 'a:hover {text-decoration: none;}', 'h2 {margin: 0;}', - 'code {font-family: monospace; background-color: #eee; padding: 0.5em;}' - ] + 'code {font-family: monospace; background-color: #eee; padding: 0.5em;}', + ], }) export class AppComponent { birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based diff --git a/adev/src/content/examples/pipes/src/app/birthday-formatting.component.ts b/adev/src/content/examples/pipes/src/app/birthday-formatting.component.ts index 31e31ceef5f..ba2c903fd4e 100644 --- a/adev/src/content/examples/pipes/src/app/birthday-formatting.component.ts +++ b/adev/src/content/examples/pipes/src/app/birthday-formatting.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { DatePipe } from '@angular/common'; +import {Component} from '@angular/core'; +import {DatePipe} from '@angular/common'; @Component({ standalone: true, @@ -11,7 +11,11 @@ export class BirthdayFormattingComponent { birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based toggle = true; - get format() { return this.toggle ? 'mediumDate' : 'fullDate'; } + get format() { + return this.toggle ? 'mediumDate' : 'fullDate'; + } - toggleFormat() { this.toggle = !this.toggle; } + toggleFormat() { + this.toggle = !this.toggle; + } } diff --git a/adev/src/content/examples/pipes/src/app/birthday-pipe-chaining.component.ts b/adev/src/content/examples/pipes/src/app/birthday-pipe-chaining.component.ts index fcb1a635424..9f8085e8976 100644 --- a/adev/src/content/examples/pipes/src/app/birthday-pipe-chaining.component.ts +++ b/adev/src/content/examples/pipes/src/app/birthday-pipe-chaining.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { DatePipe, UpperCasePipe} from '@angular/common'; +import {Component} from '@angular/core'; +import {DatePipe, UpperCasePipe} from '@angular/common'; @Component({ standalone: true, diff --git a/adev/src/content/examples/pipes/src/app/birthday.component.ts b/adev/src/content/examples/pipes/src/app/birthday.component.ts index e2839928ab1..d4469c0640e 100644 --- a/adev/src/content/examples/pipes/src/app/birthday.component.ts +++ b/adev/src/content/examples/pipes/src/app/birthday.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { DatePipe } from '@angular/common'; +import {Component} from '@angular/core'; +import {DatePipe} from '@angular/common'; @Component({ standalone: true, diff --git a/adev/src/content/examples/pipes/src/app/exponential-strength.pipe.ts b/adev/src/content/examples/pipes/src/app/exponential-strength.pipe.ts index 21041a4ce92..fc4515af22b 100644 --- a/adev/src/content/examples/pipes/src/app/exponential-strength.pipe.ts +++ b/adev/src/content/examples/pipes/src/app/exponential-strength.pipe.ts @@ -1,4 +1,4 @@ -import { Pipe, PipeTransform } from '@angular/core'; +import {Pipe, PipeTransform} from '@angular/core'; /* * Raise the value exponentially * Takes an exponent argument that defaults to 1. @@ -7,11 +7,11 @@ import { Pipe, PipeTransform } from '@angular/core'; * Example: * {{ 2 | exponentialStrength:10 }} * formats to: 1024 -*/ + */ // #docregion pipe-class @Pipe({ standalone: true, - name: 'exponentialStrength' + name: 'exponentialStrength', }) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, exponent = 1): number { diff --git a/adev/src/content/examples/pipes/src/app/flying-heroes.component.ts b/adev/src/content/examples/pipes/src/app/flying-heroes.component.ts index c49724caec6..4fe81227237 100644 --- a/adev/src/content/examples/pipes/src/app/flying-heroes.component.ts +++ b/adev/src/content/examples/pipes/src/app/flying-heroes.component.ts @@ -1,22 +1,24 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {Component} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { FlyingHeroesPipe, FlyingHeroesImpurePipe, } from './flying-heroes.pipe'; -import { HEROES } from './heroes'; +import {FlyingHeroesPipe, FlyingHeroesImpurePipe} from './flying-heroes.pipe'; +import {HEROES} from './heroes'; @Component({ standalone: true, selector: 'app-flying-heroes', templateUrl: './flying-heroes.component.html', imports: [CommonModule, FormsModule, FlyingHeroesPipe], - styles: [` + styles: [ + ` #flyers, #all {font-style: italic} button {display: block} input {margin: .25rem .25rem .5rem 0;} - `] + `, + ], }) // #docregion v1 export class FlyingHeroesComponent { @@ -27,12 +29,16 @@ export class FlyingHeroesComponent { title = 'Flying Heroes (pure pipe)'; // #docregion v1 - constructor() { this.reset(); } + constructor() { + this.reset(); + } addHero(name: string) { name = name.trim(); - if (!name) { return; } - const hero = { name, canFly: this.canFly }; + if (!name) { + return; + } + const hero = {name, canFly: this.canFly}; // #enddocregion v1 if (this.mutate) { // Pure pipe won't update display because heroes array reference is unchanged @@ -49,7 +55,9 @@ export class FlyingHeroesComponent { // #docregion v1 } - reset() { this.heroes = HEROES.slice(); } + reset() { + this.heroes = HEROES.slice(); + } } // #enddocregion v1 @@ -59,7 +67,11 @@ export class FlyingHeroesComponent { selector: 'app-flying-heroes-impure', templateUrl: './flying-heroes-impure.component.html', imports: [CommonModule, FormsModule, FlyingHeroesImpurePipe], - styles: ['#flyers, #all {font-style: italic}', 'button {display: block}', 'input {margin: .25rem .25rem .5rem 0;}'], + styles: [ + '#flyers, #all {font-style: italic}', + 'button {display: block}', + 'input {margin: .25rem .25rem .5rem 0;}', + ], }) export class FlyingHeroesImpureComponent extends FlyingHeroesComponent { override title = 'Flying Heroes (impure pipe)'; diff --git a/adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts b/adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts index 1557cf00ec8..0ef9d759302 100644 --- a/adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts +++ b/adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts @@ -1,17 +1,17 @@ // #docregion // #docregion pure -import { Pipe, PipeTransform } from '@angular/core'; +import {Pipe, PipeTransform} from '@angular/core'; -import { Hero } from './heroes'; +import {Hero} from './heroes'; @Pipe({ standalone: true, - name: 'flyingHeroes' + name: 'flyingHeroes', }) export class FlyingHeroesPipe implements PipeTransform { transform(allHeroes: Hero[]) { // #docregion filter - return allHeroes.filter(hero => hero.canFly); + return allHeroes.filter((hero) => hero.canFly); // #enddocregion filter } } @@ -23,8 +23,8 @@ export class FlyingHeroesPipe implements PipeTransform { @Pipe({ standalone: true, name: 'flyingHeroesImpure', - pure: false + pure: false, }) // #enddocregion pipe-decorator -export class FlyingHeroesImpurePipe extends FlyingHeroesPipe { } +export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {} // #enddocregion impure diff --git a/adev/src/content/examples/pipes/src/app/hero-async-message.component.ts b/adev/src/content/examples/pipes/src/app/hero-async-message.component.ts index 9fd724752f1..05912f748da 100644 --- a/adev/src/content/examples/pipes/src/app/hero-async-message.component.ts +++ b/adev/src/content/examples/pipes/src/app/hero-async-message.component.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; -import { AsyncPipe } from '@angular/common'; +import {Component} from '@angular/core'; +import {AsyncPipe} from '@angular/common'; -import { Observable, interval } from 'rxjs'; -import { map, startWith, take } from 'rxjs/operators'; +import {Observable, interval} from 'rxjs'; +import {map, startWith, take} from 'rxjs/operators'; @Component({ standalone: true, @@ -16,11 +16,7 @@ import { map, startWith, take } from 'rxjs/operators'; export class HeroAsyncMessageComponent { message$: Observable; - private messages = [ - 'You are my hero!', - 'You are the best hero!', - 'Will you be my hero?' - ]; + private messages = ['You are my hero!', 'You are the best hero!', 'Will you be my hero?']; constructor() { this.message$ = this.getResendObservable(); @@ -32,9 +28,9 @@ export class HeroAsyncMessageComponent { private getResendObservable() { return interval(1000).pipe( - map(i => `Message #${i + 1}: ${this.messages[i]}`), + map((i) => `Message #${i + 1}: ${this.messages[i]}`), take(this.messages.length), - startWith('Waiting for messages...') + startWith('Waiting for messages...'), ); } } diff --git a/adev/src/content/examples/pipes/src/app/heroes.ts b/adev/src/content/examples/pipes/src/app/heroes.ts index 8aa7b497897..8e2ba072342 100644 --- a/adev/src/content/examples/pipes/src/app/heroes.ts +++ b/adev/src/content/examples/pipes/src/app/heroes.ts @@ -3,8 +3,8 @@ export interface Hero { canFly: boolean; } export const HEROES: Hero[] = [ - { name: 'Windstorm', canFly: true }, - { name: 'Bombasto', canFly: false }, - { name: 'Magneto', canFly: false }, - { name: 'Tornado', canFly: true } + {name: 'Windstorm', canFly: true}, + {name: 'Bombasto', canFly: false}, + {name: 'Magneto', canFly: false}, + {name: 'Tornado', canFly: true}, ]; diff --git a/adev/src/content/examples/pipes/src/app/json-pipe.component.ts b/adev/src/content/examples/pipes/src/app/json-pipe.component.ts index 408332bf9e4..aa903f8012e 100644 --- a/adev/src/content/examples/pipes/src/app/json-pipe.component.ts +++ b/adev/src/content/examples/pipes/src/app/json-pipe.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { JsonPipe } from '@angular/common'; +import {Component} from '@angular/core'; +import {JsonPipe} from '@angular/common'; @Component({ standalone: true, @@ -14,6 +14,6 @@ export class JsonPipeComponent { address: { street: '123 Main St', city: 'Anytown', - } + }, }; } diff --git a/adev/src/content/examples/pipes/src/app/power-booster.component.ts b/adev/src/content/examples/pipes/src/app/power-booster.component.ts index 4fea10a5a0a..cc85785c034 100644 --- a/adev/src/content/examples/pipes/src/app/power-booster.component.ts +++ b/adev/src/content/examples/pipes/src/app/power-booster.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { ExponentialStrengthPipe } from './exponential-strength.pipe'; +import {Component} from '@angular/core'; +import {ExponentialStrengthPipe} from './exponential-strength.pipe'; @Component({ standalone: true, @@ -8,6 +8,6 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';

    Power Booster

    Super power boost: {{2 | exponentialStrength: 10}}

    `, - imports: [ExponentialStrengthPipe] + imports: [ExponentialStrengthPipe], }) -export class PowerBoosterComponent { } +export class PowerBoosterComponent {} diff --git a/adev/src/content/examples/pipes/src/app/precedence.component.ts b/adev/src/content/examples/pipes/src/app/precedence.component.ts index a8a1544a8c6..66fe0fcb92b 100644 --- a/adev/src/content/examples/pipes/src/app/precedence.component.ts +++ b/adev/src/content/examples/pipes/src/app/precedence.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { UpperCasePipe} from '@angular/common'; +import {Component} from '@angular/core'; +import {UpperCasePipe} from '@angular/common'; @Component({ standalone: true, diff --git a/adev/src/content/examples/pipes/src/main.ts b/adev/src/content/examples/pipes/src/main.ts index 0030b44494f..34504c3be92 100644 --- a/adev/src/content/examples/pipes/src/main.ts +++ b/adev/src/content/examples/pipes/src/main.ts @@ -1,5 +1,5 @@ -import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/platform-browser'; -import { provideHttpClient } from '@angular/common/http'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; +import {provideHttpClient} from '@angular/common/http'; import {AppComponent} from './app/app.component'; @@ -8,5 +8,5 @@ bootstrapApplication(AppComponent, { providers: [ provideHttpClient(), provideProtractorTestingSupport(), // essential for e2e testing - ] + ], }); diff --git a/adev/src/content/examples/practical-observable-usage/src/backoff.spec.ts b/adev/src/content/examples/practical-observable-usage/src/backoff.spec.ts index 0390a476d13..ef8d472bbbc 100644 --- a/adev/src/content/examples/practical-observable-usage/src/backoff.spec.ts +++ b/adev/src/content/examples/practical-observable-usage/src/backoff.spec.ts @@ -1,6 +1,6 @@ -import { interval } from 'rxjs'; -import { tap } from 'rxjs/operators'; -import { backoff } from './backoff'; +import {interval} from 'rxjs'; +import {tap} from 'rxjs/operators'; +import {backoff} from './backoff'; describe('backoff()', () => { beforeEach(() => jasmine.clock().install()); @@ -9,7 +9,7 @@ describe('backoff()', () => { it('should retry in case of error', () => { const mockConsole = {log: jasmine.createSpy('log')}; const source = interval(10).pipe( - tap(i => { + tap((i) => { if (i > 0) { throw new Error('Test error'); } @@ -17,8 +17,8 @@ describe('backoff()', () => { backoff(3, 100), ); source.subscribe({ - next: v => mockConsole.log(`Emitted: ${v}`), - error: e => mockConsole.log(`Errored: ${e.message || e}`), + next: (v) => mockConsole.log(`Emitted: ${v}`), + error: (e) => mockConsole.log(`Errored: ${e.message || e}`), complete: () => mockConsole.log('Completed'), }); diff --git a/adev/src/content/examples/practical-observable-usage/src/backoff.ts b/adev/src/content/examples/practical-observable-usage/src/backoff.ts index 671e40318d7..7c11ac4d20a 100644 --- a/adev/src/content/examples/practical-observable-usage/src/backoff.ts +++ b/adev/src/content/examples/practical-observable-usage/src/backoff.ts @@ -1,15 +1,15 @@ // #docplaster // #docregion -import { timer } from 'rxjs'; -import { ajax } from 'rxjs/ajax'; -import { retry } from 'rxjs/operators'; +import {timer} from 'rxjs'; +import {ajax} from 'rxjs/ajax'; +import {retry} from 'rxjs/operators'; export function backoff(maxTries: number, initialDelay: number) { - return retry({ - count: maxTries, - delay: (error, retryCount) => timer(initialDelay * retryCount ** 2), - }); - } + return retry({ + count: maxTries, + delay: (error, retryCount) => timer(initialDelay * retryCount ** 2), + }); +} // #enddocregion /* @@ -19,9 +19,11 @@ export function backoff(maxTries: number, initialDelay: number) { the docplaster combines the different regions together. */ function docRegionAjaxCall() { -// #docregion -ajax('/api/endpoint') - .pipe(backoff(3, 250)) - .subscribe(function handleData(data) { /* ... */ }); -// #enddocregion + // #docregion + ajax('/api/endpoint') + .pipe(backoff(3, 250)) + .subscribe(function handleData(data) { + /* ... */ + }); + // #enddocregion } diff --git a/adev/src/content/examples/practical-observable-usage/src/typeahead.spec.ts b/adev/src/content/examples/practical-observable-usage/src/typeahead.spec.ts index 0f9b0aea302..e0135c984fe 100644 --- a/adev/src/content/examples/practical-observable-usage/src/typeahead.spec.ts +++ b/adev/src/content/examples/practical-observable-usage/src/typeahead.spec.ts @@ -1,11 +1,11 @@ -import { of } from 'rxjs'; -import { docRegionTypeahead } from './typeahead'; +import {of} from 'rxjs'; +import {docRegionTypeahead} from './typeahead'; describe('typeahead', () => { let document: Document; let ajax: jasmine.Spy; let tick: MockClock['tick']; - let triggertInputChange: (e: { target: { value: string } }) => void; + let triggertInputChange: (e: {target: {value: string}}) => void; beforeEach(() => { const input = { @@ -19,37 +19,37 @@ describe('typeahead', () => { removeEventListener: jasmine.createSpy('removeEvent'), }; - document = { getElementById: (id: string) => input } as unknown as Document; + document = {getElementById: (id: string) => input} as unknown as Document; ajax = jasmine.createSpy('ajax').and.callFake((url: string) => of('foo bar')); tick = MockClock.install(); }); it('should make an ajax call to the corrent endpoint', () => { docRegionTypeahead(document, ajax); - triggertInputChange({ target: { value: 'foo' } }); + triggertInputChange({target: {value: 'foo'}}); tick(11); expect(ajax).toHaveBeenCalledWith('/api/endpoint?search=foo'); }); it('should not make an ajax call, when the input length < 3', () => { docRegionTypeahead(document, ajax); - triggertInputChange({ target: { value: '' } }); + triggertInputChange({target: {value: ''}}); tick(11); expect(ajax).not.toHaveBeenCalled(); - triggertInputChange({ target: { value: 'fo' } }); + triggertInputChange({target: {value: 'fo'}}); tick(11); expect(ajax).not.toHaveBeenCalled(); }); it('should not make an ajax call for intermediate values when debouncing', () => { docRegionTypeahead(document, ajax); - triggertInputChange({ target: { value: 'foo' } }); + triggertInputChange({target: {value: 'foo'}}); tick(9); - triggertInputChange({ target: { value: 'bar' } }); + triggertInputChange({target: {value: 'bar'}}); tick(9); - triggertInputChange({ target: { value: 'baz' } }); + triggertInputChange({target: {value: 'baz'}}); tick(9); - triggertInputChange({ target: { value: 'qux' } }); + triggertInputChange({target: {value: 'qux'}}); expect(ajax).not.toHaveBeenCalled(); tick(10); expect(ajax).toHaveBeenCalledTimes(1); @@ -58,11 +58,11 @@ describe('typeahead', () => { it('should not make an ajax call, when the input value has not changed', () => { docRegionTypeahead(document, ajax); - triggertInputChange({ target: { value: 'foo' } }); + triggertInputChange({target: {value: 'foo'}}); tick(11); expect(ajax).toHaveBeenCalled(); ajax.calls.reset(); - triggertInputChange({ target: { value: 'foo' } }); + triggertInputChange({target: {value: 'foo'}}); tick(11); expect(ajax).not.toHaveBeenCalled(); }); @@ -84,14 +84,22 @@ describe('typeahead', () => { static install(mockTime = 0): MockClock['tick'] { const mocked = new this(mockTime); - spyOn(globalThis, 'clearInterval').and.callFake(id => mocked.clearTask(id as MockTask['id'])); - spyOn(globalThis, 'clearTimeout').and.callFake(id => mocked.clearTask(id as MockTask['id'])); - spyOn(globalThis, 'setInterval').and.callFake( - ((fn: () => unknown, delay: number, ...args: any[]) => - mocked.createTask(fn, delay, true, ...args)) as typeof setInterval); - spyOn(globalThis, 'setTimeout').and.callFake( - ((fn: () => unknown, delay: number, ...args: any[]) => - mocked.createTask(fn, delay, false, ...args)) as typeof setTimeout); + spyOn(globalThis, 'clearInterval').and.callFake((id) => + mocked.clearTask(id as MockTask['id']), + ); + spyOn(globalThis, 'clearTimeout').and.callFake((id) => + mocked.clearTask(id as MockTask['id']), + ); + spyOn(globalThis, 'setInterval').and.callFake((( + fn: () => unknown, + delay: number, + ...args: any[] + ) => mocked.createTask(fn, delay, true, ...args)) as typeof setInterval); + spyOn(globalThis, 'setTimeout').and.callFake((( + fn: () => unknown, + delay: number, + ...args: any[] + ) => mocked.createTask(fn, delay, false, ...args)) as typeof setTimeout); spyOn(Date, 'now').and.callFake(() => mocked.now); @@ -99,14 +107,17 @@ describe('typeahead', () => { } private clearTask(id: MockTask['id']): void { - this.tasks = this.tasks.filter(task => task.id !== id); + this.tasks = this.tasks.filter((task) => task.id !== id); } private createTask( - fn: MockTask['fn'], delay: MockTask['delay'], recurring: MockTask['recurring'], - ...args: any[]): MockTask['id'] { + fn: MockTask['fn'], + delay: MockTask['delay'], + recurring: MockTask['recurring'], + ...args: any[] + ): MockTask['id'] { // Avoid infinite loops. - if (recurring && (delay <= 0)) { + if (recurring && delay <= 0) { delay = 1; } @@ -124,8 +135,9 @@ describe('typeahead', () => { private queueTask(task: MockTask): void { const firstLaterTaskIdx = this.tasks.findIndex( - otherTask => otherTask.nextTriggerTime > task.nextTriggerTime); - const newTaskIdx = (firstLaterTaskIdx === -1) ? this.tasks.length : firstLaterTaskIdx; + (otherTask) => otherTask.nextTriggerTime > task.nextTriggerTime, + ); + const newTaskIdx = firstLaterTaskIdx === -1 ? this.tasks.length : firstLaterTaskIdx; this.tasks.splice(newTaskIdx, 0, task); } diff --git a/adev/src/content/examples/practical-observable-usage/src/typeahead.ts b/adev/src/content/examples/practical-observable-usage/src/typeahead.ts index db4ee411892..e91d4545bbb 100644 --- a/adev/src/content/examples/practical-observable-usage/src/typeahead.ts +++ b/adev/src/content/examples/practical-observable-usage/src/typeahead.ts @@ -4,9 +4,9 @@ */ // #docplaster // #docregion - import { fromEvent, Observable } from 'rxjs'; - import { ajax } from 'rxjs/ajax'; - import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators'; +import {fromEvent, Observable} from 'rxjs'; +import {ajax} from 'rxjs/ajax'; +import {debounceTime, distinctUntilChanged, filter, map, switchMap} from 'rxjs/operators'; // #enddocregion // eslint-disable-next-line @typescript-eslint/no-shadow @@ -15,14 +15,14 @@ export function docRegionTypeahead(document: Document, ajax: (url: string) => Ob const searchBox = document.getElementById('search-box') as HTMLInputElement; const typeahead = fromEvent(searchBox, 'input').pipe( - map(e => (e.target as HTMLInputElement).value), - filter(text => text.length > 2), + map((e) => (e.target as HTMLInputElement).value), + filter((text) => text.length > 2), debounceTime(10), distinctUntilChanged(), - switchMap(searchTerm => ajax(`/api/endpoint?search=${searchTerm}`)) + switchMap((searchTerm) => ajax(`/api/endpoint?search=${searchTerm}`)), ); - typeahead.subscribe(data => { + typeahead.subscribe((data) => { // Handle the data from the API }); diff --git a/adev/src/content/examples/property-binding/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/property-binding/e2e/src/app.e2e-spec.ts index 22c90b60274..675642b365e 100644 --- a/adev/src/content/examples/property-binding/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/property-binding/e2e/src/app.e2e-spec.ts @@ -1,8 +1,6 @@ -import { browser, element, by } from 'protractor'; - +import {browser, element, by} from 'protractor'; describe('Property binding e2e tests', () => { - beforeEach(() => browser.get('')); it('should display Property Binding with Angular', async () => { @@ -19,7 +17,9 @@ describe('Property binding e2e tests', () => { }); it('should display Binding to a property of a directive', async () => { - expect(await element.all(by.css('h2')).get(3).getText()).toBe(`Binding to a property of a directive`); + expect(await element.all(by.css('h2')).get(3).getText()).toBe( + `Binding to a property of a directive`, + ); }); it('should display blue', async () => { diff --git a/adev/src/content/examples/property-binding/src/app/app.component.ts b/adev/src/content/examples/property-binding/src/app/app.component.ts index 4570a9a38dd..616b2e389f1 100644 --- a/adev/src/content/examples/property-binding/src/app/app.component.ts +++ b/adev/src/content/examples/property-binding/src/app/app.component.ts @@ -1,15 +1,15 @@ -import { Component } from '@angular/core'; -import { NgClass } from '@angular/common'; +import {Component} from '@angular/core'; +import {NgClass} from '@angular/common'; -import { ItemDetailComponent } from './item-detail.component'; -import { ItemListComponent } from './item-list.component'; +import {ItemDetailComponent} from './item-detail.component'; +import {ItemListComponent} from './item-list.component'; @Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', imports: [ItemDetailComponent, ItemListComponent, NgClass], - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { // #docregion item-image @@ -24,10 +24,12 @@ export class AppComponent { // #enddocregion parent-data-type // #docregion pass-object - currentItems = [{ - id: 21, - name: 'phone' - }]; + currentItems = [ + { + id: 21, + name: 'phone', + }, + ]; // #enddocregion pass-object interpolationTitle = 'Interpolation'; diff --git a/adev/src/content/examples/property-binding/src/app/item-detail.component.ts b/adev/src/content/examples/property-binding/src/app/item-detail.component.ts index 0b96f84b4a7..3495c32896b 100644 --- a/adev/src/content/examples/property-binding/src/app/item-detail.component.ts +++ b/adev/src/content/examples/property-binding/src/app/item-detail.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; // import { Item } from '../item'; // import { ITEMS } from '../mock-items'; diff --git a/adev/src/content/examples/property-binding/src/app/item-list.component.ts b/adev/src/content/examples/property-binding/src/app/item-list.component.ts index 1932a02d64a..8896cb4cd0a 100644 --- a/adev/src/content/examples/property-binding/src/app/item-list.component.ts +++ b/adev/src/content/examples/property-binding/src/app/item-list.component.ts @@ -1,7 +1,7 @@ -import { Component, Input } from '@angular/core'; -import { NgFor } from '@angular/common'; -import { ITEMS } from './mock-items'; -import { Item } from './item'; +import {Component, Input} from '@angular/core'; +import {NgFor} from '@angular/common'; +import {ITEMS} from './mock-items'; +import {Item} from './item'; @Component({ standalone: true, @@ -28,5 +28,4 @@ export class ItemListComponent { // #docregion item-input @Input() items: Item[] = []; // #enddocregion item-input - } diff --git a/adev/src/content/examples/property-binding/src/app/item.ts b/adev/src/content/examples/property-binding/src/app/item.ts index 442f22b9002..3424ea4a8e4 100644 --- a/adev/src/content/examples/property-binding/src/app/item.ts +++ b/adev/src/content/examples/property-binding/src/app/item.ts @@ -4,4 +4,3 @@ export interface Item { name: string; } // #enddocregion item-class - diff --git a/adev/src/content/examples/property-binding/src/app/mock-items.ts b/adev/src/content/examples/property-binding/src/app/mock-items.ts index 43cd74c5c9c..ad4d7ef3cbd 100644 --- a/adev/src/content/examples/property-binding/src/app/mock-items.ts +++ b/adev/src/content/examples/property-binding/src/app/mock-items.ts @@ -1,14 +1,14 @@ -import { Item } from './item'; +import {Item} from './item'; export const ITEMS: Item[] = [ - { id: 11, name: 'bottle' }, - { id: 12, name: 'boombox' }, - { id: 13, name: 'chair' }, - { id: 14, name: 'fishbowl' }, - { id: 15, name: 'lamp' }, - { id: 16, name: 'tv' }, - { id: 17, name: 'mug' }, - { id: 18, name: 'paintbrush' }, - { id: 19, name: 'plant' }, - { id: 20, name: 'teapot' } + {id: 11, name: 'bottle'}, + {id: 12, name: 'boombox'}, + {id: 13, name: 'chair'}, + {id: 14, name: 'fishbowl'}, + {id: 15, name: 'lamp'}, + {id: 16, name: 'tv'}, + {id: 17, name: 'mug'}, + {id: 18, name: 'paintbrush'}, + {id: 19, name: 'plant'}, + {id: 20, name: 'teapot'}, ]; diff --git a/adev/src/content/examples/property-binding/src/main.ts b/adev/src/content/examples/property-binding/src/main.ts index 5a2dcb1b362..52a1ee4382f 100644 --- a/adev/src/content/examples/property-binding/src/main.ts +++ b/adev/src/content/examples/property-binding/src/main.ts @@ -1,9 +1,9 @@ -import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/platform-browser'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; import {AppComponent} from './app/app.component'; bootstrapApplication(AppComponent, { providers: [ provideProtractorTestingSupport(), // essential for e2e testing - ] + ], }); diff --git a/adev/src/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts index a351968b704..1ac23e79942 100644 --- a/adev/src/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Providers and ViewProviders', () => { - beforeEach(() => browser.get('')); it('shows basic flower emoji', async () => { @@ -15,5 +14,4 @@ describe('Providers and ViewProviders', () => { it('shows sunflower from FlowerService', async () => { expect(await element.all(by.css('p')).get(8).getText()).toContain('🌻'); }); - }); diff --git a/adev/src/content/examples/providers-viewproviders/src/app/animal.service.ts b/adev/src/content/examples/providers-viewproviders/src/app/animal.service.ts index e7f6a98b08e..3dcb95ba814 100755 --- a/adev/src/content/examples/providers-viewproviders/src/app/animal.service.ts +++ b/adev/src/content/examples/providers-viewproviders/src/app/animal.service.ts @@ -1,8 +1,8 @@ // #docregion animal-service -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class AnimalService { emoji = '🐳'; diff --git a/adev/src/content/examples/providers-viewproviders/src/app/app.component.1.ts b/adev/src/content/examples/providers-viewproviders/src/app/app.component.1.ts index 226f6a5f4f4..6366fa3686a 100755 --- a/adev/src/content/examples/providers-viewproviders/src/app/app.component.1.ts +++ b/adev/src/content/examples/providers-viewproviders/src/app/app.component.1.ts @@ -1,19 +1,21 @@ -import { Component } from '@angular/core'; -import { FlowerService } from './flower.service'; -import { AnimalService } from './animal.service'; -import { InspectorComponent } from './inspector/inspector.component'; -import { ChildComponent } from './child/child.component'; - +import {Component} from '@angular/core'; +import {FlowerService} from './flower.service'; +import {AnimalService} from './animal.service'; +import {InspectorComponent} from './inspector/inspector.component'; +import {ChildComponent} from './child/child.component'; @Component({ standalone: true, selector: 'app-root', imports: [InspectorComponent, ChildComponent], templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ] + styleUrls: ['./app.component.css'], }) // #docregion injection -export class AppComponent { - constructor(public flower: FlowerService, public animal: AnimalService) {} +export class AppComponent { + constructor( + public flower: FlowerService, + public animal: AnimalService, + ) {} } // #enddocregion injection diff --git a/adev/src/content/examples/providers-viewproviders/src/app/app.component.ts b/adev/src/content/examples/providers-viewproviders/src/app/app.component.ts index 45eb16e60bf..cd37387e792 100755 --- a/adev/src/content/examples/providers-viewproviders/src/app/app.component.ts +++ b/adev/src/content/examples/providers-viewproviders/src/app/app.component.ts @@ -1,20 +1,22 @@ -import { Component } from '@angular/core'; -import { FlowerService } from './flower.service'; -import { AnimalService } from './animal.service'; -import { ChildComponent } from './child/child.component'; -import { InspectorComponent } from './inspector/inspector.component'; - +import {Component} from '@angular/core'; +import {FlowerService} from './flower.service'; +import {AnimalService} from './animal.service'; +import {ChildComponent} from './child/child.component'; +import {InspectorComponent} from './inspector/inspector.component'; @Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ], - imports: [ChildComponent, InspectorComponent] + styleUrls: ['./app.component.css'], + imports: [ChildComponent, InspectorComponent], }) // #docregion inject-animal-service -export class AppComponent { - constructor(public flower: FlowerService, public animal: AnimalService) {} +export class AppComponent { + constructor( + public flower: FlowerService, + public animal: AnimalService, + ) {} } // #enddocregion inject-animal-service diff --git a/adev/src/content/examples/providers-viewproviders/src/app/app.config.ts b/adev/src/content/examples/providers-viewproviders/src/app/app.config.ts index a27878dd2a6..bdd12671273 100644 --- a/adev/src/content/examples/providers-viewproviders/src/app/app.config.ts +++ b/adev/src/content/examples/providers-viewproviders/src/app/app.config.ts @@ -1,11 +1,11 @@ -import { ApplicationConfig } from '@angular/core'; -import { provideProtractorTestingSupport } from '@angular/platform-browser'; +import {ApplicationConfig} from '@angular/core'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; const appConfig: ApplicationConfig = { - providers: [ - // required for e2e testing - provideProtractorTestingSupport() - ] + providers: [ + // required for e2e testing + provideProtractorTestingSupport(), + ], }; export default appConfig; diff --git a/adev/src/content/examples/providers-viewproviders/src/app/child/child.component.1.ts b/adev/src/content/examples/providers-viewproviders/src/app/child/child.component.1.ts index 4091f43dd86..61461539afb 100755 --- a/adev/src/content/examples/providers-viewproviders/src/app/child/child.component.1.ts +++ b/adev/src/content/examples/providers-viewproviders/src/app/child/child.component.1.ts @@ -1,7 +1,7 @@ -import { Component, OnInit, Host, SkipSelf, Optional } from '@angular/core'; -import { AnimalService } from '../animal.service'; -import { FlowerService } from '../flower.service'; -import { InspectorComponent } from '../inspector/inspector.component'; +import {Component, OnInit, Host, SkipSelf, Optional} from '@angular/core'; +import {AnimalService} from '../animal.service'; +import {FlowerService} from '../flower.service'; +import {InspectorComponent} from '../inspector/inspector.component'; // #docregion flowerservice @Component({ @@ -11,13 +11,14 @@ import { InspectorComponent } from '../inspector/inspector.component'; templateUrl: './child.component.html', styleUrls: ['./child.component.css'], // use the providers array to provide a service - providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }] + providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}], }) - export class ChildComponent { // inject the service - constructor( public flower: FlowerService, public animal: AnimalService) { } + constructor( + public flower: FlowerService, + public animal: AnimalService, + ) {} } // #enddocregion flowerservice - diff --git a/adev/src/content/examples/providers-viewproviders/src/app/child/child.component.ts b/adev/src/content/examples/providers-viewproviders/src/app/child/child.component.ts index bcbed382fe9..902e860c8ca 100755 --- a/adev/src/content/examples/providers-viewproviders/src/app/child/child.component.ts +++ b/adev/src/content/examples/providers-viewproviders/src/app/child/child.component.ts @@ -1,8 +1,8 @@ // #docplaster -import { Component, OnInit, Host, SkipSelf, Optional } from '@angular/core'; -import { FlowerService } from '../flower.service'; -import { AnimalService } from '../animal.service'; -import { InspectorComponent } from '../inspector/inspector.component'; +import {Component, OnInit, Host, SkipSelf, Optional} from '@angular/core'; +import {FlowerService} from '../flower.service'; +import {AnimalService} from '../animal.service'; +import {InspectorComponent} from '../inspector/inspector.component'; // #docregion provide-animal-service @Component({ @@ -11,37 +11,37 @@ import { InspectorComponent } from '../inspector/inspector.component'; templateUrl: './child.component.html', styleUrls: ['./child.component.css'], // provide services - providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }], - viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }], - imports: [InspectorComponent] + providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}], + viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}], + imports: [InspectorComponent], }) - export class ChildComponent { // inject service - constructor( public flower: FlowerService, public animal: AnimalService) { } -// #enddocregion provide-animal-service + constructor( + public flower: FlowerService, + public animal: AnimalService, + ) {} + // #enddocregion provide-animal-service // viewProviders ensures that only the view gets to see this. // With the AnimalService in the viewProviders, the // InspectorComponent doesn't get to see it because the // inspector is in the content. - // constructor( public flower: FlowerService, @Optional() @Host() public animal?: AnimalService) { } -// Comment out the above constructor and alternately -// uncomment the two following constructors to see the -// effects of @Host() and @Host() + @SkipSelf(). + // Comment out the above constructor and alternately + // uncomment the two following constructors to see the + // effects of @Host() and @Host() + @SkipSelf(). -// constructor( -// @Host() public animal : AnimalService, -// @Host() @Optional() public flower ?: FlowerService) { } + // constructor( + // @Host() public animal : AnimalService, + // @Host() @Optional() public flower ?: FlowerService) { } -// constructor( -// @SkipSelf() @Host() public animal : AnimalService, -// @SkipSelf() @Host() @Optional() public flower ?: FlowerService) { } + // constructor( + // @SkipSelf() @Host() public animal : AnimalService, + // @SkipSelf() @Host() @Optional() public flower ?: FlowerService) { } -// #docregion provide-animal-service + // #docregion provide-animal-service } // #enddocregion provide-animal-service - diff --git a/adev/src/content/examples/providers-viewproviders/src/app/flower.service.ts b/adev/src/content/examples/providers-viewproviders/src/app/flower.service.ts index 00221005a38..bc69d752cd9 100755 --- a/adev/src/content/examples/providers-viewproviders/src/app/flower.service.ts +++ b/adev/src/content/examples/providers-viewproviders/src/app/flower.service.ts @@ -1,11 +1,10 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; // #docregion flowerservice @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class FlowerService { emoji = '🌺'; } // #enddocregion flowerservice - diff --git a/adev/src/content/examples/providers-viewproviders/src/app/inspector/inspector.component.ts b/adev/src/content/examples/providers-viewproviders/src/app/inspector/inspector.component.ts index b72f14290e8..b90940d3e95 100755 --- a/adev/src/content/examples/providers-viewproviders/src/app/inspector/inspector.component.ts +++ b/adev/src/content/examples/providers-viewproviders/src/app/inspector/inspector.component.ts @@ -1,15 +1,18 @@ -import { Component } from '@angular/core'; -import { FlowerService } from '../flower.service'; -import { AnimalService } from '../animal.service'; +import {Component} from '@angular/core'; +import {FlowerService} from '../flower.service'; +import {AnimalService} from '../animal.service'; @Component({ standalone: true, selector: 'app-inspector', templateUrl: './inspector.component.html', - styleUrls: ['./inspector.component.css'] + styleUrls: ['./inspector.component.css'], }) // #docregion injection export class InspectorComponent { - constructor(public flower: FlowerService, public animal: AnimalService) { } + constructor( + public flower: FlowerService, + public animal: AnimalService, + ) {} } // #enddocregion injection diff --git a/adev/src/content/examples/providers-viewproviders/src/main.ts b/adev/src/content/examples/providers-viewproviders/src/main.ts index a964b873df0..b03d104ab29 100755 --- a/adev/src/content/examples/providers-viewproviders/src/main.ts +++ b/adev/src/content/examples/providers-viewproviders/src/main.ts @@ -1,5 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; import appConfig from './app/app.config'; bootstrapApplication(AppComponent, appConfig); diff --git a/adev/src/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts index f4944a7115a..5330f5ef3c7 100644 --- a/adev/src/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts @@ -1,10 +1,12 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Reactive forms', () => { const nameEditor = element(by.css('app-name-editor')); const profileEditor = element(by.css('app-profile-editor')); const nameEditorButton = element(by.cssContainingText('app-root > nav > button', 'Name Editor')); - const profileEditorButton = element(by.cssContainingText('app-root > nav > button', 'Profile Editor')); + const profileEditorButton = element( + by.cssContainingText('app-root > nav > button', 'Profile Editor'), + ); beforeAll(() => browser.get('')); @@ -45,7 +47,7 @@ describe('Reactive forms', () => { await nameInput.sendKeys(nameText); const valueElement = nameEditor.element(by.cssContainingText('p', 'Value:')); const nameValueElement = await valueElement.getText(); - const nameValue = nameValueElement.toString().replace('Value: ', ''); + const nameValue = nameValueElement.toString().replace('Value: ', ''); expect(nameValue).toBe(nameText); }); @@ -62,7 +64,7 @@ describe('Reactive forms', () => { street: '345 South Lane', city: 'Northtown', state: 'XX', - zip: 12345 + zip: 12345, }; beforeAll(async () => { @@ -115,10 +117,7 @@ describe('Reactive forms', () => { it('should update the displayed form value when form inputs are updated', async () => { const aliasText = 'Johnny'; await Promise.all( - Object.keys(profile) - .map(key => - getInput(key).sendKeys(`${profile[key]}`) - ) + Object.keys(profile).map((key) => getInput(key).sendKeys(`${profile[key]}`)), ); const aliasInput = profileEditor.all(by.css('#alias-0')); diff --git a/adev/src/content/examples/reactive-forms/src/app/app.component.ts b/adev/src/content/examples/reactive-forms/src/app/app.component.ts index 5c9993b6b64..64fd7d57f4d 100644 --- a/adev/src/content/examples/reactive-forms/src/app/app.component.ts +++ b/adev/src/content/examples/reactive-forms/src/app/app.component.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; export type EditorType = 'name' | 'profile'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { editor: EditorType = 'name'; diff --git a/adev/src/content/examples/reactive-forms/src/app/app.module.ts b/adev/src/content/examples/reactive-forms/src/app/app.module.ts index 9ccc26e4af4..6b1bba613bf 100644 --- a/adev/src/content/examples/reactive-forms/src/app/app.module.ts +++ b/adev/src/content/examples/reactive-forms/src/app/app.module.ts @@ -1,34 +1,30 @@ // #docplaster -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; // #docregion imports -import { ReactiveFormsModule } from '@angular/forms'; +import {ReactiveFormsModule} from '@angular/forms'; // #enddocregion imports -import { AppComponent } from './app.component'; -import { NameEditorComponent } from './name-editor/name-editor.component'; -import { ProfileEditorComponent } from './profile-editor/profile-editor.component'; +import {AppComponent} from './app.component'; +import {NameEditorComponent} from './name-editor/name-editor.component'; +import {ProfileEditorComponent} from './profile-editor/profile-editor.component'; // #docregion imports @NgModule({ -// #enddocregion imports - declarations: [ - AppComponent, - NameEditorComponent, - ProfileEditorComponent - ], -// #docregion imports + // #enddocregion imports + declarations: [AppComponent, NameEditorComponent, ProfileEditorComponent], + // #docregion imports imports: [ -// #enddocregion imports + // #enddocregion imports BrowserModule, -// #docregion imports + // #docregion imports // other imports ... - ReactiveFormsModule + ReactiveFormsModule, ], -// #enddocregion imports + // #enddocregion imports providers: [], - bootstrap: [AppComponent] -// #docregion imports + bootstrap: [AppComponent], + // #docregion imports }) -export class AppModule { } +export class AppModule {} // #enddocregion imports diff --git a/adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts b/adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts index b549b560ea1..294b78b1b9c 100644 --- a/adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts +++ b/adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts @@ -1,22 +1,22 @@ // #docplaster // #docregion create-control -import { Component } from '@angular/core'; -import { FormControl } from '@angular/forms'; +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; @Component({ selector: 'app-name-editor', templateUrl: './name-editor.component.html', - styleUrls: ['./name-editor.component.css'] + styleUrls: ['./name-editor.component.css'], }) export class NameEditorComponent { name = new FormControl(''); -// #enddocregion create-control + // #enddocregion create-control -// #docregion update-value + // #docregion update-value updateName() { this.name.setValue('Nancy'); } -// #enddocregion update-value -// #docregion create-control + // #enddocregion update-value + // #docregion create-control } // #enddocregion create-control diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts index 94d388847e7..9d38a8ba210 100644 --- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts +++ b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts @@ -1,40 +1,40 @@ // #docplaster // #docregion formgroup, nested-formgroup -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion imports -import { FormGroup, FormControl } from '@angular/forms'; +import {FormGroup, FormControl} from '@angular/forms'; // #enddocregion imports @Component({ selector: 'app-profile-editor', templateUrl: './profile-editor.component.html', - styleUrls: ['./profile-editor.component.css'] + styleUrls: ['./profile-editor.component.css'], }) export class ProfileEditorComponent { -// #docregion formgroup-compare + // #docregion formgroup-compare profileForm = new FormGroup({ firstName: new FormControl(''), lastName: new FormControl(''), -// #enddocregion formgroup + // #enddocregion formgroup address: new FormGroup({ street: new FormControl(''), city: new FormControl(''), state: new FormControl(''), - zip: new FormControl('') - }) -// #docregion formgroup + zip: new FormControl(''), + }), + // #docregion formgroup }); -// #enddocregion formgroup, nested-formgroup, formgroup-compare -// #docregion patch-value + // #enddocregion formgroup, nested-formgroup, formgroup-compare + // #docregion patch-value updateProfile() { this.profileForm.patchValue({ firstName: 'Nancy', address: { - street: '123 Drew Street' - } + street: '123 Drew Street', + }, }); } -// #enddocregion patch-value -// #docregion formgroup, nested-formgroup + // #enddocregion patch-value + // #docregion formgroup, nested-formgroup } // #enddocregion formgroup diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts index 47503f52093..a3eb7ca0958 100644 --- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts +++ b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts @@ -1,21 +1,21 @@ // #docplaster // #docregion form-builder -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion form-builder-imports -import { FormBuilder } from '@angular/forms'; +import {FormBuilder} from '@angular/forms'; // #enddocregion form-builder-imports, form-builder // #docregion form-array-imports -import { FormArray } from '@angular/forms'; +import {FormArray} from '@angular/forms'; // #docregion form-builder-imports, form-builder // #enddocregion form-builder-imports, form-array-imports @Component({ selector: 'app-profile-editor', templateUrl: './profile-editor.component.html', - styleUrls: ['./profile-editor.component.css'] + styleUrls: ['./profile-editor.component.css'], }) export class ProfileEditorComponent { -// #docregion formgroup-compare + // #docregion formgroup-compare profileForm = this.formBuilder.group({ firstName: [''], lastName: [''], @@ -23,36 +23,34 @@ export class ProfileEditorComponent { street: [''], city: [''], state: [''], - zip: [''] + zip: [''], }), -// #enddocregion form-builder, formgroup-compare - aliases: this.formBuilder.array([ - this.formBuilder.control('') - ]) -// #docregion form-builder, formgroup-compare + // #enddocregion form-builder, formgroup-compare + aliases: this.formBuilder.array([this.formBuilder.control('')]), + // #docregion form-builder, formgroup-compare }); -// #enddocregion form-builder, formgroup-compare + // #enddocregion form-builder, formgroup-compare get aliases() { return this.profileForm.get('aliases') as FormArray; } -// #docregion inject-form-builder, form-builder + // #docregion inject-form-builder, form-builder - constructor(private formBuilder: FormBuilder) { } -// #enddocregion inject-form-builder, form-builder + constructor(private formBuilder: FormBuilder) {} + // #enddocregion inject-form-builder, form-builder updateProfile() { this.profileForm.patchValue({ firstName: 'Nancy', address: { - street: '123 Drew Street' - } + street: '123 Drew Street', + }, }); } addAlias() { this.aliases.push(this.formBuilder.control('')); } -// #docregion form-builder + // #docregion form-builder } // #enddocregion form-builder diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts index 4d8a34dac1c..b9baa0069c5 100644 --- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts +++ b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts @@ -1,18 +1,18 @@ // #docplaster -import { Component } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; +import {Component} from '@angular/core'; +import {FormBuilder} from '@angular/forms'; // #docregion validator-imports -import { Validators } from '@angular/forms'; +import {Validators} from '@angular/forms'; // #enddocregion validator-imports -import { FormArray } from '@angular/forms'; +import {FormArray} from '@angular/forms'; @Component({ selector: 'app-profile-editor', templateUrl: './profile-editor.component.html', - styleUrls: ['./profile-editor.component.css'] + styleUrls: ['./profile-editor.component.css'], }) export class ProfileEditorComponent { -// #docregion required-validator, aliases + // #docregion required-validator, aliases profileForm = this.formBuilder.group({ firstName: ['', Validators.required], lastName: [''], @@ -20,43 +20,41 @@ export class ProfileEditorComponent { street: [''], city: [''], state: [''], - zip: [''] + zip: [''], }), -// #enddocregion required-validator - aliases: this.formBuilder.array([ - this.formBuilder.control('') - ]) -// #docregion required-validator + // #enddocregion required-validator + aliases: this.formBuilder.array([this.formBuilder.control('')]), + // #docregion required-validator }); -// #enddocregion required-validator, aliases -// #docregion aliases-getter + // #enddocregion required-validator, aliases + // #docregion aliases-getter get aliases() { return this.profileForm.get('aliases') as FormArray; } -// #enddocregion aliases-getter - constructor(private formBuilder: FormBuilder) { } + // #enddocregion aliases-getter + constructor(private formBuilder: FormBuilder) {} updateProfile() { this.profileForm.patchValue({ firstName: 'Nancy', address: { - street: '123 Drew Street' - } + street: '123 Drew Street', + }, }); } -// #docregion add-alias + // #docregion add-alias addAlias() { this.aliases.push(this.formBuilder.control('')); } -// #enddocregion add-alias -// #docregion on-submit + // #enddocregion add-alias + // #docregion on-submit onSubmit() { // TODO: Use EventEmitter with form value console.warn(this.profileForm.value); } -// #enddocregion on-submit + // #enddocregion on-submit } diff --git a/adev/src/content/examples/reactive-forms/src/main.ts b/adev/src/content/examples/reactive-forms/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/reactive-forms/src/main.ts +++ b/adev/src/content/examples/reactive-forms/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts index 687b2e38b0d..5b64dd7ce36 100644 --- a/adev/src/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Resolution-modifiers-example', () => { - beforeAll(() => browser.get('')); it('shows basic flower emoji', async () => { @@ -15,5 +14,4 @@ describe('Resolution-modifiers-example', () => { it('shows tulip in host child', async () => { expect(await element.all(by.css('p')).get(9).getText()).toContain('🌷'); }); - }); diff --git a/adev/src/content/examples/resolution-modifiers/src/app/app.component.ts b/adev/src/content/examples/resolution-modifiers/src/app/app.component.ts index 3159ab63f44..0beac8c6679 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/app.component.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/app.component.ts @@ -1,19 +1,19 @@ -import { Component } from '@angular/core'; -import { LeafService } from './leaf.service'; -import { FlowerService } from './flower.service'; -import { HostComponent } from './host/host.component'; -import { OptionalComponent } from './optional/optional.component'; -import { SelfComponent } from './self/self.component'; -import { HostParentComponent } from './host-parent/host-parent.component'; -import { HostChildComponent } from './host-child/host-child.component'; -import { SelfNoDataComponent } from './self-no-data/self-no-data.component'; -import { SkipselfComponent } from './skipself/skipself.component'; +import {Component} from '@angular/core'; +import {LeafService} from './leaf.service'; +import {FlowerService} from './flower.service'; +import {HostComponent} from './host/host.component'; +import {OptionalComponent} from './optional/optional.component'; +import {SelfComponent} from './self/self.component'; +import {HostParentComponent} from './host-parent/host-parent.component'; +import {HostChildComponent} from './host-child/host-child.component'; +import {SelfNoDataComponent} from './self-no-data/self-no-data.component'; +import {SkipselfComponent} from './skipself/skipself.component'; @Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ], + styleUrls: ['./app.component.css'], imports: [ HostComponent, HostChildComponent, @@ -21,10 +21,13 @@ import { SkipselfComponent } from './skipself/skipself.component'; OptionalComponent, SelfComponent, SelfNoDataComponent, - SkipselfComponent - ] + SkipselfComponent, + ], }) export class AppComponent { name = 'Angular'; - constructor(public flower: FlowerService, public leaf: LeafService) {} + constructor( + public flower: FlowerService, + public leaf: LeafService, + ) {} } diff --git a/adev/src/content/examples/resolution-modifiers/src/app/app.config.ts b/adev/src/content/examples/resolution-modifiers/src/app/app.config.ts index 23310c217df..25ca3f3cf33 100644 --- a/adev/src/content/examples/resolution-modifiers/src/app/app.config.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/app.config.ts @@ -1,10 +1,10 @@ -import { ApplicationConfig } from '@angular/core'; -import { provideProtractorTestingSupport } from '@angular/platform-browser'; +import {ApplicationConfig} from '@angular/core'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; const appConfig: ApplicationConfig = { - providers: [ - provideProtractorTestingSupport() //only needed for docs e2e testing - ] + providers: [ + provideProtractorTestingSupport(), //only needed for docs e2e testing + ], }; export default appConfig; diff --git a/adev/src/content/examples/resolution-modifiers/src/app/flower.service.ts b/adev/src/content/examples/resolution-modifiers/src/app/flower.service.ts index 6c1eb7ff314..706d4bf11d6 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/flower.service.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/flower.service.ts @@ -1,8 +1,7 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ - providedIn: 'root' // provide this service in the root ModuleInjector - + providedIn: 'root', // provide this service in the root ModuleInjector }) export class FlowerService { emoji = '🌸'; diff --git a/adev/src/content/examples/resolution-modifiers/src/app/host-child/host-child.component.ts b/adev/src/content/examples/resolution-modifiers/src/app/host-child/host-child.component.ts index 584e77cb861..2e00c80455a 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/host-child/host-child.component.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/host-child/host-child.component.ts @@ -1,12 +1,12 @@ -import { Component } from '@angular/core'; -import { FlowerService } from '../flower.service'; +import {Component} from '@angular/core'; +import {FlowerService} from '../flower.service'; @Component({ standalone: true, selector: 'app-host-child', templateUrl: './host-child.component.html', - styleUrls: ['./host-child.component.css'] + styleUrls: ['./host-child.component.css'], }) export class HostChildComponent { - constructor(public flower: FlowerService) { } + constructor(public flower: FlowerService) {} } diff --git a/adev/src/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.ts b/adev/src/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.ts index 57b9887e272..c61f27ab26a 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.ts @@ -1,18 +1,15 @@ -import { Component } from '@angular/core'; -import { FlowerService } from '../flower.service'; -import { HostComponent } from '../host/host.component'; - +import {Component} from '@angular/core'; +import {FlowerService} from '../flower.service'; +import {HostComponent} from '../host/host.component'; @Component({ standalone: true, selector: 'app-host-parent', templateUrl: './host-parent.component.html', styleUrls: ['./host-parent.component.css'], - providers: [{ provide: FlowerService, useValue: { emoji: '🌺' } }], - imports: [HostComponent] + providers: [{provide: FlowerService, useValue: {emoji: '🌺'}}], + imports: [HostComponent], }) export class HostParentComponent { - - constructor(public flower: FlowerService) { } - + constructor(public flower: FlowerService) {} } diff --git a/adev/src/content/examples/resolution-modifiers/src/app/host/host.component.ts b/adev/src/content/examples/resolution-modifiers/src/app/host/host.component.ts index 4ed99c9c906..c3dfaf588eb 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/host/host.component.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/host/host.component.ts @@ -1,6 +1,6 @@ -import { Component, Host, Optional } from '@angular/core'; -import { FlowerService } from '../flower.service'; -import { HostChildComponent } from '../host-child/host-child.component'; +import {Component, Host, Optional} from '@angular/core'; +import {FlowerService} from '../flower.service'; +import {HostChildComponent} from '../host-child/host-child.component'; // #docregion host-component @Component({ @@ -9,16 +9,13 @@ import { HostChildComponent } from '../host-child/host-child.component'; templateUrl: './host.component.html', styleUrls: ['./host.component.css'], // provide the service - providers: [{ provide: FlowerService, useValue: { emoji: '🌷' } }], - imports: [HostChildComponent] + providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}], + imports: [HostChildComponent], }) export class HostComponent { // use @Host() in the constructor when injecting the service - constructor(@Host() @Optional() public flower?: FlowerService) { } - + constructor(@Host() @Optional() public flower?: FlowerService) {} } // #enddocregion host-component // if you take out @Host() and the providers array, flower will be red hibiscus - - diff --git a/adev/src/content/examples/resolution-modifiers/src/app/leaf.service.ts b/adev/src/content/examples/resolution-modifiers/src/app/leaf.service.ts index 01673173b2b..b4f6b2e6df0 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/leaf.service.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/leaf.service.ts @@ -1,11 +1,10 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) // #docregion leafservice export class LeafService { emoji = '🌿'; } // #enddocregion leafservice - diff --git a/adev/src/content/examples/resolution-modifiers/src/app/optional.service.ts b/adev/src/content/examples/resolution-modifiers/src/app/optional.service.ts index c536830551d..05f31cbee3c 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/optional.service.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/optional.service.ts @@ -1,7 +1,6 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable() -export class OptionalService { -} +export class OptionalService {} // This service isn't provided anywhere. diff --git a/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.ts b/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.ts index d9345f5d9d0..87736692040 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.ts @@ -1,11 +1,11 @@ -import { Component, Optional } from '@angular/core'; -import { OptionalService } from '../optional.service'; +import {Component, Optional} from '@angular/core'; +import {OptionalService} from '../optional.service'; @Component({ standalone: true, selector: 'app-optional', templateUrl: './optional.component.html', - styleUrls: ['./optional.component.css'] + styleUrls: ['./optional.component.css'], }) // #docregion optional-component @@ -17,6 +17,3 @@ export class OptionalComponent { // The OptionalService isn't provided here, in the @Injectable() // providers array, or in the NgModule. If you remove @Optional() // from the constructor, you'll get an error. - - - diff --git a/adev/src/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.ts b/adev/src/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.ts index 88975e35698..44e812189a4 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.ts @@ -1,19 +1,18 @@ -import { Component, Self, Optional } from '@angular/core'; -import { LeafService } from '../leaf.service'; +import {Component, Self, Optional} from '@angular/core'; +import {LeafService} from '../leaf.service'; // #docregion self-no-data-component @Component({ standalone: true, selector: 'app-self-no-data', templateUrl: './self-no-data.component.html', - styleUrls: ['./self-no-data.component.css'] + styleUrls: ['./self-no-data.component.css'], }) export class SelfNoDataComponent { - constructor(@Self() @Optional() public leaf?: LeafService) { } + constructor(@Self() @Optional() public leaf?: LeafService) {} } // #enddocregion self-no-data-component // The app doesn't break because the value being available at self is optional. // If you remove @Optional(), the app breaks. - diff --git a/adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts b/adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts index dd8c63eba24..0b32510957b 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts @@ -1,5 +1,5 @@ -import { Component, Self } from '@angular/core'; -import { FlowerService } from '../flower.service'; +import {Component, Self} from '@angular/core'; +import {FlowerService} from '../flower.service'; // #docregion self-component @Component({ @@ -7,7 +7,7 @@ import { FlowerService } from '../flower.service'; selector: 'app-self', templateUrl: './self.component.html', styleUrls: ['./self.component.css'], - providers: [{ provide: FlowerService, useValue: { emoji: '🌷' } }] + providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}], }) export class SelfComponent { constructor(@Self() public flower: FlowerService) {} @@ -16,4 +16,3 @@ export class SelfComponent { // This component provides the FlowerService so the injector // doesn't have to look further up the injector tree - diff --git a/adev/src/content/examples/resolution-modifiers/src/app/skipself/skipself.component.ts b/adev/src/content/examples/resolution-modifiers/src/app/skipself/skipself.component.ts index 999d276bb6f..e6dc7f56517 100755 --- a/adev/src/content/examples/resolution-modifiers/src/app/skipself/skipself.component.ts +++ b/adev/src/content/examples/resolution-modifiers/src/app/skipself/skipself.component.ts @@ -1,5 +1,5 @@ -import { Component, SkipSelf } from '@angular/core'; -import { LeafService } from '../leaf.service'; +import {Component, SkipSelf} from '@angular/core'; +import {LeafService} from '../leaf.service'; // #docregion skipself-component @Component({ @@ -8,11 +8,11 @@ import { LeafService } from '../leaf.service'; templateUrl: './skipself.component.html', styleUrls: ['./skipself.component.css'], // Angular would ignore this LeafService instance - providers: [{ provide: LeafService, useValue: { emoji: '🍁' } }] + providers: [{provide: LeafService, useValue: {emoji: '🍁'}}], }) export class SkipselfComponent { // Use @SkipSelf() in the constructor - constructor(@SkipSelf() public leaf: LeafService) { } + constructor(@SkipSelf() public leaf: LeafService) {} } // #enddocregion skipself-component diff --git a/adev/src/content/examples/resolution-modifiers/src/main.ts b/adev/src/content/examples/resolution-modifiers/src/main.ts index a964b873df0..b03d104ab29 100755 --- a/adev/src/content/examples/resolution-modifiers/src/main.ts +++ b/adev/src/content/examples/resolution-modifiers/src/main.ts @@ -1,5 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; import appConfig from './app/app.config'; bootstrapApplication(AppComponent, appConfig); diff --git a/adev/src/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts index c73d879e8ec..8f850c55638 100644 --- a/adev/src/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Router basic tutorial e2e tests', () => { - beforeEach(() => browser.get('')); it('should display Angular Router Sample', async () => { diff --git a/adev/src/content/examples/router-tutorial/src/app/app.component.ts b/adev/src/content/examples/router-tutorial/src/app/app.component.ts index 9b4935f1e48..9e243014f6c 100644 --- a/adev/src/content/examples/router-tutorial/src/app/app.component.ts +++ b/adev/src/content/examples/router-tutorial/src/app/app.component.ts @@ -9,7 +9,7 @@ import {HeroesListComponent} from './heroes-list/heroes-list.component'; standalone: true, imports: [RouterOutlet, RouterLink, RouterLinkActive, CrisisListComponent, HeroesListComponent], templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'angular-router-sample'; diff --git a/adev/src/content/examples/router-tutorial/src/app/app.config.ts b/adev/src/content/examples/router-tutorial/src/app/app.config.ts index 30e834cd354..b4df777bde3 100644 --- a/adev/src/content/examples/router-tutorial/src/app/app.config.ts +++ b/adev/src/content/examples/router-tutorial/src/app/app.config.ts @@ -4,7 +4,6 @@ import {provideRouter} from '@angular/router'; import {routes} from './app.routes'; - export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes), provideProtractorTestingSupport()] + providers: [provideRouter(routes), provideProtractorTestingSupport()], }; diff --git a/adev/src/content/examples/router-tutorial/src/app/app.routes.ts b/adev/src/content/examples/router-tutorial/src/app/app.routes.ts index cc9a18eb14d..e81d1e6ad4f 100644 --- a/adev/src/content/examples/router-tutorial/src/app/app.routes.ts +++ b/adev/src/content/examples/router-tutorial/src/app/app.routes.ts @@ -8,5 +8,5 @@ export const routes: Routes = [ {path: 'crisis-list', component: CrisisListComponent}, {path: 'heroes-list', component: HeroesListComponent}, {path: '', redirectTo: '/heroes-list', pathMatch: 'full'}, - {path: '**', component: PageNotFoundComponent} + {path: '**', component: PageNotFoundComponent}, ]; diff --git a/adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts b/adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts index 72ca57c7b08..a881614918a 100644 --- a/adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts +++ b/adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts @@ -1,11 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-crisis-list', standalone: true, templateUrl: './crisis-list.component.html', - styleUrls: ['./crisis-list.component.css'] + styleUrls: ['./crisis-list.component.css'], }) -export class CrisisListComponent { - -} +export class CrisisListComponent {} diff --git a/adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts b/adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts index 73677d8c675..2c24cd37bb5 100644 --- a/adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts +++ b/adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts @@ -1,11 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-heroes-list', standalone: true, templateUrl: './heroes-list.component.html', - styleUrls: ['./heroes-list.component.css'] + styleUrls: ['./heroes-list.component.css'], }) -export class HeroesListComponent { - -} +export class HeroesListComponent {} diff --git a/adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts b/adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts index 862bc3b7c65..e7c7cd7b9f7 100644 --- a/adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts +++ b/adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts @@ -4,7 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-page-not-found', standalone: true, templateUrl: './page-not-found.component.html', - styleUrls: ['./page-not-found.component.css'] + styleUrls: ['./page-not-found.component.css'], }) -export class PageNotFoundComponent { -} +export class PageNotFoundComponent {} diff --git a/adev/src/content/examples/router/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/router/e2e/src/app.e2e-spec.ts index 7985d9220d3..ee6f1f8003a 100644 --- a/adev/src/content/examples/router/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/router/e2e/src/app.e2e-spec.ts @@ -1,16 +1,17 @@ -import { browser, element, by, ExpectedConditions as EC } from 'protractor'; +import {browser, element, by, ExpectedConditions as EC} from 'protractor'; const numDashboardTabs = 5; const numCrises = 4; const numHeroes = 9; describe('Router', () => { - beforeAll(() => browser.get('')); function getPageStruct() { const hrefEles = element.all(by.css('nav a')); - const crisisDetail = element.all(by.css('app-crisis-center > app-crisis-list > app-crisis-detail > div')).first(); + const crisisDetail = element + .all(by.css('app-crisis-center > app-crisis-list > app-crisis-detail > div')) + .first(); const heroDetail = element(by.css('app-hero-detail')); return { @@ -38,7 +39,7 @@ describe('Router', () => { contactCancelButton: element.all(by.buttonText('Cancel')), primaryOutlet: element.all(by.css('app-hero-list')), - secondaryOutlet: element.all(by.css('app-compose-message')) + secondaryOutlet: element.all(by.css('app-compose-message')), }; } @@ -187,5 +188,4 @@ describe('Router', () => { expect(await crisisEle.getText()).toContain(crisisText); } } - }); diff --git a/adev/src/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts b/adev/src/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts index a58f95ef340..0184d06a1cc 100644 --- a/adev/src/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts +++ b/adev/src/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts @@ -1,13 +1,13 @@ // #docregion -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {Observable} from 'rxjs'; +import {map} from 'rxjs/operators'; @Component({ selector: 'app-admin-dashboard', templateUrl: './admin-dashboard.component.html', - styleUrls: ['./admin-dashboard.component.css'] + styleUrls: ['./admin-dashboard.component.css'], }) export class AdminDashboardComponent implements OnInit { sessionId!: Observable; @@ -17,13 +17,11 @@ export class AdminDashboardComponent implements OnInit { ngOnInit() { // Capture the session ID if available - this.sessionId = this.route - .queryParamMap - .pipe(map(params => params.get('session_id') || 'None')); + this.sessionId = this.route.queryParamMap.pipe( + map((params) => params.get('session_id') || 'None'), + ); // Capture the fragment if available - this.token = this.route - .fragment - .pipe(map(fragment => fragment || 'None')); + this.token = this.route.fragment.pipe(map((fragment) => fragment || 'None')); } } diff --git a/adev/src/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts b/adev/src/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts index da9cd828fc8..9b7c02bf280 100644 --- a/adev/src/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts +++ b/adev/src/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts @@ -1,15 +1,15 @@ // #docregion -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {Observable} from 'rxjs'; +import {map} from 'rxjs/operators'; -import { SelectivePreloadingStrategyService } from '../../selective-preloading-strategy.service'; +import {SelectivePreloadingStrategyService} from '../../selective-preloading-strategy.service'; @Component({ selector: 'app-admin-dashboard', templateUrl: './admin-dashboard.component.html', - styleUrls: ['./admin-dashboard.component.css'] + styleUrls: ['./admin-dashboard.component.css'], }) export class AdminDashboardComponent implements OnInit { sessionId!: Observable; @@ -18,20 +18,18 @@ export class AdminDashboardComponent implements OnInit { constructor( private route: ActivatedRoute, - preloadStrategy: SelectivePreloadingStrategyService + preloadStrategy: SelectivePreloadingStrategyService, ) { this.modules = preloadStrategy.preloadedModules; } ngOnInit() { // Capture the session ID if available - this.sessionId = this.route - .queryParamMap - .pipe(map(params => params.get('session_id') || 'None')); + this.sessionId = this.route.queryParamMap.pipe( + map((params) => params.get('session_id') || 'None'), + ); // Capture the fragment if available - this.token = this.route - .fragment - .pipe(map(fragment => fragment || 'None')); + this.token = this.route.fragment.pipe(map((fragment) => fragment || 'None')); } } diff --git a/adev/src/content/examples/router/src/app/admin/admin-routing.module.1.ts b/adev/src/content/examples/router/src/app/admin/admin-routing.module.1.ts index 3f41e273ff6..b7435f613ad 100644 --- a/adev/src/content/examples/router/src/app/admin/admin-routing.module.1.ts +++ b/adev/src/content/examples/router/src/app/admin/admin-routing.module.1.ts @@ -1,12 +1,12 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { AdminComponent } from './admin/admin.component'; -import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises/manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component'; +import {AdminComponent} from './admin/admin.component'; +import {AdminDashboardComponent} from './admin-dashboard/admin-dashboard.component'; +import {ManageCrisesComponent} from './manage-crises/manage-crises.component'; +import {ManageHeroesComponent} from './manage-heroes/manage-heroes.component'; // #docregion admin-routes const adminRoutes: Routes = [ @@ -17,22 +17,18 @@ const adminRoutes: Routes = [ { path: '', children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } - ] - } + {path: 'crises', component: ManageCrisesComponent}, + {path: 'heroes', component: ManageHeroesComponent}, + {path: '', component: AdminDashboardComponent}, + ], + }, + ], + }, ]; @NgModule({ - imports: [ - RouterModule.forChild(adminRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(adminRoutes)], + exports: [RouterModule], }) export class AdminRoutingModule {} // #enddocregion admin-routes diff --git a/adev/src/content/examples/router/src/app/admin/admin-routing.module.2.ts b/adev/src/content/examples/router/src/app/admin/admin-routing.module.2.ts index 3949c1c3d68..00e10d1057d 100644 --- a/adev/src/content/examples/router/src/app/admin/admin-routing.module.2.ts +++ b/adev/src/content/examples/router/src/app/admin/admin-routing.module.2.ts @@ -11,27 +11,30 @@ import {AdminComponent} from './admin/admin.component'; import {ManageCrisesComponent} from './manage-crises/manage-crises.component'; import {ManageHeroesComponent} from './manage-heroes/manage-heroes.component'; -const adminRoutes: Routes = [{ - path: 'admin', - component: AdminComponent, - canActivate: [authGuard], +const adminRoutes: Routes = [ + { + path: 'admin', + component: AdminComponent, + canActivate: [authGuard], - // #enddocregion admin-route - // #docregion admin-route - children: [{ - path: '', - children: [ - {path: 'crises', component: ManageCrisesComponent}, - {path: 'heroes', component: ManageHeroesComponent}, - {path: '', component: AdminDashboardComponent} - ], // #enddocregion admin-route - canActivateChild: [authGuard] // #docregion admin-route - }] -}]; + children: [ + { + path: '', + children: [ + {path: 'crises', component: ManageCrisesComponent}, + {path: 'heroes', component: ManageHeroesComponent}, + {path: '', component: AdminDashboardComponent}, + ], + // #enddocregion admin-route + canActivateChild: [authGuard], + // #docregion admin-route + }, + ], + }, +]; @NgModule({imports: [RouterModule.forChild(adminRoutes)], exports: [RouterModule]}) -export class AdminRoutingModule { -} +export class AdminRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/admin/admin-routing.module.3.ts b/adev/src/content/examples/router/src/app/admin/admin-routing.module.3.ts index 0901e421649..c0ec61f09b4 100644 --- a/adev/src/content/examples/router/src/app/admin/admin-routing.module.3.ts +++ b/adev/src/content/examples/router/src/app/admin/admin-routing.module.3.ts @@ -1,14 +1,14 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { AdminComponent } from './admin/admin.component'; -import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises/manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component'; +import {AdminComponent} from './admin/admin.component'; +import {AdminDashboardComponent} from './admin-dashboard/admin-dashboard.component'; +import {ManageCrisesComponent} from './manage-crises/manage-crises.component'; +import {ManageHeroesComponent} from './manage-heroes/manage-heroes.component'; -import { authGuard } from '../auth/auth.guard'; +import {authGuard} from '../auth/auth.guard'; // #docregion can-activate-child const adminRoutes: Routes = [ @@ -21,22 +21,18 @@ const adminRoutes: Routes = [ path: '', canActivateChild: [authGuard], children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } - ] - } + {path: 'crises', component: ManageCrisesComponent}, + {path: 'heroes', component: ManageHeroesComponent}, + {path: '', component: AdminDashboardComponent}, + ], + }, + ], + }, ]; @NgModule({ - imports: [ - RouterModule.forChild(adminRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(adminRoutes)], + exports: [RouterModule], }) export class AdminRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/admin/admin-routing.module.ts b/adev/src/content/examples/router/src/app/admin/admin-routing.module.ts index bbe86679ff5..244d09bab4c 100644 --- a/adev/src/content/examples/router/src/app/admin/admin-routing.module.ts +++ b/adev/src/content/examples/router/src/app/admin/admin-routing.module.ts @@ -1,14 +1,14 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { AdminComponent } from './admin/admin.component'; -import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises/manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component'; +import {AdminComponent} from './admin/admin.component'; +import {AdminDashboardComponent} from './admin-dashboard/admin-dashboard.component'; +import {ManageCrisesComponent} from './manage-crises/manage-crises.component'; +import {ManageHeroesComponent} from './manage-heroes/manage-heroes.component'; -import { authGuard } from '../auth/auth.guard'; +import {authGuard} from '../auth/auth.guard'; const adminRoutes: Routes = [ { @@ -20,22 +20,18 @@ const adminRoutes: Routes = [ path: '', canActivateChild: [authGuard], children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } - ] - } + {path: 'crises', component: ManageCrisesComponent}, + {path: 'heroes', component: ManageHeroesComponent}, + {path: '', component: AdminDashboardComponent}, + ], + }, + ], + }, ]; @NgModule({ - imports: [ - RouterModule.forChild(adminRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(adminRoutes)], + exports: [RouterModule], }) export class AdminRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/admin/admin.module.ts b/adev/src/content/examples/router/src/app/admin/admin.module.ts index c17b352d54c..bab83e6e796 100644 --- a/adev/src/content/examples/router/src/app/admin/admin.module.ts +++ b/adev/src/content/examples/router/src/app/admin/admin.module.ts @@ -1,24 +1,21 @@ // #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; -import { AdminComponent } from './admin/admin.component'; -import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises/manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component'; +import {AdminComponent} from './admin/admin.component'; +import {AdminDashboardComponent} from './admin-dashboard/admin-dashboard.component'; +import {ManageCrisesComponent} from './manage-crises/manage-crises.component'; +import {ManageHeroesComponent} from './manage-heroes/manage-heroes.component'; -import { AdminRoutingModule } from './admin-routing.module'; +import {AdminRoutingModule} from './admin-routing.module'; @NgModule({ - imports: [ - CommonModule, - AdminRoutingModule - ], + imports: [CommonModule, AdminRoutingModule], declarations: [ AdminComponent, AdminDashboardComponent, ManageCrisesComponent, - ManageHeroesComponent - ] + ManageHeroesComponent, + ], }) export class AdminModule {} diff --git a/adev/src/content/examples/router/src/app/admin/admin/admin.component.ts b/adev/src/content/examples/router/src/app/admin/admin/admin.component.ts index beb6b89fcf9..f59b1c835a9 100644 --- a/adev/src/content/examples/router/src/app/admin/admin/admin.component.ts +++ b/adev/src/content/examples/router/src/app/admin/admin/admin.component.ts @@ -1,10 +1,9 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-admin', templateUrl: './admin.component.html', - styleUrls: ['./admin.component.css'] + styleUrls: ['./admin.component.css'], }) -export class AdminComponent { -} +export class AdminComponent {} diff --git a/adev/src/content/examples/router/src/app/admin/manage-crises/manage-crises.component.ts b/adev/src/content/examples/router/src/app/admin/manage-crises/manage-crises.component.ts index c3fe3bb92d0..eed546bbb92 100644 --- a/adev/src/content/examples/router/src/app/admin/manage-crises/manage-crises.component.ts +++ b/adev/src/content/examples/router/src/app/admin/manage-crises/manage-crises.component.ts @@ -1,9 +1,9 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-manage-crises', templateUrl: './manage-crises.component.html', - styleUrls: ['./manage-crises.component.css'] + styleUrls: ['./manage-crises.component.css'], }) -export class ManageCrisesComponent { } +export class ManageCrisesComponent {} diff --git a/adev/src/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts b/adev/src/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts index 432621f4fd4..7fed830865e 100644 --- a/adev/src/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts +++ b/adev/src/content/examples/router/src/app/admin/manage-heroes/manage-heroes.component.ts @@ -1,9 +1,9 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-manage-heroes', templateUrl: './manage-heroes.component.html', - styleUrls: ['./manage-heroes.component.css'] + styleUrls: ['./manage-heroes.component.css'], }) -export class ManageHeroesComponent { } +export class ManageHeroesComponent {} diff --git a/adev/src/content/examples/router/src/app/animations.ts b/adev/src/content/examples/router/src/app/animations.ts index c1cf63f75da..35c068e420c 100644 --- a/adev/src/content/examples/router/src/app/animations.ts +++ b/adev/src/content/examples/router/src/app/animations.ts @@ -1,35 +1,24 @@ // #docregion -import { - trigger, animateChild, group, - transition, animate, style, query -} from '@angular/animations'; - +import {trigger, animateChild, group, transition, animate, style, query} from '@angular/animations'; // Routable animations -export const slideInAnimation = - trigger('routeAnimation', [ - transition('heroes <=> hero', [ - style({ position: 'relative' }), - query(':enter, :leave', [ - style({ - position: 'absolute', - top: 0, - left: 0, - width: '100%' - }) - ]), - query(':enter', [ - style({ left: '-100%'}) - ]), - query(':leave', animateChild()), - group([ - query(':leave', [ - animate('300ms ease-out', style({ left: '100%'})) - ]), - query(':enter', [ - animate('300ms ease-out', style({ left: '0%'})) - ]) - ]), - query(':enter', animateChild()), - ]) - ]); +export const slideInAnimation = trigger('routeAnimation', [ + transition('heroes <=> hero', [ + style({position: 'relative'}), + query(':enter, :leave', [ + style({ + position: 'absolute', + top: 0, + left: 0, + width: '100%', + }), + ]), + query(':enter', [style({left: '-100%'})]), + query(':leave', animateChild()), + group([ + query(':leave', [animate('300ms ease-out', style({left: '100%'}))]), + query(':enter', [animate('300ms ease-out', style({left: '0%'}))]), + ]), + query(':enter', animateChild()), + ]), +]); diff --git a/adev/src/content/examples/router/src/app/app-routing.module.1.ts b/adev/src/content/examples/router/src/app/app-routing.module.1.ts index d568b27de97..6640b785d0c 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.1.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.1.ts @@ -1,17 +1,17 @@ // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { HeroListComponent } from './hero-list/hero-list.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {HeroListComponent} from './hero-list/hero-list.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; // #docregion appRoutes const appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisListComponent }, - { path: 'heroes', component: HeroListComponent }, - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } + {path: 'crisis-center', component: CrisisListComponent}, + {path: 'heroes', component: HeroListComponent}, + {path: '', redirectTo: '/heroes', pathMatch: 'full'}, + {path: '**', component: PageNotFoundComponent}, ]; // #enddocregion appRoutes @@ -19,11 +19,9 @@ const appRoutes: Routes = [ imports: [ RouterModule.forRoot( appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) + {enableTracing: true}, // <-- debugging purposes only + ), ], - exports: [ - RouterModule - ] + exports: [RouterModule], }) export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.10.ts b/adev/src/content/examples/router/src/app/app-routing.module.10.ts index f908153264c..a30bfc8517c 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.10.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.10.ts @@ -1,30 +1,24 @@ // #docplaster import {Injectable, NgModule} from '@angular/core'; import {Title} from '@angular/platform-browser'; -import { - ResolveFn, - RouterModule, - RouterStateSnapshot, - Routes, - TitleStrategy, -} from '@angular/router'; // CLI imports router +import {ResolveFn, RouterModule, RouterStateSnapshot, Routes, TitleStrategy} from '@angular/router'; // CLI imports router // #docregion page-title const routes: Routes = [ { path: 'first-component', title: 'First component', - component: FirstComponent, // this is the component with the in the template + component: FirstComponent, // this is the component with the in the template children: [ { - path: 'child-a', // child route path + path: 'child-a', // child route path title: resolvedChildATitle, - component: ChildAComponent, // child route component that the router renders + component: ChildAComponent, // child route component that the router renders }, { path: 'child-b', title: 'child b', - component: ChildBComponent, // another child route component that the router renders + component: ChildBComponent, // another child route component that the router renders }, ], }, @@ -33,7 +27,6 @@ const routes: Routes = [ const resolvedChildATitle: ResolveFn = () => Promise.resolve('child a'); // #enddocregion page-title - // #docregion custom-page-title @Injectable({providedIn: 'root'}) export class TemplatePageTitleStrategy extends TitleStrategy { @@ -52,10 +45,7 @@ export class TemplatePageTitleStrategy extends TitleStrategy { @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], - providers: [ - {provide: TitleStrategy, useClass: TemplatePageTitleStrategy}, - ] + providers: [{provide: TitleStrategy, useClass: TemplatePageTitleStrategy}], }) -export class AppRoutingModule { -} +export class AppRoutingModule {} // #enddocregion custom-page-title diff --git a/adev/src/content/examples/router/src/app/app-routing.module.11.ts b/adev/src/content/examples/router/src/app/app-routing.module.11.ts index b25d4aaf8ed..6db507a863e 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.11.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.11.ts @@ -6,27 +6,25 @@ import {ComposeMessageComponent} from './compose-message/compose-message.compone import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; const appRoutes: Routes = [ - {path: 'compose', component: ComposeMessageComponent, outlet: 'popup'}, { + {path: 'compose', component: ComposeMessageComponent, outlet: 'popup'}, + { path: 'admin', - loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), - canMatch: [authGuard] + loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule), + canMatch: [authGuard], }, { path: 'crisis-center', loadChildren: () => - import('./crisis-center/crisis-center.module').then(m => m.CrisisCenterModule), - data: {preload: true} + import('./crisis-center/crisis-center.module').then((m) => m.CrisisCenterModule), + data: {preload: true}, }, {path: '', redirectTo: '/superheroes', pathMatch: 'full'}, - {path: '**', component: PageNotFoundComponent} + {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ // #docregion withComponentInputBinding - providers: [ - provideRouter(appRoutes, withComponentInputBinding()), - ] + providers: [provideRouter(appRoutes, withComponentInputBinding())], // #enddocregion withComponentInputBinding }) -export class AppRoutingModule { -} +export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.2.ts b/adev/src/content/examples/router/src/app/app-routing.module.2.ts index c232c11091e..e3856e22df2 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.2.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.2.ts @@ -1,33 +1,31 @@ // #docregion // #docregion milestone3 -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; // #enddocregion milestone3 // import { HeroListComponent } from './hero-list/hero-list.component'; // <-- delete this line // #docregion milestone3 -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; const appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisListComponent }, -// #enddocregion milestone3 + {path: 'crisis-center', component: CrisisListComponent}, + // #enddocregion milestone3 // { path: 'heroes', component: HeroListComponent }, // <-- delete this line -// #docregion milestone3 - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } + // #docregion milestone3 + {path: '', redirectTo: '/heroes', pathMatch: 'full'}, + {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) + {enableTracing: true}, // <-- debugging purposes only + ), ], - exports: [ - RouterModule - ] + exports: [RouterModule], }) export class AppRoutingModule {} // #enddocregion milestone3 diff --git a/adev/src/content/examples/router/src/app/app-routing.module.3.ts b/adev/src/content/examples/router/src/app/app-routing.module.3.ts index 5d7c74e9215..2d72c6a0c8c 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.3.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.3.ts @@ -1,36 +1,34 @@ // #docplaster // #docregion , v3 -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; // #enddocregion v3 -import { ComposeMessageComponent } from './compose-message/compose-message.component'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; // #docregion v3 -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; const appRoutes: Routes = [ -// #enddocregion v3 -// #docregion compose + // #enddocregion v3 + // #docregion compose { path: 'compose', component: ComposeMessageComponent, - outlet: 'popup' + outlet: 'popup', }, -// #enddocregion compose -// #docregion v3 - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } + // #enddocregion compose + // #docregion v3 + {path: '', redirectTo: '/heroes', pathMatch: 'full'}, + {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) + {enableTracing: true}, // <-- debugging purposes only + ), ], - exports: [ - RouterModule - ] + exports: [RouterModule], }) export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.4.ts b/adev/src/content/examples/router/src/app/app-routing.module.4.ts index 892a70fec47..80fed6a5935 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.4.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.4.ts @@ -1,30 +1,28 @@ // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { ComposeMessageComponent } from './compose-message/compose-message.component'; -import { CanDeactivateGuard } from './can-deactivate.guard'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; +import {CanDeactivateGuard} from './can-deactivate.guard'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; const appRoutes: Routes = [ { path: 'compose', component: ComposeMessageComponent, - outlet: 'popup' + outlet: 'popup', }, - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } + {path: '', redirectTo: '/heroes', pathMatch: 'full'}, + {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) + {enableTracing: true}, // <-- debugging purposes only + ), ], - exports: [ - RouterModule - ] + exports: [RouterModule], }) export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.5.ts b/adev/src/content/examples/router/src/app/app-routing.module.5.ts index 1c431de2254..1e8d81c9ac6 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.5.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.5.ts @@ -1,42 +1,39 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { ComposeMessageComponent } from './compose-message/compose-message.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; - -import { authGuard } from './auth/auth.guard'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; +import {authGuard} from './auth/auth.guard'; const appRoutes: Routes = [ { path: 'compose', component: ComposeMessageComponent, - outlet: 'popup' + outlet: 'popup', }, -// #docregion admin, admin-1 + // #docregion admin, admin-1 { path: 'admin', - loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), -// #enddocregion admin-1 - canMatch: [authGuard] -// #docregion admin-1 + loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule), + // #enddocregion admin-1 + canMatch: [authGuard], + // #docregion admin-1 }, -// #enddocregion admin, admin-1 - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } + // #enddocregion admin, admin-1 + {path: '', redirectTo: '/heroes', pathMatch: 'full'}, + {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) + {enableTracing: true}, // <-- debugging purposes only + ), ], - exports: [ - RouterModule - ] + exports: [RouterModule], }) export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.6.ts b/adev/src/content/examples/router/src/app/app-routing.module.6.ts index 0fb020f4f98..b8a383e32ce 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.6.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.6.ts @@ -1,35 +1,37 @@ // #docplaster // #docregion, preload-v1 -import { NgModule } from '@angular/core'; +import {NgModule} from '@angular/core'; import { - RouterModule, Routes, -// #enddocregion preload-v1 - PreloadAllModules -// #docregion preload-v1 + RouterModule, + Routes, + // #enddocregion preload-v1 + PreloadAllModules, + // #docregion preload-v1 } from '@angular/router'; -import { ComposeMessageComponent } from './compose-message/compose-message.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; -import { authGuard } from './auth/auth.guard'; +import {authGuard} from './auth/auth.guard'; const appRoutes: Routes = [ { path: 'compose', component: ComposeMessageComponent, - outlet: 'popup' + outlet: 'popup', }, { path: 'admin', - loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), - canMatch: [authGuard] + loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule), + canMatch: [authGuard], }, { path: 'crisis-center', - loadChildren: () => import('./crisis-center/crisis-center.module').then(m => m.CrisisCenterModule) + loadChildren: () => + import('./crisis-center/crisis-center.module').then((m) => m.CrisisCenterModule), }, - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } + {path: '', redirectTo: '/heroes', pathMatch: 'full'}, + {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ @@ -40,14 +42,12 @@ const appRoutes: Routes = [ // #enddocregion preload-v1 { enableTracing: true, // <-- debugging purposes only - preloadingStrategy: PreloadAllModules - } + preloadingStrategy: PreloadAllModules, + }, // #docregion preload-v1 - ) + ), // #enddocregion forRoot ], - exports: [ - RouterModule - ] + exports: [RouterModule], }) export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.7.ts b/adev/src/content/examples/router/src/app/app-routing.module.7.ts index f64ff718293..6e67de845b9 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.7.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.7.ts @@ -1,11 +1,11 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; // CLI imports router +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; // CLI imports router const routes: Routes = []; // sets up routes constant where you define your routes // configures NgModule imports and exports @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.8.ts b/adev/src/content/examples/router/src/app/app-routing.module.8.ts index f5334003f53..5cfc2c020fa 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.8.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.8.ts @@ -1,24 +1,21 @@ // #docplaster -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; // CLI imports router +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; // CLI imports router // #docregion routes, routes-with-wildcard, redirect const routes: Routes = [ - { path: 'first-component', component: FirstComponent }, - { path: 'second-component', component: SecondComponent }, + {path: 'first-component', component: FirstComponent}, + {path: 'second-component', component: SecondComponent}, // #enddocregion routes, routes-with-wildcard - { path: '', redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component` + {path: '', redirectTo: '/first-component', pathMatch: 'full'}, // redirect to `first-component` // #docregion routes-with-wildcard - { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page + {path: '**', component: PageNotFoundComponent}, // Wildcard route for a 404 page // #docregion routes ]; // #enddocregion routes, routes-with-wildcard, redirect - @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } - - +export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.9.ts b/adev/src/content/examples/router/src/app/app-routing.module.9.ts index a0b28981cab..37a7106e59a 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.9.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.9.ts @@ -1,6 +1,6 @@ // #docplaster -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; // CLI imports router +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; // CLI imports router // #docregion child-routes const routes: Routes = [ @@ -21,11 +21,8 @@ const routes: Routes = [ ]; // #enddocregion child-routes - @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } - - +export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app-routing.module.ts b/adev/src/content/examples/router/src/app/app-routing.module.ts index db567ecf8ee..b50dae98f6a 100644 --- a/adev/src/content/examples/router/src/app/app-routing.module.ts +++ b/adev/src/content/examples/router/src/app/app-routing.module.ts @@ -1,48 +1,44 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { ComposeMessageComponent } from './compose-message/compose-message.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; -import { authGuard } from './auth/auth.guard'; -import { SelectivePreloadingStrategyService } from './selective-preloading-strategy.service'; +import {authGuard} from './auth/auth.guard'; +import {SelectivePreloadingStrategyService} from './selective-preloading-strategy.service'; const appRoutes: Routes = [ { path: 'compose', component: ComposeMessageComponent, - outlet: 'popup' + outlet: 'popup', }, { path: 'admin', - loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), - canMatch: [authGuard] + loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule), + canMatch: [authGuard], }, // #docregion preload-v2 { path: 'crisis-center', - loadChildren: () => import('./crisis-center/crisis-center.module').then(m => m.CrisisCenterModule), - data: { preload: true } + loadChildren: () => + import('./crisis-center/crisis-center.module').then((m) => m.CrisisCenterModule), + data: {preload: true}, }, // #enddocregion preload-v2 - { path: '', redirectTo: '/superheroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } + {path: '', redirectTo: '/superheroes', pathMatch: 'full'}, + {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ imports: [ - RouterModule.forRoot( - appRoutes, - { - enableTracing: false, // <-- debugging purposes only - preloadingStrategy: SelectivePreloadingStrategyService, - } - ) + RouterModule.forRoot(appRoutes, { + enableTracing: false, // <-- debugging purposes only + preloadingStrategy: SelectivePreloadingStrategyService, + }), ], - exports: [ - RouterModule - ] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/app.component.1.ts b/adev/src/content/examples/router/src/app/app.component.1.ts index 68dc1146612..c612b2d3e52 100644 --- a/adev/src/content/examples/router/src/app/app.component.1.ts +++ b/adev/src/content/examples/router/src/app/app.component.1.ts @@ -1,9 +1,9 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', - styleUrls: ['app.component.css'] + styleUrls: ['app.component.css'], }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/router/src/app/app.component.2.ts b/adev/src/content/examples/router/src/app/app.component.2.ts index 8e0a63362d9..5ab9026fb96 100644 --- a/adev/src/content/examples/router/src/app/app.component.2.ts +++ b/adev/src/content/examples/router/src/app/app.component.2.ts @@ -1,15 +1,15 @@ /* Second Heroes version */ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion animation-imports -import { ChildrenOutletContexts } from '@angular/router'; -import { slideInAnimation } from './animations'; +import {ChildrenOutletContexts} from '@angular/router'; +import {slideInAnimation} from './animations'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], - animations: [ slideInAnimation ] + animations: [slideInAnimation], }) // #enddocregion animation-imports // #docregion function-binding @@ -17,7 +17,7 @@ export class AppComponent { constructor(private contexts: ChildrenOutletContexts) {} getAnimationData() { - return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation']; + return this.contexts.getContext('primary')?.route?.snapshot?.data?.['animation']; } } // #enddocregion function-binding diff --git a/adev/src/content/examples/router/src/app/app.component.3.ts b/adev/src/content/examples/router/src/app/app.component.3.ts index 92d3501202c..8bb50071b47 100644 --- a/adev/src/content/examples/router/src/app/app.component.3.ts +++ b/adev/src/content/examples/router/src/app/app.component.3.ts @@ -1,6 +1,6 @@ // #docplaster -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; +import {Component} from '@angular/core'; +import {Router} from '@angular/router'; @Component({ selector: 'app-root', @@ -28,7 +28,7 @@ import { Router } from '@angular/router'; Crisis Center // #enddocregion cc-query-params */ -// #docregion template + // #docregion template template: `

    Angular Router

    - ` -// #enddocregion template + `, + // #enddocregion template }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/router/src/app/app.component.4.ts b/adev/src/content/examples/router/src/app/app.component.4.ts index 4b47a4c66f6..d195543971c 100644 --- a/adev/src/content/examples/router/src/app/app.component.4.ts +++ b/adev/src/content/examples/router/src/app/app.component.4.ts @@ -1,15 +1,14 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', - styleUrls: ['app.component.css'] + styleUrls: ['app.component.css'], }) export class AppComponent { -// #docregion relative-to + // #docregion relative-to goToItems() { - this.router.navigate(['items'], { relativeTo: this.route }); + this.router.navigate(['items'], {relativeTo: this.route}); } -// #enddocregion relative-to - + // #enddocregion relative-to } diff --git a/adev/src/content/examples/router/src/app/app.component.ts b/adev/src/content/examples/router/src/app/app.component.ts index 58f6c90c664..0a015c059cc 100644 --- a/adev/src/content/examples/router/src/app/app.component.ts +++ b/adev/src/content/examples/router/src/app/app.component.ts @@ -1,14 +1,14 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; -import { ChildrenOutletContexts } from '@angular/router'; -import { slideInAnimation } from './animations'; +import {Component} from '@angular/core'; +import {ChildrenOutletContexts} from '@angular/router'; +import {slideInAnimation} from './animations'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], - animations: [ slideInAnimation ] + animations: [slideInAnimation], }) export class AppComponent { constructor(private contexts: ChildrenOutletContexts) {} diff --git a/adev/src/content/examples/router/src/app/app.module.0.ts b/adev/src/content/examples/router/src/app/app.module.0.ts index df5b74c6d7f..a814ba49ed5 100644 --- a/adev/src/content/examples/router/src/app/app.module.0.ts +++ b/adev/src/content/examples/router/src/app/app.module.0.ts @@ -1,39 +1,36 @@ // NEVER USED. For docs only. Should compile though // #docplaster -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { HeroListComponent } from './hero-list/hero-list.component'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -import { PageNotFoundComponent as HeroDetailComponent } from './page-not-found/page-not-found.component'; +import {HeroListComponent} from './hero-list/hero-list.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; +import {PageNotFoundComponent as HeroDetailComponent} from './page-not-found/page-not-found.component'; // #docregion const appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisListComponent }, - { path: 'hero/:id', component: HeroDetailComponent }, + {path: 'crisis-center', component: CrisisListComponent}, + {path: 'hero/:id', component: HeroDetailComponent}, { path: 'heroes', component: HeroListComponent, - data: { title: 'Heroes List' } + data: {title: 'Heroes List'}, }, - { path: '', - redirectTo: '/heroes', - pathMatch: 'full' - }, - { path: '**', component: PageNotFoundComponent } + {path: '', redirectTo: '/heroes', pathMatch: 'full'}, + {path: '**', component: PageNotFoundComponent}, ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) + {enableTracing: true}, // <-- debugging purposes only + ), // other imports here ], -// #enddocregion -/* + // #enddocregion + /* // #docregion ... }) @@ -41,4 +38,4 @@ export class AppModule { } // #enddocregion */ }) -export class AppModule0 { } +export class AppModule0 {} diff --git a/adev/src/content/examples/router/src/app/app.module.1.ts b/adev/src/content/examples/router/src/app/app.module.1.ts index 16febf37ad1..5a4c46d4a7e 100644 --- a/adev/src/content/examples/router/src/app/app.module.1.ts +++ b/adev/src/content/examples/router/src/app/app.module.1.ts @@ -21,25 +21,28 @@ const appRoutes: Routes = [ {path: '', redirectTo: '/heroes', pathMatch: 'full'}, // #docregion wildcard - {path: '**', component: PageNotFoundComponent} // #enddocregion wildcard - // #docregion first-config + {path: '**', component: PageNotFoundComponent}, // #enddocregion wildcard + // #docregion first-config ]; @NgModule({ imports: [ - BrowserModule, FormsModule, + BrowserModule, + FormsModule, RouterModule.forRoot( - appRoutes, {enableTracing: true} // <-- debugging purposes only - ) + appRoutes, + {enableTracing: true}, // <-- debugging purposes only + ), ], declarations: [ - AppComponent, HeroListComponent, CrisisListComponent, + AppComponent, + HeroListComponent, + CrisisListComponent, // #enddocregion first-config - PageNotFoundComponent + PageNotFoundComponent, // #docregion first-config ], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { -} +export class AppModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/app.module.2.ts b/adev/src/content/examples/router/src/app/app.module.2.ts index ebdebe57dfd..4a529679e6b 100644 --- a/adev/src/content/examples/router/src/app/app.module.2.ts +++ b/adev/src/content/examples/router/src/app/app.module.2.ts @@ -1,26 +1,17 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; +import {AppComponent} from './app.component'; +import {AppRoutingModule} from './app-routing.module'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { HeroListComponent } from './hero-list/hero-list.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {HeroListComponent} from './hero-list/hero-list.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; @NgModule({ - imports: [ - BrowserModule, - FormsModule, - AppRoutingModule - ], - declarations: [ - AppComponent, - HeroListComponent, - CrisisListComponent, - PageNotFoundComponent - ], - bootstrap: [ AppComponent ] + imports: [BrowserModule, FormsModule, AppRoutingModule], + declarations: [AppComponent, HeroListComponent, CrisisListComponent, PageNotFoundComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/router/src/app/app.module.3.ts b/adev/src/content/examples/router/src/app/app.module.3.ts index 5ead6a2028d..2bb3f1bb141 100644 --- a/adev/src/content/examples/router/src/app/app.module.3.ts +++ b/adev/src/content/examples/router/src/app/app.module.3.ts @@ -1,41 +1,37 @@ // #docplaster // #docregion // #docregion remove-heroes -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; // #enddocregion remove-heroes -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // #docregion remove-heroes -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; -import { HeroesModule } from './heroes/heroes.module'; +import {AppComponent} from './app.component'; +import {AppRoutingModule} from './app-routing.module'; +import {HeroesModule} from './heroes/heroes.module'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; @NgModule({ -// #docregion module-imports + // #docregion module-imports imports: [ BrowserModule, -// #enddocregion module-imports -// #enddocregion remove-heroes + // #enddocregion module-imports + // #enddocregion remove-heroes BrowserAnimationsModule, -// #docregion remove-heroes -// #docregion module-imports + // #docregion remove-heroes + // #docregion module-imports FormsModule, HeroesModule, - AppRoutingModule + AppRoutingModule, ], -// #enddocregion module-imports - declarations: [ - AppComponent, - CrisisListComponent, - PageNotFoundComponent - ], - bootstrap: [ AppComponent ] + // #enddocregion module-imports + declarations: [AppComponent, CrisisListComponent, PageNotFoundComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} // #enddocregion remove-heroes // #enddocregion diff --git a/adev/src/content/examples/router/src/app/app.module.4.ts b/adev/src/content/examples/router/src/app/app.module.4.ts index ae0fe928220..4dc6c547da8 100644 --- a/adev/src/content/examples/router/src/app/app.module.4.ts +++ b/adev/src/content/examples/router/src/app/app.module.4.ts @@ -1,20 +1,20 @@ // #docplaster // #docregion // #docregion crisis-center-module, admin-module -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { AppComponent } from './app.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -import { ComposeMessageComponent } from './compose-message/compose-message.component'; +import {AppComponent} from './app.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; -import { AppRoutingModule } from './app-routing.module'; -import { HeroesModule } from './heroes/heroes.module'; -import { CrisisCenterModule } from './crisis-center/crisis-center.module'; +import {AppRoutingModule} from './app-routing.module'; +import {HeroesModule} from './heroes/heroes.module'; +import {CrisisCenterModule} from './crisis-center/crisis-center.module'; // #enddocregion crisis-center-module -import { AdminModule } from './admin/admin.module'; +import {AdminModule} from './admin/admin.module'; // #docregion crisis-center-module @NgModule({ @@ -23,19 +23,19 @@ import { AdminModule } from './admin/admin.module'; FormsModule, HeroesModule, CrisisCenterModule, -// #enddocregion crisis-center-module + // #enddocregion crisis-center-module AdminModule, -// #docregion crisis-center-module - AppRoutingModule + // #docregion crisis-center-module + AppRoutingModule, ], declarations: [ AppComponent, -// #enddocregion crisis-center-module + // #enddocregion crisis-center-module ComposeMessageComponent, -// #docregion crisis-center-module - PageNotFoundComponent + // #docregion crisis-center-module + PageNotFoundComponent, ], - bootstrap: [ AppComponent ] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/app.module.5.ts b/adev/src/content/examples/router/src/app/app.module.5.ts index 46d3781abfc..dc9d82c3220 100644 --- a/adev/src/content/examples/router/src/app/app.module.5.ts +++ b/adev/src/content/examples/router/src/app/app.module.5.ts @@ -1,19 +1,19 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; +import {AppComponent} from './app.component'; +import {AppRoutingModule} from './app-routing.module'; -import { HeroesModule } from './heroes/heroes.module'; -import { CrisisCenterModule } from './crisis-center/crisis-center.module'; +import {HeroesModule} from './heroes/heroes.module'; +import {CrisisCenterModule} from './crisis-center/crisis-center.module'; -import { ComposeMessageComponent } from './compose-message/compose-message.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; -import { AdminModule } from './admin/admin.module'; +import {AdminModule} from './admin/admin.module'; @NgModule({ imports: [ @@ -22,13 +22,9 @@ import { AdminModule } from './admin/admin.module'; HeroesModule, CrisisCenterModule, AdminModule, - AppRoutingModule + AppRoutingModule, ], - declarations: [ - AppComponent, - ComposeMessageComponent, - PageNotFoundComponent - ], - bootstrap: [ AppComponent ] + declarations: [AppComponent, ComposeMessageComponent, PageNotFoundComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/router/src/app/app.module.6.ts b/adev/src/content/examples/router/src/app/app.module.6.ts index f8dd92b2387..fd80e1100d2 100644 --- a/adev/src/content/examples/router/src/app/app.module.6.ts +++ b/adev/src/content/examples/router/src/app/app.module.6.ts @@ -1,29 +1,22 @@ // #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { Routes, RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; +import {Routes, RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import {AppComponent} from './app.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; -const routes: Routes = [ - -]; +const routes: Routes = []; @NgModule({ imports: [ BrowserModule, FormsModule, - RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/ + RouterModule.forRoot(routes, {useHash: true}), // .../#/crisis-center/ ], - declarations: [ - AppComponent, - PageNotFoundComponent - ], - providers: [ - - ], - bootstrap: [ AppComponent ] + declarations: [AppComponent, PageNotFoundComponent], + providers: [], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/router/src/app/app.module.7.ts b/adev/src/content/examples/router/src/app/app.module.7.ts index 51a5e8446ce..e7bdcdbc2fc 100644 --- a/adev/src/content/examples/router/src/app/app.module.7.ts +++ b/adev/src/content/examples/router/src/app/app.module.7.ts @@ -1,17 +1,17 @@ // #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { Router } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; +import {Router} from '@angular/router'; -import { AppComponent } from './app.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -import { ComposeMessageComponent } from './compose-message/compose-message.component'; +import {AppComponent} from './app.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; -import { AppRoutingModule } from './app-routing.module'; -import { HeroesModule } from './heroes/heroes.module'; -import { CrisisCenterModule } from './crisis-center/crisis-center.module'; -import { AuthModule } from './auth/auth.module'; +import {AppRoutingModule} from './app-routing.module'; +import {HeroesModule} from './heroes/heroes.module'; +import {CrisisCenterModule} from './crisis-center/crisis-center.module'; +import {AuthModule} from './auth/auth.module'; @NgModule({ imports: [ @@ -20,21 +20,17 @@ import { AuthModule } from './auth/auth.module'; HeroesModule, CrisisCenterModule, AuthModule, - AppRoutingModule + AppRoutingModule, ], - declarations: [ - AppComponent, - ComposeMessageComponent, - PageNotFoundComponent - ], - bootstrap: [ AppComponent ] + declarations: [AppComponent, ComposeMessageComponent, PageNotFoundComponent], + bootstrap: [AppComponent], }) // #docregion inspect-config export class AppModule { // Diagnostic only: inspect router configuration constructor(router: Router) { // Use a custom replacer to display function names in the route configs - const replacer = (key, value) => (typeof value === 'function') ? value.name : value; + const replacer = (key, value) => (typeof value === 'function' ? value.name : value); console.log('Routes: ', JSON.stringify(router.config, replacer, 2)); } diff --git a/adev/src/content/examples/router/src/app/app.module.8.ts b/adev/src/content/examples/router/src/app/app.module.8.ts index 3f0b1c0c0bf..22e79fc69e4 100644 --- a/adev/src/content/examples/router/src/app/app.module.8.ts +++ b/adev/src/content/examples/router/src/app/app.module.8.ts @@ -1,17 +1,15 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule -import { AppComponent } from './app.component'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {AppRoutingModule} from './app-routing.module'; // CLI imports AppRoutingModule +import {AppComponent} from './app.component'; @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserModule, - AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array + AppRoutingModule, // CLI adds AppRoutingModule to the AppModule's imports array ], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/router/src/app/app.module.ts b/adev/src/content/examples/router/src/app/app.module.ts index 2f5fb97be3b..30c3f36f2ad 100644 --- a/adev/src/content/examples/router/src/app/app.module.ts +++ b/adev/src/content/examples/router/src/app/app.module.ts @@ -1,22 +1,22 @@ // #docplaster // #docregion auth, preload -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; // #docregion animations-module -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // #enddocregion auth, animations-module -import { Router } from '@angular/router'; +import {Router} from '@angular/router'; // #docregion auth -import { AppComponent } from './app.component'; -import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -import { ComposeMessageComponent } from './compose-message/compose-message.component'; +import {AppComponent} from './app.component'; +import {PageNotFoundComponent} from './page-not-found/page-not-found.component'; +import {ComposeMessageComponent} from './compose-message/compose-message.component'; -import { AppRoutingModule } from './app-routing.module'; -import { HeroesModule } from './heroes/heroes.module'; -import { AuthModule } from './auth/auth.module'; +import {AppRoutingModule} from './app-routing.module'; +import {HeroesModule} from './heroes/heroes.module'; +import {AuthModule} from './auth/auth.module'; // #docregion animations-module @NgModule({ @@ -33,24 +33,19 @@ import { AuthModule } from './auth/auth.module'; // #docregion animations-module ], // #enddocregion animations-module - declarations: [ - AppComponent, - ComposeMessageComponent, - PageNotFoundComponent - ], - bootstrap: [ AppComponent ] -// #docregion animations-module + declarations: [AppComponent, ComposeMessageComponent, PageNotFoundComponent], + bootstrap: [AppComponent], + // #docregion animations-module }) // #enddocregion animations-module export class AppModule { -// #enddocregion preload, auth + // #enddocregion preload, auth // Diagnostic only: inspect router configuration constructor(router: Router) { // Use a custom replacer to display function names in the route configs // const replacer = (key, value) => (typeof value === 'function') ? value.name : value; - // console.log('Routes: ', JSON.stringify(router.config, replacer, 2)); } -// #docregion preload, auth + // #docregion preload, auth } // #enddocregion preload, auth diff --git a/adev/src/content/examples/router/src/app/auth/auth-routing.module.ts b/adev/src/content/examples/router/src/app/auth/auth-routing.module.ts index 009d4803f22..d7d960da514 100644 --- a/adev/src/content/examples/router/src/app/auth/auth-routing.module.ts +++ b/adev/src/content/examples/router/src/app/auth/auth-routing.module.ts @@ -1,20 +1,14 @@ // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { authGuard } from './auth.guard'; -import { AuthService } from './auth.service'; -import { LoginComponent } from './login/login.component'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; +import {authGuard} from './auth.guard'; +import {AuthService} from './auth.service'; +import {LoginComponent} from './login/login.component'; -const authRoutes: Routes = [ - { path: 'login', component: LoginComponent } -]; +const authRoutes: Routes = [{path: 'login', component: LoginComponent}]; @NgModule({ - imports: [ - RouterModule.forChild(authRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(authRoutes)], + exports: [RouterModule], }) export class AuthRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/auth/auth.guard.2.ts b/adev/src/content/examples/router/src/app/auth/auth.guard.2.ts index eaad8940d28..124a66f4e38 100644 --- a/adev/src/content/examples/router/src/app/auth/auth.guard.2.ts +++ b/adev/src/content/examples/router/src/app/auth/auth.guard.2.ts @@ -1,6 +1,6 @@ // #docregion import {inject} from '@angular/core'; -import { Router } from '@angular/router'; +import {Router} from '@angular/router'; import {AuthService} from './auth.service'; diff --git a/adev/src/content/examples/router/src/app/auth/auth.guard.3.ts b/adev/src/content/examples/router/src/app/auth/auth.guard.3.ts index b18cc3f9639..981738d3d85 100644 --- a/adev/src/content/examples/router/src/app/auth/auth.guard.3.ts +++ b/adev/src/content/examples/router/src/app/auth/auth.guard.3.ts @@ -1,6 +1,6 @@ -import { inject } from '@angular/core'; -import { Router } from '@angular/router'; -import { AuthService } from './auth.service'; +import {inject} from '@angular/core'; +import {Router} from '@angular/router'; +import {AuthService} from './auth.service'; export const authGuard = () => { const authService = inject(AuthService); diff --git a/adev/src/content/examples/router/src/app/auth/auth.guard.4.ts b/adev/src/content/examples/router/src/app/auth/auth.guard.4.ts index ae36ede5e85..6ad729821bd 100644 --- a/adev/src/content/examples/router/src/app/auth/auth.guard.4.ts +++ b/adev/src/content/examples/router/src/app/auth/auth.guard.4.ts @@ -1,8 +1,8 @@ // #docplaster // #docregion -import { inject } from '@angular/core'; -import { Router, NavigationExtras } from '@angular/router'; -import { AuthService } from './auth.service'; +import {inject} from '@angular/core'; +import {Router, NavigationExtras} from '@angular/router'; +import {AuthService} from './auth.service'; export const authGuard = () => { const authService = inject(AuthService); @@ -18,11 +18,10 @@ export const authGuard = () => { // Set our navigation extras object // that contains our global query params and fragment const navigationExtras: NavigationExtras = { - queryParams: { session_id: sessionId }, - fragment: 'anchor' + queryParams: {session_id: sessionId}, + fragment: 'anchor', }; // Redirect to the login page with extras return router.createUrlTree(['/login'], navigationExtras); }; - diff --git a/adev/src/content/examples/router/src/app/auth/auth.guard.ts b/adev/src/content/examples/router/src/app/auth/auth.guard.ts index 929a85672d3..6e0bc6dfd1e 100644 --- a/adev/src/content/examples/router/src/app/auth/auth.guard.ts +++ b/adev/src/content/examples/router/src/app/auth/auth.guard.ts @@ -1,10 +1,7 @@ // #docplaster -import { inject } from '@angular/core'; -import { - Router, - NavigationExtras, -} from '@angular/router'; -import { AuthService } from './auth.service'; +import {inject} from '@angular/core'; +import {Router, NavigationExtras} from '@angular/router'; +import {AuthService} from './auth.service'; export const authGuard = () => { const router = inject(Router); @@ -20,8 +17,8 @@ export const authGuard = () => { // Set our navigation extras object // that contains our global query params and fragment const navigationExtras: NavigationExtras = { - queryParams: { session_id: sessionId }, - fragment: 'anchor' + queryParams: {session_id: sessionId}, + fragment: 'anchor', }; // Navigate to the login page with extras diff --git a/adev/src/content/examples/router/src/app/auth/auth.module.ts b/adev/src/content/examples/router/src/app/auth/auth.module.ts index ea37f28339c..b1ca22a44e4 100644 --- a/adev/src/content/examples/router/src/app/auth/auth.module.ts +++ b/adev/src/content/examples/router/src/app/auth/auth.module.ts @@ -1,18 +1,12 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { LoginComponent } from './login/login.component'; -import { AuthRoutingModule } from './auth-routing.module'; +import {LoginComponent} from './login/login.component'; +import {AuthRoutingModule} from './auth-routing.module'; @NgModule({ - imports: [ - CommonModule, - FormsModule, - AuthRoutingModule - ], - declarations: [ - LoginComponent - ] + imports: [CommonModule, FormsModule, AuthRoutingModule], + declarations: [LoginComponent], }) export class AuthModule {} diff --git a/adev/src/content/examples/router/src/app/auth/auth.service.ts b/adev/src/content/examples/router/src/app/auth/auth.service.ts index 338f7a19e9f..812cfc1ce26 100644 --- a/adev/src/content/examples/router/src/app/auth/auth.service.ts +++ b/adev/src/content/examples/router/src/app/auth/auth.service.ts @@ -1,8 +1,8 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { tap, delay } from 'rxjs/operators'; +import {Observable, of} from 'rxjs'; +import {tap, delay} from 'rxjs/operators'; @Injectable({ providedIn: 'root', @@ -16,7 +16,7 @@ export class AuthService { login(): Observable { return of(true).pipe( delay(1000), - tap(() => this.isLoggedIn = true) + tap(() => (this.isLoggedIn = true)), ); } diff --git a/adev/src/content/examples/router/src/app/auth/login/login.component.1.ts b/adev/src/content/examples/router/src/app/auth/login/login.component.1.ts index 78218b3b024..fa13cd8022c 100644 --- a/adev/src/content/examples/router/src/app/auth/login/login.component.1.ts +++ b/adev/src/content/examples/router/src/app/auth/login/login.component.1.ts @@ -1,17 +1,20 @@ // #docregion -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; -import { AuthService } from '../auth.service'; +import {Component} from '@angular/core'; +import {Router} from '@angular/router'; +import {AuthService} from '../auth.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', - styleUrls: ['./login.component.css'] + styleUrls: ['./login.component.css'], }) export class LoginComponent { message: string; - constructor(public authService: AuthService, public router: Router) { + constructor( + public authService: AuthService, + public router: Router, + ) { this.message = this.getMessage(); } diff --git a/adev/src/content/examples/router/src/app/auth/login/login.component.ts b/adev/src/content/examples/router/src/app/auth/login/login.component.ts index 67d15a863be..cc34bf2a322 100644 --- a/adev/src/content/examples/router/src/app/auth/login/login.component.ts +++ b/adev/src/content/examples/router/src/app/auth/login/login.component.ts @@ -1,17 +1,20 @@ // #docregion -import { Component } from '@angular/core'; -import { NavigationExtras, Router } from '@angular/router'; -import { AuthService } from '../auth.service'; +import {Component} from '@angular/core'; +import {NavigationExtras, Router} from '@angular/router'; +import {AuthService} from '../auth.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', - styleUrls: ['./login.component.css'] + styleUrls: ['./login.component.css'], }) export class LoginComponent { message: string; - constructor(public authService: AuthService, public router: Router) { + constructor( + public authService: AuthService, + public router: Router, + ) { this.message = this.getMessage(); } @@ -34,7 +37,7 @@ export class LoginComponent { // that passes on our global query params and fragment const navigationExtras: NavigationExtras = { queryParamsHandling: 'preserve', - preserveFragment: true + preserveFragment: true, }; // Redirect the user diff --git a/adev/src/content/examples/router/src/app/can-deactivate.guard.1.ts b/adev/src/content/examples/router/src/app/can-deactivate.guard.1.ts index 98fc3afd6f6..bda85bfa8f3 100644 --- a/adev/src/content/examples/router/src/app/can-deactivate.guard.1.ts +++ b/adev/src/content/examples/router/src/app/can-deactivate.guard.1.ts @@ -1,27 +1,25 @@ // #docregion -import { Observable } from 'rxjs'; -import { CanDeactivateFn, - ActivatedRouteSnapshot, - RouterStateSnapshot } from '@angular/router'; +import {Observable} from 'rxjs'; +import {CanDeactivateFn, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router'; -import { CrisisDetailComponent } from './crisis-center/crisis-detail/crisis-detail.component'; +import {CrisisDetailComponent} from './crisis-center/crisis-detail/crisis-detail.component'; -export const canDeactivateGuard: CanDeactivateFn = ( - component: CrisisDetailComponent, - route: ActivatedRouteSnapshot, - state: RouterStateSnapshot - ): Observable | boolean => { - // Get the Crisis Center ID - console.log(route.paramMap.get('id')); +export const canDeactivateGuard: CanDeactivateFn = ( + component: CrisisDetailComponent, + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot, +): Observable | boolean => { + // Get the Crisis Center ID + console.log(route.paramMap.get('id')); - // Get the current URL - console.log(state.url); + // Get the current URL + console.log(state.url); - // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged - if (!component.crisis || component.crisis.name === component.editName) { - return true; - } - // Otherwise ask the user with the dialog service and return its - // observable which resolves to true or false when the user decides - return component.dialogService.confirm('Discard changes?'); - }; + // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged + if (!component.crisis || component.crisis.name === component.editName) { + return true; + } + // Otherwise ask the user with the dialog service and return its + // observable which resolves to true or false when the user decides + return component.dialogService.confirm('Discard changes?'); +}; diff --git a/adev/src/content/examples/router/src/app/can-deactivate.guard.ts b/adev/src/content/examples/router/src/app/can-deactivate.guard.ts index e4fa9823563..44cd7c3b78d 100644 --- a/adev/src/content/examples/router/src/app/can-deactivate.guard.ts +++ b/adev/src/content/examples/router/src/app/can-deactivate.guard.ts @@ -1,10 +1,11 @@ // #docregion -import { CanDeactivateFn } from '@angular/router'; -import { Observable } from 'rxjs'; +import {CanDeactivateFn} from '@angular/router'; +import {Observable} from 'rxjs'; export interface CanComponentDeactivate { canDeactivate?: () => Observable | Promise | boolean; } -export const canDeactivateGuard: CanDeactivateFn = - (component: CanComponentDeactivate) => component.canDeactivate ? component.canDeactivate() : true; +export const canDeactivateGuard: CanDeactivateFn = ( + component: CanComponentDeactivate, +) => (component.canDeactivate ? component.canDeactivate() : true); diff --git a/adev/src/content/examples/router/src/app/compose-message/compose-message.component.ts b/adev/src/content/examples/router/src/app/compose-message/compose-message.component.ts index b06b57240df..1dccff6746f 100644 --- a/adev/src/content/examples/router/src/app/compose-message/compose-message.component.ts +++ b/adev/src/content/examples/router/src/app/compose-message/compose-message.component.ts @@ -1,18 +1,21 @@ // #docregion -import { Component } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import {Component} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; @Component({ selector: 'app-compose-message', templateUrl: './compose-message.component.html', - styleUrls: ['./compose-message.component.css'] + styleUrls: ['./compose-message.component.css'], }) export class ComposeMessageComponent { details = ''; message = ''; sending = false; - constructor(private router: Router, private route: ActivatedRoute) {} + constructor( + private router: Router, + private route: ActivatedRoute, + ) {} send() { this.sending = true; diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.ts index c2b7cde8140..1de0ea87488 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.ts @@ -1,9 +1,9 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-crisis-center-home', templateUrl: './crisis-center-home.component.html', - styleUrls: ['./crisis-center-home.component.css'] + styleUrls: ['./crisis-center-home.component.css'], }) -export class CrisisCenterHomeComponent { } +export class CrisisCenterHomeComponent {} diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts index 24dc4f7bc24..3f95c482395 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts @@ -1,12 +1,12 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; +import {CrisisCenterHomeComponent} from './crisis-center-home/crisis-center-home.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; +import {CrisisDetailComponent} from './crisis-detail/crisis-detail.component'; // #docregion routes const crisisCenterRoutes: Routes = [ @@ -20,26 +20,22 @@ const crisisCenterRoutes: Routes = [ children: [ { path: ':id', - component: CrisisDetailComponent + component: CrisisDetailComponent, }, { path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } + component: CrisisCenterHomeComponent, + }, + ], + }, + ], + }, ]; // #enddocregion routes @NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(crisisCenterRoutes)], + exports: [RouterModule], }) -export class CrisisCenterRoutingModule { } +export class CrisisCenterRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts index 64c1b5a1168..a3e798fe058 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts @@ -1,14 +1,13 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; - -import { canDeactivateGuard } from '../can-deactivate.guard'; -import { crisisDetailResolver} from './crisis-detail-resolver'; +import {CrisisCenterHomeComponent} from './crisis-center-home/crisis-center-home.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; +import {CrisisDetailComponent} from './crisis-detail/crisis-detail.component'; +import {canDeactivateGuard} from '../can-deactivate.guard'; +import {crisisDetailResolver} from './crisis-detail-resolver'; const crisisCenterRoutes: Routes = [ { @@ -24,25 +23,21 @@ const crisisCenterRoutes: Routes = [ component: CrisisDetailComponent, canDeactivate: [canDeactivateGuard], resolve: { - crisis: crisisDetailResolver - } + crisis: crisisDetailResolver, + }, }, { path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } + component: CrisisCenterHomeComponent, + }, + ], + }, + ], + }, ]; @NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(crisisCenterRoutes)], + exports: [RouterModule], }) -export class CrisisCenterRoutingModule { } +export class CrisisCenterRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts index 23db566f14b..330fe90524f 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts @@ -1,12 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; +import {CrisisCenterHomeComponent} from './crisis-center-home/crisis-center-home.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; +import {CrisisDetailComponent} from './crisis-detail/crisis-detail.component'; -import { canDeactivateGuard } from '../can-deactivate.guard'; +import {canDeactivateGuard} from '../can-deactivate.guard'; const crisisCenterRoutes: Routes = [ { @@ -20,24 +20,20 @@ const crisisCenterRoutes: Routes = [ { path: ':id', component: CrisisDetailComponent, - canDeactivate: [canDeactivateGuard] + canDeactivate: [canDeactivateGuard], }, { path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } + component: CrisisCenterHomeComponent, + }, + ], + }, + ], + }, ]; @NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(crisisCenterRoutes)], + exports: [RouterModule], }) -export class CrisisCenterRoutingModule { } +export class CrisisCenterRoutingModule {} diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts index 8fedaf213c3..659238786a7 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts @@ -1,15 +1,15 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; +import {CrisisCenterHomeComponent} from './crisis-center-home/crisis-center-home.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; +import {CrisisDetailComponent} from './crisis-detail/crisis-detail.component'; -import { canDeactivateGuard } from '../can-deactivate.guard'; -import { crisisDetailResolver } from './crisis-detail-resolver'; +import {canDeactivateGuard} from '../can-deactivate.guard'; +import {crisisDetailResolver} from './crisis-detail-resolver'; const crisisCenterRoutes: Routes = [ { @@ -25,26 +25,22 @@ const crisisCenterRoutes: Routes = [ component: CrisisDetailComponent, canDeactivate: [canDeactivateGuard], resolve: { - crisis: crisisDetailResolver - } + crisis: crisisDetailResolver, + }, }, { path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } + component: CrisisCenterHomeComponent, + }, + ], + }, + ], + }, ]; @NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(crisisCenterRoutes)], + exports: [RouterModule], }) -export class CrisisCenterRoutingModule { } +export class CrisisCenterRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts index aa95c688d58..4012954c594 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts @@ -1,15 +1,15 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; +import {CrisisCenterHomeComponent} from './crisis-center-home/crisis-center-home.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; +import {CrisisDetailComponent} from './crisis-detail/crisis-detail.component'; -import { canDeactivateGuard } from '../can-deactivate.guard'; -import { crisisDetailResolver } from './crisis-detail-resolver'; +import {canDeactivateGuard} from '../can-deactivate.guard'; +import {crisisDetailResolver} from './crisis-detail-resolver'; const crisisCenterRoutes: Routes = [ { @@ -25,26 +25,22 @@ const crisisCenterRoutes: Routes = [ component: CrisisDetailComponent, canDeactivate: [canDeactivateGuard], resolve: { - crisis: crisisDetailResolver - } + crisis: crisisDetailResolver, + }, }, { path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } + component: CrisisCenterHomeComponent, + }, + ], + }, + ], + }, ]; @NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(crisisCenterRoutes)], + exports: [RouterModule], }) -export class CrisisCenterRoutingModule { } +export class CrisisCenterRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-center.module.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-center.module.ts index f14420fe8f3..ec2ce678f89 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-center.module.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-center.module.ts @@ -1,26 +1,22 @@ // #docregion -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { CommonModule } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {CommonModule} from '@angular/common'; -import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list/crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; +import {CrisisCenterHomeComponent} from './crisis-center-home/crisis-center-home.component'; +import {CrisisListComponent} from './crisis-list/crisis-list.component'; +import {CrisisCenterComponent} from './crisis-center/crisis-center.component'; +import {CrisisDetailComponent} from './crisis-detail/crisis-detail.component'; -import { CrisisCenterRoutingModule } from './crisis-center-routing.module'; +import {CrisisCenterRoutingModule} from './crisis-center-routing.module'; @NgModule({ - imports: [ - CommonModule, - FormsModule, - CrisisCenterRoutingModule - ], + imports: [CommonModule, FormsModule, CrisisCenterRoutingModule], declarations: [ CrisisCenterComponent, CrisisListComponent, CrisisCenterHomeComponent, - CrisisDetailComponent - ] + CrisisDetailComponent, + ], }) export class CrisisCenterModule {} diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-center/crisis-center.component.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-center/crisis-center.component.ts index 5359b9d8efb..b18160cc8e9 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-center/crisis-center.component.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-center/crisis-center.component.ts @@ -1,9 +1,9 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-crisis-center', templateUrl: './crisis-center.component.html', - styleUrls: ['./crisis-center.component.css'] + styleUrls: ['./crisis-center.component.css'], }) export class CrisisCenterComponent {} diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-detail-resolver.1.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-detail-resolver.1.ts index 0bbb69cdf75..9d4fe02e319 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-detail-resolver.1.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-detail-resolver.1.ts @@ -1,4 +1,3 @@ // #docregion -export function crisisDetailResolver() { -} +export function crisisDetailResolver() {} diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-detail-resolver.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-detail-resolver.ts index 48a4e6ce32c..cc505380f41 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-detail-resolver.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-detail-resolver.ts @@ -12,12 +12,15 @@ export const crisisDetailResolver: ResolveFn = (route: ActivatedRouteSna const cs = inject(CrisisService); const id = route.paramMap.get('id')!; - return cs.getCrisis(id).pipe(mergeMap(crisis => { - if (crisis) { - return of(crisis); - } else { // id not found - router.navigate(['/crisis-center']); - return EMPTY; - } - })); + return cs.getCrisis(id).pipe( + mergeMap((crisis) => { + if (crisis) { + return of(crisis); + } else { + // id not found + router.navigate(['/crisis-center']); + return EMPTY; + } + }), + ); }; diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts index d0f4a6054f3..233630cff9e 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts @@ -1,16 +1,16 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router, ParamMap } from '@angular/router'; -import { Observable } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute, Router, ParamMap} from '@angular/router'; +import {Observable} from 'rxjs'; +import {switchMap} from 'rxjs/operators'; -import { CrisisService } from '../crisis.service'; -import { Crisis } from '../crisis'; -import { DialogService } from '../../dialog.service'; +import {CrisisService} from '../crisis.service'; +import {Crisis} from '../crisis'; +import {DialogService} from '../../dialog.service'; @Component({ selector: 'app-crisis-detail', templateUrl: './crisis-detail.component.html', - styleUrls: ['./crisis-detail.component.css'] + styleUrls: ['./crisis-detail.component.css'], }) export class CrisisDetailComponent implements OnInit { crisis!: Crisis; @@ -20,19 +20,18 @@ export class CrisisDetailComponent implements OnInit { private service: CrisisService, private router: Router, private route: ActivatedRoute, - public dialogService: DialogService + public dialogService: DialogService, ) {} ngOnInit() { this.route.paramMap - .pipe( - switchMap((params: ParamMap) => - this.service.getCrisis(params.get('id')!))) + .pipe(switchMap((params: ParamMap) => this.service.getCrisis(params.get('id')!))) .subscribe((crisis: Crisis) => { if (crisis) { this.editName = crisis.name; this.crisis = crisis; - } else { // id not found + } else { + // id not found this.gotoCrises(); } }); @@ -63,6 +62,6 @@ export class CrisisDetailComponent implements OnInit { // so that the CrisisListComponent can select that crisis. // Add a totally useless `foo` parameter for kicks. // Relative navigation back to the crises - this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route }); + this.router.navigate(['../', {id: crisisId, foo: 'foo'}], {relativeTo: this.route}); } } diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts index 6dd567d0d75..3b254a17bb2 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts @@ -1,16 +1,16 @@ // #docplaster // #docregion -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Observable } from 'rxjs'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {Observable} from 'rxjs'; -import { Crisis } from '../crisis'; -import { DialogService } from '../../dialog.service'; +import {Crisis} from '../crisis'; +import {DialogService} from '../../dialog.service'; @Component({ selector: 'app-crisis-detail', templateUrl: './crisis-detail.component.html', - styleUrls: ['./crisis-detail.component.css'] + styleUrls: ['./crisis-detail.component.css'], }) export class CrisisDetailComponent implements OnInit { crisis!: Crisis; @@ -19,19 +19,18 @@ export class CrisisDetailComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router, - public dialogService: DialogService + public dialogService: DialogService, ) {} -// #docregion ngOnInit + // #docregion ngOnInit ngOnInit() { - this.route.data - .subscribe(data => { - const crisis: Crisis = data['crisis']; - this.editName = crisis.name; - this.crisis = crisis; - }); + this.route.data.subscribe((data) => { + const crisis: Crisis = data['crisis']; + this.editName = crisis.name; + this.crisis = crisis; + }); } -// #enddocregion ngOnInit + // #enddocregion ngOnInit // #docregion cancel-save cancel() { @@ -61,9 +60,9 @@ export class CrisisDetailComponent implements OnInit { // Pass along the crisis id if available // so that the CrisisListComponent can select that crisis. // Add a totally useless `foo` parameter for kicks. - // #docregion gotoCrises-navigate + // #docregion gotoCrises-navigate // Relative navigation back to the crises - this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route }); - // #enddocregion gotoCrises-navigate + this.router.navigate(['../', {id: crisisId, foo: 'foo'}], {relativeTo: this.route}); + // #enddocregion gotoCrises-navigate } } diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.1.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.1.ts index a64a924d60d..fe40d33e0a5 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.1.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.1.ts @@ -1,15 +1,15 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, ParamMap } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute, ParamMap} from '@angular/router'; -import { CrisisService } from '../crisis.service'; -import { Crisis } from '../crisis'; -import { Observable } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; +import {CrisisService} from '../crisis.service'; +import {Crisis} from '../crisis'; +import {Observable} from 'rxjs'; +import {switchMap} from 'rxjs/operators'; @Component({ selector: 'app-crisis-list', templateUrl: './crisis-list.component.html', - styleUrls: ['./crisis-list.component.css'] + styleUrls: ['./crisis-list.component.css'], }) export class CrisisListComponent implements OnInit { crises$!: Observable; @@ -17,16 +17,15 @@ export class CrisisListComponent implements OnInit { constructor( private service: CrisisService, - private route: ActivatedRoute + private route: ActivatedRoute, ) {} - ngOnInit() { this.crises$ = this.route.paramMap.pipe( switchMap((params: ParamMap) => { this.selectedId = parseInt(params.get('id')!, 10); return this.service.getCrises(); - }) + }), ); } } diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts index b70b2a6b2c4..8acac25c21d 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts @@ -1,15 +1,15 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; -import { CrisisService } from '../crisis.service'; -import { Crisis } from '../crisis'; -import { Observable } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; +import {CrisisService} from '../crisis.service'; +import {Crisis} from '../crisis'; +import {Observable} from 'rxjs'; +import {switchMap} from 'rxjs/operators'; @Component({ selector: 'app-crisis-list', templateUrl: './crisis-list.component.html', - styleUrls: ['./crisis-list.component.css'] + styleUrls: ['./crisis-list.component.css'], }) export class CrisisListComponent implements OnInit { crises$?: Observable; @@ -17,15 +17,15 @@ export class CrisisListComponent implements OnInit { constructor( private service: CrisisService, - private route: ActivatedRoute + private route: ActivatedRoute, ) {} ngOnInit() { this.crises$ = this.route.firstChild?.paramMap.pipe( - switchMap(params => { + switchMap((params) => { this.selectedId = parseInt(params.get('id')!, 10); return this.service.getCrises(); - }) + }), ); } } diff --git a/adev/src/content/examples/router/src/app/crisis-center/crisis.service.ts b/adev/src/content/examples/router/src/app/crisis-center/crisis.service.ts index dd18d82f11b..27d1a20fb7c 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/crisis.service.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/crisis.service.ts @@ -1,12 +1,12 @@ // #docplaster // #docregion -import { BehaviorSubject } from 'rxjs'; -import { map } from 'rxjs/operators'; +import {BehaviorSubject} from 'rxjs'; +import {map} from 'rxjs/operators'; -import { Injectable } from '@angular/core'; -import { MessageService } from '../message.service'; -import { Crisis } from './crisis'; -import { CRISES } from './mock-crises'; +import {Injectable} from '@angular/core'; +import {MessageService} from '../message.service'; +import {Crisis} from './crisis'; +import {CRISES} from './mock-crises'; @Injectable({ providedIn: 'root', @@ -15,21 +15,21 @@ export class CrisisService { static nextCrisisId = 100; private crises$: BehaviorSubject = new BehaviorSubject(CRISES); - constructor(private messageService: MessageService) { } + constructor(private messageService: MessageService) {} - getCrises() { return this.crises$; } + getCrises() { + return this.crises$; + } getCrisis(id: number | string) { - return this.getCrises().pipe( - map(crises => crises.find(crisis => crisis.id === +id)!) - ); + return this.getCrises().pipe(map((crises) => crises.find((crisis) => crisis.id === +id)!)); } // #enddocregion addCrisis(name: string) { name = name.trim(); if (name) { - const crisis = { id: CrisisService.nextCrisisId++, name }; + const crisis = {id: CrisisService.nextCrisisId++, name}; CRISES.push(crisis); this.crises$.next(CRISES); } diff --git a/adev/src/content/examples/router/src/app/crisis-center/mock-crises.ts b/adev/src/content/examples/router/src/app/crisis-center/mock-crises.ts index c21611815db..52c5574bc3b 100644 --- a/adev/src/content/examples/router/src/app/crisis-center/mock-crises.ts +++ b/adev/src/content/examples/router/src/app/crisis-center/mock-crises.ts @@ -1,9 +1,9 @@ // #docregion -import { Crisis } from './crisis'; +import {Crisis} from './crisis'; export const CRISES: Crisis[] = [ - { id: 1, name: 'Dragon Burning Cities' }, - { id: 2, name: 'Sky Rains Great White Sharks' }, - { id: 3, name: 'Giant Asteroid Heading For Earth' }, - { id: 4, name: 'Procrastinators Meeting Delayed Again' }, + {id: 1, name: 'Dragon Burning Cities'}, + {id: 2, name: 'Sky Rains Great White Sharks'}, + {id: 3, name: 'Giant Asteroid Heading For Earth'}, + {id: 4, name: 'Procrastinators Meeting Delayed Again'}, ]; diff --git a/adev/src/content/examples/router/src/app/crisis-list/crisis-list.component.1.ts b/adev/src/content/examples/router/src/app/crisis-list/crisis-list.component.1.ts index e8945db6388..a88d652e44f 100644 --- a/adev/src/content/examples/router/src/app/crisis-list/crisis-list.component.1.ts +++ b/adev/src/content/examples/router/src/app/crisis-list/crisis-list.component.1.ts @@ -1,10 +1,10 @@ // Initial empty version // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-crisis-list', templateUrl: './crisis-list.component.1.html', - styleUrls: ['./crisis-list.component.1.css'] + styleUrls: ['./crisis-list.component.1.css'], }) -export class CrisisListComponent { } +export class CrisisListComponent {} diff --git a/adev/src/content/examples/router/src/app/dialog.service.ts b/adev/src/content/examples/router/src/app/dialog.service.ts index 2c4de6b403e..9152f3ae419 100644 --- a/adev/src/content/examples/router/src/app/dialog.service.ts +++ b/adev/src/content/examples/router/src/app/dialog.service.ts @@ -1,6 +1,6 @@ // #docregion -import { Injectable } from '@angular/core'; -import { Observable, of } from 'rxjs'; +import {Injectable} from '@angular/core'; +import {Observable, of} from 'rxjs'; /** * Async modal dialog service diff --git a/adev/src/content/examples/router/src/app/hero-list/hero-list.component.1.ts b/adev/src/content/examples/router/src/app/hero-list/hero-list.component.1.ts index cbf2e54d991..4a4ba4ae3d5 100644 --- a/adev/src/content/examples/router/src/app/hero-list/hero-list.component.1.ts +++ b/adev/src/content/examples/router/src/app/hero-list/hero-list.component.1.ts @@ -1,10 +1,9 @@ - // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.1.html', - styleUrls: ['./hero-list.component.1.css'] + styleUrls: ['./hero-list.component.1.css'], }) -export class HeroListComponent { } +export class HeroListComponent {} diff --git a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts index 6b1f113d817..b83125a779b 100644 --- a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts +++ b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts @@ -1,33 +1,32 @@ // #docplaster // #docregion -import { switchMap } from 'rxjs/operators'; -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; +import {switchMap} from 'rxjs/operators'; +import {Component, OnInit} from '@angular/core'; +import {Observable} from 'rxjs'; // #docregion imports -import { Router, ActivatedRoute, ParamMap } from '@angular/router'; +import {Router, ActivatedRoute, ParamMap} from '@angular/router'; // #enddocregion imports -import { HeroService } from '../hero.service'; -import { Hero } from '../hero'; +import {HeroService} from '../hero.service'; +import {Hero} from '../hero'; @Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css'] + styleUrls: ['./hero-detail.component.css'], }) -export class HeroDetailComponent implements OnInit { +export class HeroDetailComponent implements OnInit { hero$!: Observable; constructor( private route: ActivatedRoute, private router: Router, - private service: HeroService + private service: HeroService, ) {} ngOnInit() { this.hero$ = this.route.paramMap.pipe( - switchMap((params: ParamMap) => - this.service.getHero(params.get('id')!)) + switchMap((params: ParamMap) => this.service.getHero(params.get('id')!)), ); } diff --git a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.2.ts b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.2.ts index b0896899df9..7ea3d31e44d 100644 --- a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.2.ts +++ b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.2.ts @@ -1,24 +1,24 @@ // Snapshot version // #docregion -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Observable } from 'rxjs'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {Observable} from 'rxjs'; -import { HeroService } from '../hero.service'; -import { Hero } from '../hero'; +import {HeroService} from '../hero.service'; +import {Hero} from '../hero'; @Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css'] + styleUrls: ['./hero-detail.component.css'], }) -export class HeroDetailComponent implements OnInit { +export class HeroDetailComponent implements OnInit { hero$!: Observable; constructor( private route: ActivatedRoute, private router: Router, - private service: HeroService + private service: HeroService, ) {} // #docregion snapshot diff --git a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts index a910ab508b0..9795b7f731f 100644 --- a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts +++ b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts @@ -1,19 +1,19 @@ // #docplaster // #docregion // #docregion rxjs-operator-import -import { switchMap } from 'rxjs/operators'; +import {switchMap} from 'rxjs/operators'; // #enddocregion rxjs-operator-import -import { Component, OnInit } from '@angular/core'; -import { Router, ActivatedRoute, ParamMap } from '@angular/router'; -import { Observable } from 'rxjs'; +import {Component, OnInit} from '@angular/core'; +import {Router, ActivatedRoute, ParamMap} from '@angular/router'; +import {Observable} from 'rxjs'; -import { HeroService } from '../hero.service'; -import { Hero } from '../hero'; +import {HeroService} from '../hero.service'; +import {Hero} from '../hero'; @Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css'] + styleUrls: ['./hero-detail.component.css'], }) export class HeroDetailComponent implements OnInit { hero$!: Observable; @@ -22,15 +22,14 @@ export class HeroDetailComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router, - private service: HeroService + private service: HeroService, ) {} // #enddocregion ctor // #docregion ngOnInit ngOnInit() { this.hero$ = this.route.paramMap.pipe( - switchMap((params: ParamMap) => - this.service.getHero(params.get('id')!)) + switchMap((params: ParamMap) => this.service.getHero(params.get('id')!)), ); } // #enddocregion ngOnInit @@ -41,7 +40,7 @@ export class HeroDetailComponent implements OnInit { // Pass along the hero id if available // so that the HeroList component can select that hero. // Include a junk 'foo' property for fun. - this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]); + this.router.navigate(['/heroes', {id: heroId, foo: 'foo'}]); } // #enddocregion gotoHeroes } diff --git a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.4.ts b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.4.ts index 9f0ff36efef..044ec5a5813 100644 --- a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.4.ts +++ b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.4.ts @@ -10,12 +10,15 @@ import {HeroService} from '../hero.service'; @Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css'] + styleUrls: ['./hero-detail.component.css'], }) export class HeroDetailComponent { hero$!: Observable; - constructor(private router: Router, private service: HeroService) {} + constructor( + private router: Router, + private service: HeroService, + ) {} // #docregion id-input @Input() diff --git a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts index a7c7f7c612c..880c2bafce6 100644 --- a/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts +++ b/adev/src/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts @@ -11,18 +11,21 @@ import {HeroService} from '../hero.service'; @Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css'] + styleUrls: ['./hero-detail.component.css'], }) export class HeroDetailComponent implements OnInit { hero$!: Observable; - constructor(private route: ActivatedRoute, private router: Router, private service: HeroService) { - } - + constructor( + private route: ActivatedRoute, + private router: Router, + private service: HeroService, + ) {} ngOnInit() { this.hero$ = this.route.paramMap.pipe( - switchMap((params: ParamMap) => this.service.getHero(params.get('id')!))); + switchMap((params: ParamMap) => this.service.getHero(params.get('id')!)), + ); } // #docregion redirect diff --git a/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts b/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts index 2d059a787f0..5c17258a3f4 100644 --- a/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts +++ b/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts @@ -1,21 +1,19 @@ // TODO: Feature Componentized like HeroCenter -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; +import {Component, OnInit} from '@angular/core'; +import {Observable} from 'rxjs'; -import { HeroService } from '../hero.service'; -import { Hero } from '../hero'; +import {HeroService} from '../hero.service'; +import {Hero} from '../hero'; @Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.1.html', - styleUrls: ['./hero-list.component.css'] + styleUrls: ['./hero-list.component.css'], }) export class HeroListComponent implements OnInit { heroes$!: Observable; - constructor( - private service: HeroService - ) {} + constructor(private service: HeroService) {} ngOnInit() { this.heroes$ = this.service.getHeroes(); diff --git a/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts b/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts index bb56bcf04ed..c0f9cc4d24f 100644 --- a/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts +++ b/adev/src/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts @@ -2,21 +2,21 @@ // #docregion // TODO: Feature Componentized like CrisisCenter // #docregion rxjs-imports -import { Observable } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; +import {Observable} from 'rxjs'; +import {switchMap} from 'rxjs/operators'; // #enddocregion rxjs-imports -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; // #docregion import-router -import { ActivatedRoute } from '@angular/router'; +import {ActivatedRoute} from '@angular/router'; // #enddocregion import-router -import { HeroService } from '../hero.service'; -import { Hero } from '../hero'; +import {HeroService} from '../hero.service'; +import {Hero} from '../hero'; @Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.html', - styleUrls: ['./hero-list.component.css'] + styleUrls: ['./hero-list.component.css'], }) // #docregion ctor export class HeroListComponent implements OnInit { @@ -25,18 +25,18 @@ export class HeroListComponent implements OnInit { constructor( private service: HeroService, - private route: ActivatedRoute + private route: ActivatedRoute, ) {} ngOnInit() { this.heroes$ = this.route.paramMap.pipe( - switchMap(params => { + switchMap((params) => { this.selectedId = parseInt(params.get('id')!, 10); return this.service.getHeroes(); - }) + }), ); } // #enddocregion ctor -// #docregion ctor + // #docregion ctor } // #enddocregion diff --git a/adev/src/content/examples/router/src/app/heroes/hero.service.ts b/adev/src/content/examples/router/src/app/heroes/hero.service.ts index 79ace7ae29b..42de800487d 100644 --- a/adev/src/content/examples/router/src/app/heroes/hero.service.ts +++ b/adev/src/content/examples/router/src/app/heroes/hero.service.ts @@ -1,19 +1,18 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { map } from 'rxjs/operators'; +import {Observable, of} from 'rxjs'; +import {map} from 'rxjs/operators'; -import { Hero } from './hero'; -import { HEROES } from './mock-heroes'; -import { MessageService } from '../message.service'; +import {Hero} from './hero'; +import {HEROES} from './mock-heroes'; +import {MessageService} from '../message.service'; @Injectable({ providedIn: 'root', }) export class HeroService { - - constructor(private messageService: MessageService) { } + constructor(private messageService: MessageService) {} getHeroes(): Observable { // TODO: send the message _after_ fetching the heroes @@ -24,8 +23,7 @@ export class HeroService { getHero(id: number | string) { return this.getHeroes().pipe( // (+) before `id` turns the string into a number - map((heroes: Hero[]) => heroes.find(hero => hero.id === +id)!) + map((heroes: Hero[]) => heroes.find((hero) => hero.id === +id)!), ); } } - diff --git a/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.1.ts b/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.1.ts index 5cb604444a1..d461936f648 100644 --- a/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.1.ts +++ b/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.1.ts @@ -1,24 +1,20 @@ // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { HeroListComponent } from './hero-list/hero-list.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; +import {HeroListComponent} from './hero-list/hero-list.component'; +import {HeroDetailComponent} from './hero-detail/hero-detail.component'; const heroesRoutes: Routes = [ - { path: 'heroes', component: HeroListComponent }, -// #docregion hero-detail-route - { path: 'hero/:id', component: HeroDetailComponent } -// #enddocregion hero-detail-route + {path: 'heroes', component: HeroListComponent}, + // #docregion hero-detail-route + {path: 'hero/:id', component: HeroDetailComponent}, + // #enddocregion hero-detail-route ]; @NgModule({ - imports: [ - RouterModule.forChild(heroesRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(heroesRoutes)], + exports: [RouterModule], }) -export class HeroesRoutingModule { } +export class HeroesRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.2.ts b/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.2.ts index ae041fbaee8..48c2eba9a7d 100644 --- a/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.2.ts +++ b/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.2.ts @@ -1,22 +1,18 @@ // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { HeroListComponent } from './hero-list/hero-list.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; +import {HeroListComponent} from './hero-list/hero-list.component'; +import {HeroDetailComponent} from './hero-detail/hero-detail.component'; const heroesRoutes: Routes = [ - { path: 'heroes', component: HeroListComponent, data: { animation: 'heroes' } }, - { path: 'hero/:id', component: HeroDetailComponent, data: { animation: 'hero' } } + {path: 'heroes', component: HeroListComponent, data: {animation: 'heroes'}}, + {path: 'hero/:id', component: HeroDetailComponent, data: {animation: 'hero'}}, ]; @NgModule({ - imports: [ - RouterModule.forChild(heroesRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(heroesRoutes)], + exports: [RouterModule], }) -export class HeroesRoutingModule { } +export class HeroesRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.ts b/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.ts index 5903bd5407a..98483828dd1 100644 --- a/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.ts +++ b/adev/src/content/examples/router/src/app/heroes/heroes-routing.module.ts @@ -1,24 +1,20 @@ // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; -import { HeroListComponent } from './hero-list/hero-list.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; +import {HeroListComponent} from './hero-list/hero-list.component'; +import {HeroDetailComponent} from './hero-detail/hero-detail.component'; const heroesRoutes: Routes = [ - { path: 'heroes', redirectTo: '/superheroes' }, - { path: 'hero/:id', redirectTo: '/superhero/:id' }, - { path: 'superheroes', component: HeroListComponent, data: { animation: 'heroes' } }, - { path: 'superhero/:id', component: HeroDetailComponent, data: { animation: 'hero' } } + {path: 'heroes', redirectTo: '/superheroes'}, + {path: 'hero/:id', redirectTo: '/superhero/:id'}, + {path: 'superheroes', component: HeroListComponent, data: {animation: 'heroes'}}, + {path: 'superhero/:id', component: HeroDetailComponent, data: {animation: 'hero'}}, ]; @NgModule({ - imports: [ - RouterModule.forChild(heroesRoutes) - ], - exports: [ - RouterModule - ] + imports: [RouterModule.forChild(heroesRoutes)], + exports: [RouterModule], }) -export class HeroesRoutingModule { } +export class HeroesRoutingModule {} // #enddocregion diff --git a/adev/src/content/examples/router/src/app/heroes/heroes.module.ts b/adev/src/content/examples/router/src/app/heroes/heroes.module.ts index dca5e08e2f1..310a6f57161 100644 --- a/adev/src/content/examples/router/src/app/heroes/heroes.module.ts +++ b/adev/src/content/examples/router/src/app/heroes/heroes.module.ts @@ -1,21 +1,14 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { HeroListComponent } from './hero-list/hero-list.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; +import {HeroListComponent} from './hero-list/hero-list.component'; +import {HeroDetailComponent} from './hero-detail/hero-detail.component'; -import { HeroesRoutingModule } from './heroes-routing.module'; +import {HeroesRoutingModule} from './heroes-routing.module'; @NgModule({ - imports: [ - CommonModule, - FormsModule, - HeroesRoutingModule - ], - declarations: [ - HeroListComponent, - HeroDetailComponent - ] + imports: [CommonModule, FormsModule, HeroesRoutingModule], + declarations: [HeroListComponent, HeroDetailComponent], }) export class HeroesModule {} diff --git a/adev/src/content/examples/router/src/app/heroes/mock-heroes.ts b/adev/src/content/examples/router/src/app/heroes/mock-heroes.ts index 33729c43e37..8761b672e72 100644 --- a/adev/src/content/examples/router/src/app/heroes/mock-heroes.ts +++ b/adev/src/content/examples/router/src/app/heroes/mock-heroes.ts @@ -1,13 +1,13 @@ -import { Hero } from './hero'; +import {Hero} from './hero'; export const HEROES: Hero[] = [ - { id: 12, name: 'Dr. Nice' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr. IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } + {id: 12, name: 'Dr. Nice'}, + {id: 13, name: 'Bombasto'}, + {id: 14, name: 'Celeritas'}, + {id: 15, name: 'Magneta'}, + {id: 16, name: 'RubberMan'}, + {id: 17, name: 'Dynama'}, + {id: 18, name: 'Dr. IQ'}, + {id: 19, name: 'Magma'}, + {id: 20, name: 'Tornado'}, ]; diff --git a/adev/src/content/examples/router/src/app/message.service.ts b/adev/src/content/examples/router/src/app/message.service.ts index d72412e115e..63f8dcfd8eb 100644 --- a/adev/src/content/examples/router/src/app/message.service.ts +++ b/adev/src/content/examples/router/src/app/message.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ providedIn: 'root', diff --git a/adev/src/content/examples/router/src/app/page-not-found/page-not-found.component.ts b/adev/src/content/examples/router/src/app/page-not-found/page-not-found.component.ts index 644ac672e2e..e2abef1049d 100644 --- a/adev/src/content/examples/router/src/app/page-not-found/page-not-found.component.ts +++ b/adev/src/content/examples/router/src/app/page-not-found/page-not-found.component.ts @@ -1,9 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-page-not-found', templateUrl: './page-not-found.component.html', - styleUrls: ['./page-not-found.component.css'] + styleUrls: ['./page-not-found.component.css'], }) export class PageNotFoundComponent {} - diff --git a/adev/src/content/examples/router/src/app/selective-preloading-strategy.service.ts b/adev/src/content/examples/router/src/app/selective-preloading-strategy.service.ts index 889502bbf78..71c9254a0ae 100644 --- a/adev/src/content/examples/router/src/app/selective-preloading-strategy.service.ts +++ b/adev/src/content/examples/router/src/app/selective-preloading-strategy.service.ts @@ -1,7 +1,7 @@ // #docregion -import { Injectable } from '@angular/core'; -import { PreloadingStrategy, Route } from '@angular/router'; -import { Observable, of } from 'rxjs'; +import {Injectable} from '@angular/core'; +import {PreloadingStrategy, Route} from '@angular/router'; +import {Observable, of} from 'rxjs'; @Injectable({ providedIn: 'root', diff --git a/adev/src/content/examples/router/src/main.ts b/adev/src/content/examples/router/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/router/src/main.ts +++ b/adev/src/content/examples/router/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/routing-with-urlmatcher/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/routing-with-urlmatcher/e2e/src/app.e2e-spec.ts index 1a20600161b..693d341cd81 100644 --- a/adev/src/content/examples/routing-with-urlmatcher/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/routing-with-urlmatcher/e2e/src/app.e2e-spec.ts @@ -1,11 +1,9 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Routing with Custom Matching', () => { - beforeAll(() => browser.get('')); it('should display Routing with Custom Matching ', async () => { expect(await element(by.css('h2')).getText()).toEqual('Routing with Custom Matching'); }); - }); diff --git a/adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.ts b/adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.ts index 65f24dbd12c..7b7557685bf 100644 --- a/adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.ts +++ b/adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.ts @@ -6,7 +6,7 @@ import {RouterLink, RouterOutlet} from '@angular/router'; standalone: true, imports: [RouterOutlet, RouterLink], templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { name = 'Angular ' + VERSION.major; diff --git a/adev/src/content/examples/routing-with-urlmatcher/src/app/app.config.ts b/adev/src/content/examples/routing-with-urlmatcher/src/app/app.config.ts index 3ca59974eb9..d6612156634 100644 --- a/adev/src/content/examples/routing-with-urlmatcher/src/app/app.config.ts +++ b/adev/src/content/examples/routing-with-urlmatcher/src/app/app.config.ts @@ -5,5 +5,8 @@ import {provideRouter, withComponentInputBinding} from '@angular/router'; import {routes} from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes, withComponentInputBinding()), provideProtractorTestingSupport()] + providers: [ + provideRouter(routes, withComponentInputBinding()), + provideProtractorTestingSupport(), + ], }; diff --git a/adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts b/adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts index f58e7b22845..7df21746ed3 100644 --- a/adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts +++ b/adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts @@ -12,7 +12,7 @@ export const routes: Routes = [ return null; }, - component: ProfileComponent + component: ProfileComponent, }, - // #enddocregion matcher + // #enddocregion matcher ]; diff --git a/adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.ts b/adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.ts index cc22077cc73..2eff47d5043 100644 --- a/adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.ts +++ b/adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.ts @@ -4,7 +4,7 @@ import {Component, Input} from '@angular/core'; selector: 'app-profile', standalone: true, templateUrl: './profile.component.html', - styleUrls: ['./profile.component.css'] + styleUrls: ['./profile.component.css'], }) export class ProfileComponent { @Input() username!: string; diff --git a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts index 0820fc6722c..dced723adc1 100644 --- a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts +++ b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts @@ -1,6 +1,6 @@ -import { Rule, Tree } from '@angular-devkit/schematics'; +import {Rule, Tree} from '@angular-devkit/schematics'; -import { Schema as MyServiceSchema } from './schema'; +import {Schema as MyServiceSchema} from './schema'; // #docregion factory export function myService(options: MyServiceSchema): Rule { diff --git a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts index e35daf2903b..0bdb413de8a 100644 --- a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts +++ b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts @@ -1,15 +1,21 @@ // #docplaster // #docregion schematics-imports, schema-imports, workspace import { - Rule, Tree, SchematicsException, - apply, url, applyTemplates, move, - chain, mergeWith + Rule, + Tree, + SchematicsException, + apply, + url, + applyTemplates, + move, + chain, + mergeWith, } from '@angular-devkit/schematics'; -import { strings, normalize, virtualFs, workspaces } from '@angular-devkit/core'; +import {strings, normalize, virtualFs, workspaces} from '@angular-devkit/core'; // #enddocregion schematics-imports -import { Schema as MyServiceSchema } from './schema'; +import {Schema as MyServiceSchema} from './schema'; // #enddocregion schema-imports function createHost(tree: Tree): workspaces.WorkspaceHost { @@ -36,41 +42,39 @@ function createHost(tree: Tree): workspaces.WorkspaceHost { export function myService(options: MyServiceSchema): Rule { return async (tree: Tree) => { const host = createHost(tree); - const { workspace } = await workspaces.readWorkspace('/', host); + const {workspace} = await workspaces.readWorkspace('/', host); -// #enddocregion workspace + // #enddocregion workspace -// #docregion project-info - const project = (options.project != null) ? workspace.projects.get(options.project) : null; + // #docregion project-info + const project = options.project != null ? workspace.projects.get(options.project) : null; if (!project) { throw new SchematicsException(`Invalid project name: ${options.project}`); } const projectType = project.extensions.projectType === 'application' ? 'app' : 'lib'; -// #enddocregion project-info + // #enddocregion project-info -// #docregion path + // #docregion path if (options.path === undefined) { options.path = `${project.sourceRoot}/${projectType}`; } -// #enddocregion path + // #enddocregion path -// #docregion template + // #docregion template const templateSource = apply(url('./files'), [ applyTemplates({ classify: strings.classify, dasherize: strings.dasherize, - name: options.name + name: options.name, }), - move(normalize(options.path as string)) + move(normalize(options.path as string)), ]); -// #enddocregion template + // #enddocregion template -// #docregion chain - return chain([ - mergeWith(templateSource) - ]); -// #enddocregion chain -// #docregion workspace + // #docregion chain + return chain([mergeWith(templateSource)]); + // #enddocregion chain + // #docregion workspace }; } diff --git a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts index e674cd2c438..745109926bc 100644 --- a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts +++ b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts @@ -1,9 +1,11 @@ -import { Rule } from '@angular-devkit/schematics'; -import { addRootImport } from '@schematics/angular/utility'; -import { Schema } from './schema'; +import {Rule} from '@angular-devkit/schematics'; +import {addRootImport} from '@schematics/angular/utility'; +import {Schema} from './schema'; export function ngAdd(options: Schema): Rule { // Add an import `MyLibModule` from `my-lib` to the root of the user's project. - return addRootImport(options.project, ({code, external}) => - code`${external('MyLibModule', 'my-lib')}`); + return addRootImport( + options.project, + ({code, external}) => code`${external('MyLibModule', 'my-lib')}`, + ); } diff --git a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.spec.ts b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.spec.ts index ca72b617a9e..e97b312a2c1 100644 --- a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.spec.ts +++ b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.spec.ts @@ -1,6 +1,6 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; -import { MyLibComponent } from './my-lib.component'; +import {MyLibComponent} from './my-lib.component'; describe('MyLibComponent', () => { let component: MyLibComponent; diff --git a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.ts b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.ts index e11e7b56585..df3f49e88c3 100644 --- a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.ts +++ b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'lib-my-lib', @@ -7,6 +7,6 @@ import { Component } from '@angular/core'; my-lib works!

    `, - styles: [] + styles: [], }) export class MyLibComponent {} diff --git a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.module.ts b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.module.ts index b48e140f604..7546a4184ce 100644 --- a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.module.ts +++ b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.module.ts @@ -1,10 +1,9 @@ -import { NgModule } from '@angular/core'; -import { MyLibComponent } from './my-lib.component'; +import {NgModule} from '@angular/core'; +import {MyLibComponent} from './my-lib.component'; @NgModule({ declarations: [MyLibComponent], - imports: [ - ], - exports: [MyLibComponent] + imports: [], + exports: [MyLibComponent], }) -export class MyLibModule { } +export class MyLibModule {} diff --git a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.spec.ts b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.spec.ts index f1e55519c69..ade5dc5e682 100644 --- a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.spec.ts +++ b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.spec.ts @@ -1,6 +1,6 @@ -import { TestBed } from '@angular/core/testing'; +import {TestBed} from '@angular/core/testing'; -import { MyLibService } from './my-lib.service'; +import {MyLibService} from './my-lib.service'; describe('MyLibService', () => { beforeEach(() => TestBed.configureTestingModule({})); diff --git a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.ts b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.ts index 5176bc5befd..af502af5d27 100644 --- a/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.ts +++ b/adev/src/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.ts @@ -1,6 +1,6 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class MyLibService {} diff --git a/adev/src/content/examples/schematics-for-libraries/src/app/app.component.ts b/adev/src/content/examples/schematics-for-libraries/src/app/app.component.ts index 7befb56b706..7bb2d38dd33 100644 --- a/adev/src/content/examples/schematics-for-libraries/src/app/app.component.ts +++ b/adev/src/content/examples/schematics-for-libraries/src/app/app.component.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', template: `

    Library Schematics

    `, - styles: [] + styles: [], }) export class AppComponent { title = 'schematics-for-libraries'; diff --git a/adev/src/content/examples/schematics-for-libraries/src/app/app.module.ts b/adev/src/content/examples/schematics-for-libraries/src/app/app.module.ts index f65716351aa..e59b43254b7 100644 --- a/adev/src/content/examples/schematics-for-libraries/src/app/app.module.ts +++ b/adev/src/content/examples/schematics-for-libraries/src/app/app.module.ts @@ -1,16 +1,12 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], + declarations: [AppComponent], + imports: [BrowserModule], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/schematics-for-libraries/src/main.ts b/adev/src/content/examples/schematics-for-libraries/src/main.ts index 0a621147e30..6f00233886b 100644 --- a/adev/src/content/examples/schematics-for-libraries/src/main.ts +++ b/adev/src/content/examples/schematics-for-libraries/src/main.ts @@ -1,6 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/security/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/security/e2e/src/app.e2e-spec.ts index 1f00858235a..c4d7d1838f1 100644 --- a/adev/src/content/examples/security/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/security/e2e/src/app.e2e-spec.ts @@ -1,12 +1,13 @@ -import { browser, element, By } from 'protractor'; +import {browser, element, By} from 'protractor'; describe('Security E2E Tests', () => { beforeAll(() => browser.get('')); it('sanitizes innerHTML', async () => { const interpolated = element(By.className('e2e-inner-html-interpolated')); - expect(await interpolated.getText()) - .toContain('Template Syntax'); + expect(await interpolated.getText()).toContain( + 'Template Syntax', + ); const bound = element(By.className('e2e-inner-html-bound')); expect(await bound.getText()).toContain('Template Syntax'); const bold = element(By.css('.e2e-inner-html-bound b')); diff --git a/adev/src/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts index e0d18fc72cc..a484ca9fb23 100755 --- a/adev/src/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts @@ -1,6 +1,5 @@ -import { AppPage } from './app.po'; -import { element, by } from 'protractor'; - +import {AppPage} from './app.po'; +import {element, by} from 'protractor'; describe('sw-example App', () => { let page: AppPage; diff --git a/adev/src/content/examples/service-worker-getting-started/src/app/app.component.ts b/adev/src/content/examples/service-worker-getting-started/src/app/app.component.ts index d0dc473a4b4..68a74dedade 100755 --- a/adev/src/content/examples/service-worker-getting-started/src/app/app.component.ts +++ b/adev/src/content/examples/service-worker-getting-started/src/app/app.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; -import { SwUpdate } from '@angular/service-worker'; +import {Component} from '@angular/core'; +import {SwUpdate} from '@angular/service-worker'; @Component({ standalone: true, selector: 'app-root', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) export class AppComponent { title = 'Service Workers'; @@ -14,8 +14,8 @@ export class AppComponent { updateCheck(): void { this.update - .checkForUpdate() - .then(() => this.updateCheckText = 'resolved') - .catch(err => this.updateCheckText = `rejected: ${err.message}`); + .checkForUpdate() + .then(() => (this.updateCheckText = 'resolved')) + .catch((err) => (this.updateCheckText = `rejected: ${err.message}`)); } } diff --git a/adev/src/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts b/adev/src/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts index 2a575a047c7..35f4645aab4 100755 --- a/adev/src/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts +++ b/adev/src/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts @@ -1,15 +1,14 @@ -import { ApplicationRef, Injectable } from '@angular/core'; -import { SwUpdate } from '@angular/service-worker'; -import { concat, interval } from 'rxjs'; -import { first } from 'rxjs/operators'; +import {ApplicationRef, Injectable} from '@angular/core'; +import {SwUpdate} from '@angular/service-worker'; +import {concat, interval} from 'rxjs'; +import {first} from 'rxjs/operators'; @Injectable({providedIn: 'root'}) export class CheckForUpdateService { - constructor(appRef: ApplicationRef, updates: SwUpdate) { // Allow the app to stabilize first, before starting // polling for updates with `interval()`. - const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true)); + const appIsStable$ = appRef.isStable.pipe(first((isStable) => isStable === true)); const everySixHours$ = interval(6 * 60 * 60 * 1000); const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$); diff --git a/adev/src/content/examples/service-worker-getting-started/src/app/handle-unrecoverable-state.service.ts b/adev/src/content/examples/service-worker-getting-started/src/app/handle-unrecoverable-state.service.ts index b22260a22b9..a3477884932 100644 --- a/adev/src/content/examples/service-worker-getting-started/src/app/handle-unrecoverable-state.service.ts +++ b/adev/src/content/examples/service-worker-getting-started/src/app/handle-unrecoverable-state.service.ts @@ -1,17 +1,17 @@ -import { Injectable } from '@angular/core'; -import { SwUpdate } from '@angular/service-worker'; +import {Injectable} from '@angular/core'; +import {SwUpdate} from '@angular/service-worker'; -function notifyUser(message: string): void { } +function notifyUser(message: string): void {} // #docregion sw-unrecoverable-state @Injectable({providedIn: 'root'}) export class HandleUnrecoverableStateService { constructor(updates: SwUpdate) { - updates.unrecoverable.subscribe(event => { + updates.unrecoverable.subscribe((event) => { notifyUser( 'An error occurred that we cannot recover from:\n' + - event.reason + - '\n\nPlease reload the page.' + event.reason + + '\n\nPlease reload the page.', ); }); } diff --git a/adev/src/content/examples/service-worker-getting-started/src/app/log-update.service.ts b/adev/src/content/examples/service-worker-getting-started/src/app/log-update.service.ts index 1bb2c6a65c3..d0c7173df51 100755 --- a/adev/src/content/examples/service-worker-getting-started/src/app/log-update.service.ts +++ b/adev/src/content/examples/service-worker-getting-started/src/app/log-update.service.ts @@ -1,12 +1,11 @@ -import { Injectable } from '@angular/core'; -import { SwUpdate, VersionReadyEvent } from '@angular/service-worker'; +import {Injectable} from '@angular/core'; +import {SwUpdate, VersionReadyEvent} from '@angular/service-worker'; // #docregion sw-update @Injectable({providedIn: 'root'}) export class LogUpdateService { - constructor(updates: SwUpdate) { - updates.versionUpdates.subscribe(evt => { + updates.versionUpdates.subscribe((evt) => { switch (evt.type) { case 'VERSION_DETECTED': console.log(`Downloading new app version: ${evt.version.hash}`); diff --git a/adev/src/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts b/adev/src/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts index 45059eda7a6..6cf382244fb 100755 --- a/adev/src/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts +++ b/adev/src/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts @@ -1,9 +1,9 @@ // #docplaster -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; // #docregion sw-replicate-available - import { filter, map } from 'rxjs/operators'; +import {filter, map} from 'rxjs/operators'; // #enddocregion sw-replicate-available -import { SwUpdate, VersionReadyEvent } from '@angular/service-worker'; +import {SwUpdate, VersionReadyEvent} from '@angular/service-worker'; function promptUser(event: VersionReadyEvent): boolean { return true; @@ -12,29 +12,28 @@ function promptUser(event: VersionReadyEvent): boolean { // #docregion sw-version-ready @Injectable({providedIn: 'root'}) export class PromptUpdateService { - constructor(swUpdate: SwUpdate) { swUpdate.versionUpdates - .pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY')) - .subscribe(evt => { - if (promptUser(evt)) { - // Reload the page to update to the latest version. - document.location.reload(); - } - }); + .pipe(filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY')) + .subscribe((evt) => { + if (promptUser(evt)) { + // Reload the page to update to the latest version. + document.location.reload(); + } + }); // #enddocregion sw-version-ready // #docregion sw-replicate-available // ... const updatesAvailable = swUpdate.versionUpdates.pipe( - filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'), - map(evt => ({ - type: 'UPDATE_AVAILABLE', - current: evt.currentVersion, - available: evt.latestVersion, - }))); + filter((evt): evt is VersionReadyEvent => evt.type === 'VERSION_READY'), + map((evt) => ({ + type: 'UPDATE_AVAILABLE', + current: evt.currentVersion, + available: evt.latestVersion, + })), + ); // #enddocregion sw-replicate-available // #docregion sw-version-ready } - } // #enddocregion sw-version-ready diff --git a/adev/src/content/examples/service-worker-getting-started/src/main.ts b/adev/src/content/examples/service-worker-getting-started/src/main.ts index 964eff71b77..52a1ee4382f 100755 --- a/adev/src/content/examples/service-worker-getting-started/src/main.ts +++ b/adev/src/content/examples/service-worker-getting-started/src/main.ts @@ -1,9 +1,9 @@ -import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/platform-browser'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {AppComponent} from './app/app.component'; bootstrapApplication(AppComponent, { providers: [ provideProtractorTestingSupport(), // essential for e2e testing - ] + ], }); diff --git a/adev/src/content/examples/setup/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/setup/e2e/src/app.e2e-spec.ts index db185ac5d91..3cd189e7e92 100644 --- a/adev/src/content/examples/setup/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/setup/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('QuickStart E2E Tests', () => { - const expectedMsg = 'Hello Angular'; beforeEach(() => browser.get('')); @@ -9,5 +8,4 @@ describe('QuickStart E2E Tests', () => { it(`should display: ${expectedMsg}`, async () => { expect(await element(by.css('h1')).getText()).toEqual(expectedMsg); }); - }); diff --git a/adev/src/content/examples/setup/src/app/app.component.spec.ts b/adev/src/content/examples/setup/src/app/app.component.spec.ts index 36ded934371..f57784bade3 100644 --- a/adev/src/content/examples/setup/src/app/app.component.spec.ts +++ b/adev/src/content/examples/setup/src/app/app.component.spec.ts @@ -1,8 +1,8 @@ -import { DebugElement } from '@angular/core'; -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; +import {DebugElement} from '@angular/core'; +import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; +import {By} from '@angular/platform-browser'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; describe('AppComponent', () => { let de: DebugElement; diff --git a/adev/src/content/examples/setup/src/app/app.component.ts b/adev/src/content/examples/setup/src/app/app.component.ts index 34fe904bee2..421ca0fdde7 100644 --- a/adev/src/content/examples/setup/src/app/app.component.ts +++ b/adev/src/content/examples/setup/src/app/app.component.ts @@ -1,8 +1,10 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', - template: '

    Hello {{name}}

    ' + template: '

    Hello {{name}}

    ', }) -export class AppComponent { name = 'Angular'; } +export class AppComponent { + name = 'Angular'; +} diff --git a/adev/src/content/examples/setup/src/app/app.module.ts b/adev/src/content/examples/setup/src/app/app.module.ts index 321a2e0b4ac..5fd4bd57dc9 100644 --- a/adev/src/content/examples/setup/src/app/app.module.ts +++ b/adev/src/content/examples/setup/src/app/app.module.ts @@ -1,11 +1,11 @@ // #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { AppComponent } from './app.component'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {AppComponent} from './app.component'; @NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] + imports: [BrowserModule], + declarations: [AppComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/setup/src/main.ts b/adev/src/content/examples/setup/src/main.ts index 49432aa0877..430d51ace21 100644 --- a/adev/src/content/examples/setup/src/main.ts +++ b/adev/src/content/examples/setup/src/main.ts @@ -1,7 +1,8 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/ssr/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/ssr/e2e/src/app.e2e-spec.ts index b9fbf6ca0c2..6218e864760 100644 --- a/adev/src/content/examples/ssr/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/ssr/e2e/src/app.e2e-spec.ts @@ -1,23 +1,23 @@ -import { browser, by, element, ElementArrayFinder, ElementFinder, logging } from 'protractor'; +import {browser, by, element, ElementArrayFinder, ElementFinder, logging} from 'protractor'; class Hero { - constructor(public id: number, public name: string) {} + constructor( + public id: number, + public name: string, + ) {} // Factory methods // Hero from string formatted as ' '. static fromString(s: string): Hero { - return new Hero( - +s.substring(0, s.indexOf(' ')), - s.slice(s.indexOf(' ') + 1), - ); + return new Hero(+s.substring(0, s.indexOf(' ')), s.slice(s.indexOf(' ') + 1)); } // Hero from hero list
  • element. static async fromLi(li: ElementFinder): Promise { const stringsFromA = await li.all(by.css('a')).getText(); const strings = stringsFromA[0].split(' '); - return { id: +strings[0], name: strings[1] }; + return {id: +strings[0], name: strings[1]}; } // Hero id and name from the given detail element. @@ -28,7 +28,7 @@ class Hero { const name = await detail.element(by.css('h2')).getText(); return { id: +id.slice(id.indexOf(' ') + 1), - name: name.substring(0, name.lastIndexOf(' ')) + name: name.substring(0, name.lastIndexOf(' ')), }; } } @@ -36,7 +36,7 @@ class Hero { describe('Universal', () => { const expectedH1 = 'Tour of Heroes'; const expectedTitle = `${expectedH1}`; - const targetHero = { id: 15, name: 'Magneta' }; + const targetHero = {id: 15, name: 'Magneta'}; const targetHeroDashboardIndex = 2; const nameSuffix = 'X'; const newHeroName = targetHero.name + nameSuffix; @@ -44,7 +44,7 @@ describe('Universal', () => { afterEach(async () => { // Assert that there are no errors emitted from the browser const logs = await browser.manage().logs().get(logging.Type.BROWSER); - const severeLogs = logs.filter(entry => entry.level === logging.Level.SEVERE); + const severeLogs = logs.filter((entry) => entry.level === logging.Level.SEVERE); expect(severeLogs).toEqual([]); }); @@ -61,7 +61,7 @@ describe('Universal', () => { const expectedViewNames = ['Dashboard', 'Heroes']; it(`has views ${expectedViewNames}`, async () => { - const viewNames = await getPageElts().navElts.map(el => el!.getText()); + const viewNames = await getPageElts().navElts.map((el) => el!.getText()); expect(viewNames).toEqual(expectedViewNames); }); @@ -143,7 +143,7 @@ describe('Universal', () => { expect(await page.allHeroes.count()).toEqual(8, 'number of heroes'); const heroesAfter = await toHeroArray(page.allHeroes); // console.log(await Hero.fromLi(page.allHeroes[0])); - const expectedHeroes = heroesBefore.filter(h => h.name !== newHeroName); + const expectedHeroes = heroesBefore.filter((h) => h.name !== newHeroName); expect(heroesAfter).toEqual(expectedHeroes); // expect(await page.selectedHeroSubview.isPresent()).toBeFalsy(); }); @@ -247,9 +247,9 @@ describe('Universal', () => { } async function expectHeading(hLevel: number, expectedText: string): Promise { - const hTag = `h${hLevel}`; - const hText = await element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); + const hTag = `h${hLevel}`; + const hText = await element(by.css(hTag)).getText(); + expect(hText).toEqual(expectedText, hTag); } function getHeroAEltById(id: number): ElementFinder { @@ -280,12 +280,12 @@ describe('Universal', () => { heroDetail: element(by.css('app-root app-hero-detail > div')), searchBox: element(by.css('#search-box')), - searchResults: element.all(by.css('.search-result li')) + searchResults: element.all(by.css('.search-result li')), }; } async function toHeroArray(allHeroes: ElementArrayFinder): Promise { - return await allHeroes.map(hero => Hero.fromLi(hero!)); + return await allHeroes.map((hero) => Hero.fromLi(hero!)); } async function updateHeroNameInDetailView(): Promise { diff --git a/adev/src/content/examples/ssr/server.ts b/adev/src/content/examples/ssr/server.ts index 0ba142d822f..7cd55de69c3 100644 --- a/adev/src/content/examples/ssr/server.ts +++ b/adev/src/content/examples/ssr/server.ts @@ -1,10 +1,10 @@ // #docplaster -import { APP_BASE_HREF } from '@angular/common'; -import { CommonEngine } from '@angular/ssr'; +import {APP_BASE_HREF} from '@angular/common'; +import {CommonEngine} from '@angular/ssr'; import express from 'express'; -import { fileURLToPath } from 'node:url'; -import { dirname, join, resolve } from 'node:path'; +import {fileURLToPath} from 'node:url'; +import {dirname, join, resolve} from 'node:path'; import bootstrap from './src/main.server'; // The Express app is exported so that it can be used by serverless Functions. @@ -24,13 +24,16 @@ export function app(): express.Express { res.status(404).send('data requests are not yet supported'); }); // Serve static files from /browser - server.get('*.*', express.static(browserDistFolder, { - maxAge: '1y' - })); + server.get( + '*.*', + express.static(browserDistFolder, { + maxAge: '1y', + }), + ); // All regular routes use the Angular engine server.get('*', (req, res, next) => { - const { protocol, originalUrl, baseUrl, headers } = req; + const {protocol, originalUrl, baseUrl, headers} = req; commonEngine .render({ @@ -38,7 +41,7 @@ export function app(): express.Express { documentFilePath: indexHtml, url: `${protocol}://${headers.host}${originalUrl}`, publicPath: browserDistFolder, - providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }], + providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}], }) .then((html) => res.send(html)) .catch((err) => next(err)); diff --git a/adev/src/content/examples/ssr/src/app/app.component.ts b/adev/src/content/examples/ssr/src/app/app.component.ts index 6ceafa20c9e..899b39e374c 100644 --- a/adev/src/content/examples/ssr/src/app/app.component.ts +++ b/adev/src/content/examples/ssr/src/app/app.component.ts @@ -1,27 +1,23 @@ -import { Component } from '@angular/core'; -import { RouterLink, RouterOutlet } from '@angular/router'; +import {Component} from '@angular/core'; +import {RouterLink, RouterOutlet} from '@angular/router'; -import { PLATFORM_ID, APP_ID, Inject } from '@angular/core'; -import { isPlatformBrowser } from '@angular/common'; +import {PLATFORM_ID, APP_ID, Inject} from '@angular/core'; +import {isPlatformBrowser} from '@angular/common'; -import { MessagesComponent } from './messages/messages.component'; +import {MessagesComponent} from './messages/messages.component'; @Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', - imports: [ RouterLink, RouterOutlet, MessagesComponent ], - styleUrls: ['./app.component.css'] + imports: [RouterLink, RouterOutlet, MessagesComponent], + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'Tour of Heroes'; - constructor( - @Inject(PLATFORM_ID) platformId: object, - @Inject(APP_ID) appId: string) { - const platform = isPlatformBrowser(platformId) ? - 'in the browser' : 'on the server'; + constructor(@Inject(PLATFORM_ID) platformId: object, @Inject(APP_ID) appId: string) { + const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server'; console.log(`Running ${platform} with appId=${appId}`); } - } diff --git a/adev/src/content/examples/ssr/src/app/app.config.server.ts b/adev/src/content/examples/ssr/src/app/app.config.server.ts index 1980cfe118b..c217a73668a 100644 --- a/adev/src/content/examples/ssr/src/app/app.config.server.ts +++ b/adev/src/content/examples/ssr/src/app/app.config.server.ts @@ -1,6 +1,6 @@ -import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; -import { provideServerRendering } from '@angular/platform-server'; -import { appConfig } from './app.config'; +import {mergeApplicationConfig, ApplicationConfig} from '@angular/core'; +import {provideServerRendering} from '@angular/platform-server'; +import {appConfig} from './app.config'; const serverConfig: ApplicationConfig = { providers: [provideServerRendering()], diff --git a/adev/src/content/examples/ssr/src/app/app.config.ts b/adev/src/content/examples/ssr/src/app/app.config.ts index f1a911fc1e3..c84cbed4227 100644 --- a/adev/src/content/examples/ssr/src/app/app.config.ts +++ b/adev/src/content/examples/ssr/src/app/app.config.ts @@ -1,21 +1,21 @@ // #docplaster -import { importProvidersFrom } from '@angular/core'; -import { provideProtractorTestingSupport } from '@angular/platform-browser'; -import { provideClientHydration} from '@angular/platform-browser'; -import { ApplicationConfig } from '@angular/core'; -import { provideRouter } from '@angular/router'; -import { provideHttpClient, withFetch } from '@angular/common/http'; +import {importProvidersFrom} from '@angular/core'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; +import {provideClientHydration} from '@angular/platform-browser'; +import {ApplicationConfig} from '@angular/core'; +import {provideRouter} from '@angular/router'; +import {provideHttpClient, withFetch} from '@angular/common/http'; -import { routes } from './app.routes'; +import {routes} from './app.routes'; -import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; -import { InMemoryDataService } from './in-memory-data.service'; +import {HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api'; +import {InMemoryDataService} from './in-memory-data.service'; export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), - // TODO: Enable using Fetch API when disabling `HttpClientInMemoryWebApiModule`. - provideHttpClient(/* withFetch()*/ ), + // TODO: Enable using Fetch API when disabling `HttpClientInMemoryWebApiModule`. + provideHttpClient(/* withFetch()*/), provideClientHydration(), provideProtractorTestingSupport(), // essential for e2e testing @@ -24,9 +24,7 @@ export const appConfig: ApplicationConfig = { // The HttpClientInMemoryWebApiModule module intercepts HTTP requests // and returns simulated server responses. // Remove it when a real server is ready to receive requests. - HttpClientInMemoryWebApiModule.forRoot( - InMemoryDataService, { dataEncapsulation: false } - ) + HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {dataEncapsulation: false}), ), // ... ], diff --git a/adev/src/content/examples/ssr/src/app/app.routes.ts b/adev/src/content/examples/ssr/src/app/app.routes.ts index bcd8c149f6f..a512e57893c 100644 --- a/adev/src/content/examples/ssr/src/app/app.routes.ts +++ b/adev/src/content/examples/ssr/src/app/app.routes.ts @@ -1,12 +1,12 @@ -import { Routes } from '@angular/router'; +import {Routes} from '@angular/router'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; +import {DashboardComponent} from './dashboard/dashboard.component'; +import {HeroesComponent} from './heroes/heroes.component'; +import {HeroDetailComponent} from './hero-detail/hero-detail.component'; export const routes: Routes = [ - { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, - { path: 'dashboard', component: DashboardComponent }, - { path: 'detail/:id', component: HeroDetailComponent }, - { path: 'heroes', component: HeroesComponent } + {path: '', redirectTo: '/dashboard', pathMatch: 'full'}, + {path: 'dashboard', component: DashboardComponent}, + {path: 'detail/:id', component: HeroDetailComponent}, + {path: 'heroes', component: HeroesComponent}, ]; diff --git a/adev/src/content/examples/ssr/src/app/dashboard/dashboard.component.ts b/adev/src/content/examples/ssr/src/app/dashboard/dashboard.component.ts index 5aba951cabb..b866f581db7 100644 --- a/adev/src/content/examples/ssr/src/app/dashboard/dashboard.component.ts +++ b/adev/src/content/examples/ssr/src/app/dashboard/dashboard.component.ts @@ -1,29 +1,28 @@ -import { Component, OnInit } from '@angular/core'; -import { NgFor } from '@angular/common'; -import { RouterLink } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {NgFor} from '@angular/common'; +import {RouterLink} from '@angular/router'; -import { Hero } from '../hero'; -import { HeroSearchComponent } from '../hero-search/hero-search.component'; -import { HeroService } from '../hero.service'; +import {Hero} from '../hero'; +import {HeroSearchComponent} from '../hero-search/hero-search.component'; +import {HeroService} from '../hero.service'; @Component({ standalone: true, selector: 'app-dashboard', templateUrl: './dashboard.component.html', - imports: [ NgFor, RouterLink, HeroSearchComponent ], - styleUrls: [ './dashboard.component.css' ] + imports: [NgFor, RouterLink, HeroSearchComponent], + styleUrls: ['./dashboard.component.css'], }) export class DashboardComponent implements OnInit { heroes: Hero[] = []; - constructor(private heroService: HeroService) { } + constructor(private heroService: HeroService) {} ngOnInit() { this.getHeroes(); } getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes.slice(1, 5)); + this.heroService.getHeroes().subscribe((heroes) => (this.heroes = heroes.slice(1, 5))); } } diff --git a/adev/src/content/examples/ssr/src/app/hero-detail/hero-detail.component.ts b/adev/src/content/examples/ssr/src/app/hero-detail/hero-detail.component.ts index 07506603559..43b2ca0e32f 100644 --- a/adev/src/content/examples/ssr/src/app/hero-detail/hero-detail.component.ts +++ b/adev/src/content/examples/ssr/src/app/hero-detail/hero-detail.component.ts @@ -1,17 +1,17 @@ -import { Component, OnInit, Input} from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Location, NgIf, UpperCasePipe } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {Component, OnInit, Input} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {Location, NgIf, UpperCasePipe} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; +import {Hero} from '../hero'; +import {HeroService} from '../hero.service'; @Component({ standalone: true, selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', - imports: [ FormsModule, NgIf, UpperCasePipe ], - styleUrls: [ './hero-detail.component.css' ] + imports: [FormsModule, NgIf, UpperCasePipe], + styleUrls: ['./hero-detail.component.css'], }) export class HeroDetailComponent implements OnInit { @Input() hero!: Hero; @@ -19,7 +19,7 @@ export class HeroDetailComponent implements OnInit { constructor( private route: ActivatedRoute, private heroService: HeroService, - private location: Location + private location: Location, ) {} ngOnInit(): void { @@ -28,8 +28,7 @@ export class HeroDetailComponent implements OnInit { getHero(): void { const id = parseInt(this.route.snapshot.paramMap.get('id')!, 10); - this.heroService.getHero(id) - .subscribe(hero => this.hero = hero); + this.heroService.getHero(id).subscribe((hero) => (this.hero = hero)); } goBack(): void { @@ -37,7 +36,6 @@ export class HeroDetailComponent implements OnInit { } save(): void { - this.heroService.updateHero(this.hero) - .subscribe(() => this.goBack()); + this.heroService.updateHero(this.hero).subscribe(() => this.goBack()); } } diff --git a/adev/src/content/examples/ssr/src/app/hero-search/hero-search.component.ts b/adev/src/content/examples/ssr/src/app/hero-search/hero-search.component.ts index a8208f499b8..a94d15bcdd3 100644 --- a/adev/src/content/examples/ssr/src/app/hero-search/hero-search.component.ts +++ b/adev/src/content/examples/ssr/src/app/hero-search/hero-search.component.ts @@ -1,22 +1,20 @@ -import { Component, OnInit } from '@angular/core'; -import { AsyncPipe, NgFor } from '@angular/common'; -import { RouterLink } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {AsyncPipe, NgFor} from '@angular/common'; +import {RouterLink} from '@angular/router'; -import { Observable, Subject } from 'rxjs'; +import {Observable, Subject} from 'rxjs'; -import { - debounceTime, distinctUntilChanged, switchMap - } from 'rxjs/operators'; +import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators'; -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; +import {Hero} from '../hero'; +import {HeroService} from '../hero.service'; @Component({ standalone: true, selector: 'app-hero-search', templateUrl: './hero-search.component.html', - imports: [ AsyncPipe, NgFor, RouterLink ], - styleUrls: [ './hero-search.component.css' ] + imports: [AsyncPipe, NgFor, RouterLink], + styleUrls: ['./hero-search.component.css'], }) export class HeroSearchComponent implements OnInit { heroes$!: Observable; diff --git a/adev/src/content/examples/ssr/src/app/hero.service.ts b/adev/src/content/examples/ssr/src/app/hero.service.ts index 361b36c14bd..1f7bfe81cf6 100644 --- a/adev/src/content/examples/ssr/src/app/hero.service.ts +++ b/adev/src/content/examples/ssr/src/app/hero.service.ts @@ -1,55 +1,52 @@ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {HttpClient, HttpHeaders} from '@angular/common/http'; -import { Observable, of } from 'rxjs'; -import { catchError, map, tap } from 'rxjs/operators'; +import {Observable, of} from 'rxjs'; +import {catchError, map, tap} from 'rxjs/operators'; -import { Hero } from './hero'; -import { MessageService } from './message.service'; +import {Hero} from './hero'; +import {MessageService} from './message.service'; - -@Injectable({ providedIn: 'root' }) +@Injectable({providedIn: 'root'}) export class HeroService { - - private heroesUrl = 'api/heroes'; // URL to web api + private heroesUrl = 'api/heroes'; // URL to web api httpOptions = { - headers: new HttpHeaders({ 'Content-Type': 'application/json' }) + headers: new HttpHeaders({'Content-Type': 'application/json'}), }; constructor( private http: HttpClient, - private messageService: MessageService) { } + private messageService: MessageService, + ) {} /** GET heroes from the server */ getHeroes(): Observable { - return this.http.get(this.heroesUrl) - .pipe( - tap(_ => this.log('fetched heroes')), - catchError(this.handleError('getHeroes', [])) - ); + return this.http.get(this.heroesUrl).pipe( + tap((_) => this.log('fetched heroes')), + catchError(this.handleError('getHeroes', [])), + ); } /** GET hero by id. Return `undefined` when id not found */ getHeroNo404(id: number): Observable { const url = `${this.heroesUrl}/?id=${id}`; - return this.http.get(url) - .pipe( - map(heroes => heroes[0]), // returns a {0|1} element array - tap(h => { - const outcome = h ? 'fetched' : 'did not find'; - this.log(`${outcome} hero id=${id}`); - }), - catchError(this.handleError(`getHero id=${id}`)) - ); + return this.http.get(url).pipe( + map((heroes) => heroes[0]), // returns a {0|1} element array + tap((h) => { + const outcome = h ? 'fetched' : 'did not find'; + this.log(`${outcome} hero id=${id}`); + }), + catchError(this.handleError(`getHero id=${id}`)), + ); } /** GET hero by id. Will 404 if id not found */ getHero(id: number): Observable { const url = `${this.heroesUrl}/${id}`; return this.http.get(url).pipe( - tap(_ => this.log(`fetched hero id=${id}`)), - catchError(this.handleError(`getHero id=${id}`)) + tap((_) => this.log(`fetched hero id=${id}`)), + catchError(this.handleError(`getHero id=${id}`)), ); } @@ -60,10 +57,12 @@ export class HeroService { return of([]); } return this.http.get(`${this.heroesUrl}/?name=${term}`).pipe( - tap(x => x.length ? - this.log(`found heroes matching "${term}"`) : - this.log(`no heroes matching "${term}"`)), - catchError(this.handleError('searchHeroes', [])) + tap((x) => + x.length + ? this.log(`found heroes matching "${term}"`) + : this.log(`no heroes matching "${term}"`), + ), + catchError(this.handleError('searchHeroes', [])), ); } @@ -73,7 +72,7 @@ export class HeroService { addHero(hero: Hero): Observable { return this.http.post(this.heroesUrl, hero, this.httpOptions).pipe( tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)), - catchError(this.handleError('addHero')) + catchError(this.handleError('addHero')), ); } @@ -83,16 +82,16 @@ export class HeroService { const url = `${this.heroesUrl}/${id}`; return this.http.delete(url, this.httpOptions).pipe( - tap(_ => this.log(`deleted hero id=${id}`)), - catchError(this.handleError('deleteHero')) + tap((_) => this.log(`deleted hero id=${id}`)), + catchError(this.handleError('deleteHero')), ); } /** PUT: update the hero on the server */ updateHero(hero: Hero): Observable { return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe( - tap(_ => this.log(`updated hero id=${hero.id}`)), - catchError(this.handleError('updateHero')) + tap((_) => this.log(`updated hero id=${hero.id}`)), + catchError(this.handleError('updateHero')), ); } @@ -105,7 +104,6 @@ export class HeroService { */ private handleError(operation = 'operation', result?: T) { return (error: any): Observable => { - // TODO: send the error to remote logging infrastructure console.error(error); // log to console instead diff --git a/adev/src/content/examples/ssr/src/app/heroes/heroes.component.ts b/adev/src/content/examples/ssr/src/app/heroes/heroes.component.ts index 9166135023e..f792c9508d8 100644 --- a/adev/src/content/examples/ssr/src/app/heroes/heroes.component.ts +++ b/adev/src/content/examples/ssr/src/app/heroes/heroes.component.ts @@ -1,43 +1,42 @@ -import { Component, OnInit } from '@angular/core'; -import { NgFor } from '@angular/common'; -import { RouterLink } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {NgFor} from '@angular/common'; +import {RouterLink} from '@angular/router'; -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; +import {Hero} from '../hero'; +import {HeroService} from '../hero.service'; @Component({ standalone: true, selector: 'app-heroes', templateUrl: './heroes.component.html', - imports: [ NgFor, RouterLink ], - styleUrls: ['./heroes.component.css'] + imports: [NgFor, RouterLink], + styleUrls: ['./heroes.component.css'], }) export class HeroesComponent implements OnInit { heroes: Hero[] = []; - constructor(private heroService: HeroService) { } + constructor(private heroService: HeroService) {} ngOnInit() { this.getHeroes(); } getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes); + this.heroService.getHeroes().subscribe((heroes) => (this.heroes = heroes)); } add(name: string): void { name = name.trim(); - if (!name) { return; } - this.heroService.addHero({ name } as Hero) - .subscribe(hero => { - this.heroes.push(hero); - }); + if (!name) { + return; + } + this.heroService.addHero({name} as Hero).subscribe((hero) => { + this.heroes.push(hero); + }); } delete(hero: Hero): void { - this.heroes = this.heroes.filter(h => h !== hero); + this.heroes = this.heroes.filter((h) => h !== hero); this.heroService.deleteHero(hero).subscribe(); } - } diff --git a/adev/src/content/examples/ssr/src/app/in-memory-data.service.ts b/adev/src/content/examples/ssr/src/app/in-memory-data.service.ts index 9402d9e7110..d625a0cb3f5 100644 --- a/adev/src/content/examples/ssr/src/app/in-memory-data.service.ts +++ b/adev/src/content/examples/ssr/src/app/in-memory-data.service.ts @@ -1,6 +1,6 @@ -import { Injectable } from '@angular/core'; -import { InMemoryDbService } from 'angular-in-memory-web-api'; -import { Hero } from './hero'; +import {Injectable} from '@angular/core'; +import {InMemoryDbService} from 'angular-in-memory-web-api'; +import {Hero} from './hero'; @Injectable({ providedIn: 'root', @@ -8,15 +8,15 @@ import { Hero } from './hero'; export class InMemoryDataService implements InMemoryDbService { createDb() { const heroes = [ - { id: 12, name: 'Dr. Nice' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr. IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } + {id: 12, name: 'Dr. Nice'}, + {id: 13, name: 'Bombasto'}, + {id: 14, name: 'Celeritas'}, + {id: 15, name: 'Magneta'}, + {id: 16, name: 'RubberMan'}, + {id: 17, name: 'Dynama'}, + {id: 18, name: 'Dr. IQ'}, + {id: 19, name: 'Magma'}, + {id: 20, name: 'Tornado'}, ]; return {heroes}; } @@ -27,6 +27,6 @@ export class InMemoryDataService implements InMemoryDbService { // if the heroes array is not empty, the method below returns the highest // hero id + 1. genId(heroes: Hero[]): number { - return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11; + return heroes.length > 0 ? Math.max(...heroes.map((hero) => hero.id)) + 1 : 11; } } diff --git a/adev/src/content/examples/ssr/src/app/message.service.ts b/adev/src/content/examples/ssr/src/app/message.service.ts index 30614a8af4f..53b4cfcc7e7 100644 --- a/adev/src/content/examples/ssr/src/app/message.service.ts +++ b/adev/src/content/examples/ssr/src/app/message.service.ts @@ -1,6 +1,6 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -@Injectable({ providedIn: 'root' }) +@Injectable({providedIn: 'root'}) export class MessageService { messages: string[] = []; diff --git a/adev/src/content/examples/ssr/src/app/messages/messages.component.ts b/adev/src/content/examples/ssr/src/app/messages/messages.component.ts index 974ca5c7f5d..6f2ce99aa33 100644 --- a/adev/src/content/examples/ssr/src/app/messages/messages.component.ts +++ b/adev/src/content/examples/ssr/src/app/messages/messages.component.ts @@ -1,18 +1,15 @@ -import { Component } from '@angular/core'; -import { NgFor, NgIf } from '@angular/common'; +import {Component} from '@angular/core'; +import {NgFor, NgIf} from '@angular/common'; - -import { MessageService } from '../message.service'; +import {MessageService} from '../message.service'; @Component({ standalone: true, selector: 'app-messages', templateUrl: './messages.component.html', - imports: [ NgFor, NgIf ], - styleUrls: ['./messages.component.css'] + imports: [NgFor, NgIf], + styleUrls: ['./messages.component.css'], }) export class MessagesComponent { - constructor(public messageService: MessageService) {} - } diff --git a/adev/src/content/examples/ssr/src/app/mock-heroes.ts b/adev/src/content/examples/ssr/src/app/mock-heroes.ts index 33729c43e37..8761b672e72 100644 --- a/adev/src/content/examples/ssr/src/app/mock-heroes.ts +++ b/adev/src/content/examples/ssr/src/app/mock-heroes.ts @@ -1,13 +1,13 @@ -import { Hero } from './hero'; +import {Hero} from './hero'; export const HEROES: Hero[] = [ - { id: 12, name: 'Dr. Nice' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr. IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } + {id: 12, name: 'Dr. Nice'}, + {id: 13, name: 'Bombasto'}, + {id: 14, name: 'Celeritas'}, + {id: 15, name: 'Magneta'}, + {id: 16, name: 'RubberMan'}, + {id: 17, name: 'Dynama'}, + {id: 18, name: 'Dr. IQ'}, + {id: 19, name: 'Magma'}, + {id: 20, name: 'Tornado'}, ]; diff --git a/adev/src/content/examples/ssr/src/main.server.ts b/adev/src/content/examples/ssr/src/main.server.ts index 804e9284285..bd1c56ea01c 100644 --- a/adev/src/content/examples/ssr/src/main.server.ts +++ b/adev/src/content/examples/ssr/src/main.server.ts @@ -1,6 +1,6 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; -import { config } from './app/app.config.server'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {config} from './app/app.config.server'; const bootstrap = () => bootstrapApplication(AppComponent, config); export default bootstrap; diff --git a/adev/src/content/examples/ssr/src/main.ts b/adev/src/content/examples/ssr/src/main.ts index ca4b4a154d9..bf030b9489d 100644 --- a/adev/src/content/examples/ssr/src/main.ts +++ b/adev/src/content/examples/ssr/src/main.ts @@ -1,6 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; -import { appConfig } from './app/app.config'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; -bootstrapApplication(AppComponent, appConfig) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/adev/src/content/examples/structural-directives/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/structural-directives/e2e/src/app.e2e-spec.ts index e053a7ca473..ea1caae4c35 100644 --- a/adev/src/content/examples/structural-directives/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/structural-directives/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Structural Directives', () => { - beforeAll(() => browser.get('')); it('first div should show hero name with *ngIf', async () => { @@ -36,7 +35,9 @@ describe('Structural Directives', () => { }); it('appUnless should show 1 paragraph (B) after toggling condition', async () => { - const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0); + const toggleConditionButton = element + .all(by.cssContainingText('button', 'Toggle condition')) + .get(0); const paragraph = element.all(by.css('p.unless')); await toggleConditionButton.click(); @@ -45,4 +46,3 @@ describe('Structural Directives', () => { expect(await paragraph.get(0).getText()).toContain('(B)'); }); }); - diff --git a/adev/src/content/examples/structural-directives/src/app/hero.ts b/adev/src/content/examples/structural-directives/src/app/hero.ts index 27b4a79ab1d..56bc4a0f01f 100644 --- a/adev/src/content/examples/structural-directives/src/app/hero.ts +++ b/adev/src/content/examples/structural-directives/src/app/hero.ts @@ -6,8 +6,8 @@ export interface Hero { } export const heroes: Hero[] = [ - { id: 1, name: 'Dr. Nice', emotion: 'happy'}, - { id: 2, name: 'RubberMan', emotion: 'sad' }, - { id: 3, name: 'Windstorm', emotion: 'confused' }, - { id: 4, name: 'Magneta'} + {id: 1, name: 'Dr. Nice', emotion: 'happy'}, + {id: 2, name: 'RubberMan', emotion: 'sad'}, + {id: 3, name: 'Windstorm', emotion: 'confused'}, + {id: 4, name: 'Magneta'}, ]; diff --git a/adev/src/content/examples/structural-directives/src/app/loading-state.ts b/adev/src/content/examples/structural-directives/src/app/loading-state.ts index 5213eb22777..a5adbfe2d29 100644 --- a/adev/src/content/examples/structural-directives/src/app/loading-state.ts +++ b/adev/src/content/examples/structural-directives/src/app/loading-state.ts @@ -1,5 +1,5 @@ -export type Loaded = { type: 'loaded', data: T }; +export type Loaded = {type: 'loaded'; data: T}; -export type Loading = { type: 'loading' }; +export type Loading = {type: 'loading'}; export type LoadingState = Loaded | Loading; diff --git a/adev/src/content/examples/styleguide/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/styleguide/e2e/src/app.e2e-spec.ts index b88ac84eef5..103922a8a06 100644 --- a/adev/src/content/examples/styleguide/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/styleguide/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Style Guide', () => { it('01-01', async () => { diff --git a/adev/src/content/examples/styleguide/src/01-01/app/app.component.ts b/adev/src/content/examples/styleguide/src/01-01/app/app.component.ts index 7e7444d3aed..7c653259327 100644 --- a/adev/src/content/examples/styleguide/src/01-01/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/01-01/app/app.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { HeroService } from './heroes'; +import {HeroService} from './heroes'; @Component({ selector: 'toh-app', @@ -9,6 +9,6 @@ import { HeroService } from './heroes'; `, styleUrls: ['./app.component.css'], - providers: [HeroService] + providers: [HeroService], }) export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/01-01/app/app.module.ts b/adev/src/content/examples/styleguide/src/01-01/app/app.module.ts index 53f29ea8cba..b5d9a57baa2 100644 --- a/adev/src/content/examples/styleguide/src/01-01/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/01-01/app/app.module.ts @@ -1,27 +1,22 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; +import {AppComponent} from './app.component'; +import {HeroesComponent} from './heroes/heroes.component'; @NgModule({ imports: [ BrowserModule, // #enddocregion - RouterModule.forChild([{ path: '01-01', component: AppComponent }]) + RouterModule.forChild([{path: '01-01', component: AppComponent}]), // #docregion ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ], - bootstrap: [ AppComponent ] + declarations: [AppComponent, HeroesComponent], + exports: [AppComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} // #enddocregion - - diff --git a/adev/src/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts b/adev/src/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts index f721b1630b3..31ca22e93a7 100644 --- a/adev/src/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts @@ -1,8 +1,8 @@ // #docregion /* avoid */ -import { Component, NgModule, OnInit } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {Component, NgModule, OnInit} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; interface Hero { id: number; @@ -15,7 +15,7 @@ interface Hero {

    {{title}}

    {{heroes | json}}
    `, - styleUrls: ['../app.component.css'] + styleUrls: ['../app.component.css'], }) export class AppComponent implements OnInit { title = 'Tour of Heroes'; @@ -23,7 +23,7 @@ export class AppComponent implements OnInit { heroes: Hero[] = []; ngOnInit() { - getHeroes().then(heroes => (this.heroes = heroes)); + getHeroes().then((heroes) => (this.heroes = heroes)); } } @@ -31,16 +31,16 @@ export class AppComponent implements OnInit { imports: [BrowserModule], declarations: [AppComponent], exports: [AppComponent], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) export class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule); const HEROES: Hero[] = [ - { id: 1, name: 'Bombasto' }, - { id: 2, name: 'Tornado' }, - { id: 3, name: 'Magneta' } + {id: 1, name: 'Bombasto'}, + {id: 2, name: 'Tornado'}, + {id: 3, name: 'Magneta'}, ]; function getHeroes(): Promise { diff --git a/adev/src/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts b/adev/src/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts index 9e3546db900..eb4e4755c3f 100644 --- a/adev/src/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts +++ b/adev/src/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts @@ -1,13 +1,13 @@ // #docregion -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; -import { Hero, HeroService } from './shared'; +import {Hero, HeroService} from './shared'; @Component({ selector: 'toh-heroes', template: ` 
    {{heroes | json}}
    - ` + `, }) export class HeroesComponent implements OnInit { heroes: Hero[] = []; @@ -15,7 +15,6 @@ export class HeroesComponent implements OnInit { constructor(private heroService: HeroService) {} ngOnInit() { - this.heroService.getHeroes() - .then(heroes => this.heroes = heroes); + this.heroService.getHeroes().then((heroes) => (this.heroes = heroes)); } } diff --git a/adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts b/adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts index d94e5bacac5..f81be08be5c 100644 --- a/adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts +++ b/adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts @@ -1,7 +1,7 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { HEROES } from './mock-heroes'; +import {HEROES} from './mock-heroes'; @Injectable() export class HeroService { diff --git a/adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts b/adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts index f3a0ef7ce4e..ffb0711c810 100644 --- a/adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts +++ b/adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts @@ -1,8 +1,8 @@ // #docregion -import { Hero } from './hero.model'; +import {Hero} from './hero.model'; export const HEROES: Hero[] = [ - { id: 1, name: 'Bombasto' }, - { id: 2, name: 'Tornado' }, - { id: 3, name: 'Magneta' } + {id: 1, name: 'Bombasto'}, + {id: 2, name: 'Tornado'}, + {id: 3, name: 'Magneta'}, ]; diff --git a/adev/src/content/examples/styleguide/src/01-01/main.ts b/adev/src/content/examples/styleguide/src/01-01/main.ts index f332d1d2451..563989dc483 100644 --- a/adev/src/content/examples/styleguide/src/01-01/main.ts +++ b/adev/src/content/examples/styleguide/src/01-01/main.ts @@ -1,6 +1,6 @@ // #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/styleguide/src/02-05/app/app.component.ts b/adev/src/content/examples/styleguide/src/02-05/app/app.component.ts index 66ebfa954e5..6ce907aae84 100644 --- a/adev/src/content/examples/styleguide/src/02-05/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/02-05/app/app.component.ts @@ -1,10 +1,10 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'toh-app', template: ` Tour of Heroes - ` + `, }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/02-05/app/app.module.ts b/adev/src/content/examples/styleguide/src/02-05/app/app.module.ts index 306ec125e03..03060d627aa 100644 --- a/adev/src/content/examples/styleguide/src/02-05/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/02-05/app/app.module.ts @@ -1,23 +1,21 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; @NgModule({ imports: [ BrowserModule, // #enddocregion - RouterModule.forChild([{ path: '02-05', component: AppComponent }]) + RouterModule.forChild([{path: '02-05', component: AppComponent}]), // #docregion ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ], - bootstrap: [ AppComponent ] + declarations: [AppComponent], + exports: [AppComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} // #enddocregion diff --git a/adev/src/content/examples/styleguide/src/02-05/main.ts b/adev/src/content/examples/styleguide/src/02-05/main.ts index adf2aa92c27..b6e094913fa 100644 --- a/adev/src/content/examples/styleguide/src/02-05/main.ts +++ b/adev/src/content/examples/styleguide/src/02-05/main.ts @@ -1,4 +1,4 @@ -import { AppComponent } from './app/app.component'; -import { bootstrapApplication } from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {bootstrapApplication} from '@angular/platform-browser'; bootstrapApplication(AppComponent); diff --git a/adev/src/content/examples/styleguide/src/02-07/app/app.component.ts b/adev/src/content/examples/styleguide/src/02-07/app/app.component.ts index c82e12624d8..4d5f6ca6e7e 100644 --- a/adev/src/content/examples/styleguide/src/02-07/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/02-07/app/app.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', template: ` - ` + `, }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/02-07/app/app.module.ts b/adev/src/content/examples/styleguide/src/02-07/app/app.module.ts index 4320fe67d5d..b377353e0c8 100644 --- a/adev/src/content/examples/styleguide/src/02-07/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/02-07/app/app.module.ts @@ -1,19 +1,13 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroComponent } from './heroes'; -import { UsersComponent } from './users'; +import {AppComponent} from './app.component'; +import {HeroComponent} from './heroes'; +import {UsersComponent} from './users'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '02-07', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroComponent, - UsersComponent - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '02-07', component: AppComponent}])], + declarations: [AppComponent, HeroComponent, UsersComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts b/adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts index e3fa1ea78a6..4b614667cc8 100644 --- a/adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts @@ -1,5 +1,5 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example /* avoid */ @@ -9,5 +9,5 @@ import { Component } from '@angular/core'; selector: 'hero', template: '', }) -export class HeroComponent { } +export class HeroComponent {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts b/adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts index ceff9cab513..d56ebb24f08 100644 --- a/adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts +++ b/adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example @Component({ @@ -10,5 +10,5 @@ import { Component } from '@angular/core'; standalone: true, selector: 'toh-hero', }) -export class HeroComponent { } +export class HeroComponent {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts b/adev/src/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts index 2888a7be128..4af291b697f 100644 --- a/adev/src/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts @@ -1,5 +1,5 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example /* avoid */ @@ -9,5 +9,5 @@ import { Component } from '@angular/core'; selector: 'users', template: '', }) -export class UsersComponent { } +export class UsersComponent {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/02-07/app/users/users.component.ts b/adev/src/content/examples/styleguide/src/02-07/app/users/users.component.ts index 049c86f9564..1b97cd235f7 100644 --- a/adev/src/content/examples/styleguide/src/02-07/app/users/users.component.ts +++ b/adev/src/content/examples/styleguide/src/02-07/app/users/users.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example @Component({ @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; template: '
    users component
    ', // #docregion example standalone: true, - selector: 'admin-users' + selector: 'admin-users', }) -export class UsersComponent { } +export class UsersComponent {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/02-08/app/app.component.ts b/adev/src/content/examples/styleguide/src/02-08/app/app.component.ts index bf27aeaf8a0..053d35a96a2 100644 --- a/adev/src/content/examples/styleguide/src/02-08/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/02-08/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - template: '' + template: '', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/02-08/app/app.module.ts b/adev/src/content/examples/styleguide/src/02-08/app/app.module.ts index e840cc50a53..5a67931fcb1 100644 --- a/adev/src/content/examples/styleguide/src/02-08/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/02-08/app/app.module.ts @@ -1,19 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { InputHighlightDirective, - ValidateDirective } from './shared'; +import {AppComponent} from './app.component'; +import {InputHighlightDirective, ValidateDirective} from './shared'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '02-08', component: AppComponent }]) - ], - declarations: [ - AppComponent, - InputHighlightDirective, - ValidateDirective - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '02-08', component: AppComponent}])], + declarations: [AppComponent, InputHighlightDirective, ValidateDirective], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts b/adev/src/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts index f2ead8eb6de..0e4f7786cc9 100644 --- a/adev/src/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts +++ b/adev/src/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts @@ -1,8 +1,8 @@ // #docregion -import { Directive, ElementRef } from '@angular/core'; +import {Directive, ElementRef} from '@angular/core'; // eslint-disable-next-line @angular-eslint/directive-selector -@Directive({ selector: 'input'}) +@Directive({selector: 'input'}) /** Highlight the attached input text element in blue */ export class InputHighlightDirective { constructor(el: ElementRef) { diff --git a/adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts b/adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts index b5bd957eb7d..6e03aa700c0 100644 --- a/adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts +++ b/adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts @@ -1,5 +1,5 @@ // #docregion -import { Directive } from '@angular/core'; +import {Directive} from '@angular/core'; // #docregion example /* avoid */ @@ -7,5 +7,5 @@ import { Directive } from '@angular/core'; standalone: true, selector: '[validate]', }) -export class ValidateDirective { } +export class ValidateDirective {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts b/adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts index be8e64e2920..31da1a80255 100644 --- a/adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts +++ b/adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts @@ -1,10 +1,10 @@ // #docregion -import { Directive } from '@angular/core'; +import {Directive} from '@angular/core'; // #docregion example @Directive({ standalone: true, selector: '[tohValidate]', }) -export class ValidateDirective { } +export class ValidateDirective {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/04-08/app/app.component.ts b/adev/src/content/examples/styleguide/src/04-08/app/app.component.ts index fdd8e6ef561..05f378e927f 100644 --- a/adev/src/content/examples/styleguide/src/04-08/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/04-08/app/app.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - template: '' + template: '', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/04-08/app/app.module.ts b/adev/src/content/examples/styleguide/src/04-08/app/app.module.ts index 1dc0c048d5c..95ee161c830 100644 --- a/adev/src/content/examples/styleguide/src/04-08/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/04-08/app/app.module.ts @@ -1,27 +1,24 @@ // #docplaster // #docregion // #docregion example -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; // #enddocregion example -import { RouterModule } from '@angular/router'; +import {RouterModule} from '@angular/router'; // #docregion example -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; +import {AppComponent} from './app.component'; +import {HeroesComponent} from './heroes/heroes.component'; @NgModule({ imports: [ BrowserModule, -// #enddocregion example - RouterModule.forChild([{ path: '04-08', component: AppComponent }]) -// #docregion example + // #enddocregion example + RouterModule.forChild([{path: '04-08', component: AppComponent}]), + // #docregion example ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ] + declarations: [AppComponent, HeroesComponent], + exports: [AppComponent], }) export class AppModule {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts b/adev/src/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts index b60652d1e4a..ea3ca57e1fe 100644 --- a/adev/src/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts +++ b/adev/src/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'toh-heroes', - templateUrl: './heroes.component.html' + templateUrl: './heroes.component.html', }) export class HeroesComponent {} diff --git a/adev/src/content/examples/styleguide/src/04-10/app/app.component.ts b/adev/src/content/examples/styleguide/src/04-10/app/app.component.ts index fdd8e6ef561..05f378e927f 100644 --- a/adev/src/content/examples/styleguide/src/04-10/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/04-10/app/app.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - template: '' + template: '', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/04-10/app/app.module.ts b/adev/src/content/examples/styleguide/src/04-10/app/app.module.ts index 34b229f6ec2..802606f1f71 100644 --- a/adev/src/content/examples/styleguide/src/04-10/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/04-10/app/app.module.ts @@ -1,21 +1,18 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { SharedModule } from './shared/shared.module'; +import {AppComponent} from './app.component'; +import {HeroesComponent} from './heroes/heroes.component'; +import {SharedModule} from './shared/shared.module'; @NgModule({ imports: [ BrowserModule, SharedModule, - RouterModule.forChild([{ path: '04-10', component: AppComponent }]) + RouterModule.forChild([{path: '04-10', component: AppComponent}]), ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ] + declarations: [AppComponent, HeroesComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts b/adev/src/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts index 376567650e3..52a94922f81 100644 --- a/adev/src/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts +++ b/adev/src/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts @@ -1,27 +1,25 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { FilterTextService } from '../shared/filter-text/filter-text.service'; +import {FilterTextService} from '../shared/filter-text/filter-text.service'; @Component({ selector: 'toh-heroes', - templateUrl: './heroes.component.html' + templateUrl: './heroes.component.html', }) export class HeroesComponent { - heroes = [ - { id: 1, name: 'Windstorm' }, - { id: 2, name: 'Bombasto' }, - { id: 3, name: 'Magneta' }, - { id: 4, name: 'Tornado' } + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'Bombasto'}, + {id: 3, name: 'Magneta'}, + {id: 4, name: 'Tornado'}, ]; filteredHeroes = this.heroes; - constructor(private filterService: FilterTextService) { } + constructor(private filterService: FilterTextService) {} filterChanged(searchText: string) { this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes); } } - diff --git a/adev/src/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts b/adev/src/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts index 2fb0e9c0f44..737af82c244 100644 --- a/adev/src/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts +++ b/adev/src/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts @@ -1,9 +1,10 @@ // #docregion -import { Component, EventEmitter, Output } from '@angular/core'; +import {Component, EventEmitter, Output} from '@angular/core'; @Component({ selector: 'toh-filter-text', - template: '' + template: + '', }) export class FilterTextComponent { @Output() changed: EventEmitter; diff --git a/adev/src/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts b/adev/src/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts index 131c79ad649..29546cb5c51 100644 --- a/adev/src/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts +++ b/adev/src/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts @@ -1,5 +1,5 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable() export class FilterTextService { @@ -11,7 +11,7 @@ export class FilterTextService { let filteredList: any[]; if (data && props && originalList) { data = data.toLowerCase(); - const filtered = originalList.filter(item => { + const filtered = originalList.filter((item) => { let match = false; for (const prop of props) { if (item[prop].toString().toLowerCase().indexOf(data) > -1) { diff --git a/adev/src/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts b/adev/src/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts index 5019bcb234f..e312dbeb784 100644 --- a/adev/src/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts +++ b/adev/src/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts @@ -1,7 +1,7 @@ // #docregion -import { Pipe, PipeTransform } from '@angular/core'; +import {Pipe, PipeTransform} from '@angular/core'; -@Pipe({ name: 'initCaps' }) +@Pipe({name: 'initCaps'}) export class InitCapsPipe implements PipeTransform { transform = (value: string) => value; } diff --git a/adev/src/content/examples/styleguide/src/04-10/app/shared/shared.module.ts b/adev/src/content/examples/styleguide/src/04-10/app/shared/shared.module.ts index 1b698a052d1..3bde8d27d79 100644 --- a/adev/src/content/examples/styleguide/src/04-10/app/shared/shared.module.ts +++ b/adev/src/content/examples/styleguide/src/04-10/app/shared/shared.module.ts @@ -1,24 +1,16 @@ // #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { FilterTextComponent } from './filter-text/filter-text.component'; -import { FilterTextService } from './filter-text/filter-text.service'; -import { InitCapsPipe } from './init-caps.pipe'; +import {FilterTextComponent} from './filter-text/filter-text.component'; +import {FilterTextService} from './filter-text/filter-text.service'; +import {InitCapsPipe} from './init-caps.pipe'; @NgModule({ imports: [CommonModule, FormsModule], - declarations: [ - FilterTextComponent, - InitCapsPipe - ], + declarations: [FilterTextComponent, InitCapsPipe], providers: [FilterTextService], - exports: [ - CommonModule, - FormsModule, - FilterTextComponent, - InitCapsPipe - ] + exports: [CommonModule, FormsModule, FilterTextComponent, InitCapsPipe], }) -export class SharedModule { } +export class SharedModule {} diff --git a/adev/src/content/examples/styleguide/src/05-02/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-02/app/app.component.ts index 7c9f37919f4..9638c692e49 100644 --- a/adev/src/content/examples/styleguide/src/05-02/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-02/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/05-02/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-02/app/app.module.ts index 1c458e2ca17..875306c6220 100644 --- a/adev/src/content/examples/styleguide/src/05-02/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-02/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroButtonComponent} from './heroes'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-02', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '05-02', component: AppComponent}])], + declarations: [AppComponent, HeroButtonComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts index bf996efd640..9b0d28091a4 100644 --- a/adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,12 +1,12 @@ // #docplaster -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example /* avoid */ @Component({ standalone: true, selector: 'tohHeroButton', - templateUrl: './hero-button.component.html' + templateUrl: './hero-button.component.html', }) -export class HeroButtonComponent { } +export class HeroButtonComponent {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts index 62271a3f153..79d76f960c8 100644 --- a/adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts +++ b/adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example @Component({ standalone: true, selector: 'toh-hero-button', - templateUrl: './hero-button.component.html' + templateUrl: './hero-button.component.html', }) -export class HeroButtonComponent { } +export class HeroButtonComponent {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/05-03/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-03/app/app.component.ts index 7c9f37919f4..9638c692e49 100644 --- a/adev/src/content/examples/styleguide/src/05-03/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-03/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/05-03/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-03/app/app.module.ts index 1b754e3ee50..10b4a2236d5 100644 --- a/adev/src/content/examples/styleguide/src/05-03/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-03/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroButtonComponent} from './heroes'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-03', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '05-03', component: AppComponent}])], + declarations: [AppComponent, HeroButtonComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts index d7f03e6bfe4..d639470c002 100644 --- a/adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example /* avoid */ @Component({ standalone: true, selector: '[tohHeroButton]', - templateUrl: './hero-button.component.html' + templateUrl: './hero-button.component.html', }) -export class HeroButtonComponent { } +export class HeroButtonComponent {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts index 62271a3f153..79d76f960c8 100644 --- a/adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts +++ b/adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example @Component({ standalone: true, selector: 'toh-hero-button', - templateUrl: './hero-button.component.html' + templateUrl: './hero-button.component.html', }) -export class HeroButtonComponent { } +export class HeroButtonComponent {} // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/05-04/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-04/app/app.component.ts index a60f381c00d..680c08dd7fc 100644 --- a/adev/src/content/examples/styleguide/src/05-04/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-04/app/app.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; -import { HeroesComponent } from './heroes'; +import {Component} from '@angular/core'; +import {HeroesComponent} from './heroes'; @Component({ standalone: true, selector: 'sg-app', template: '', - imports: [HeroesComponent] + imports: [HeroesComponent], }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/05-04/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-04/app/app.module.ts index c925f6c7e03..b66271c7f1d 100644 --- a/adev/src/content/examples/styleguide/src/05-04/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-04/app/app.module.ts @@ -1,21 +1,15 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes'; -import { HeroService } from './heroes/shared'; +import {AppComponent} from './app.component'; +import {HeroesComponent} from './heroes'; +import {HeroService} from './heroes/shared'; @NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-04', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ], - providers: [ HeroService ] + imports: [BrowserModule, RouterModule.forChild([{path: '05-04', component: AppComponent}])], + declarations: [AppComponent, HeroesComponent], + exports: [AppComponent], + providers: [HeroService], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts index 13014e4b3c5..8f7cd9d23dd 100644 --- a/adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; +import {Component} from '@angular/core'; +import {Observable} from 'rxjs'; -import { Hero, HeroService } from './shared'; -import { AsyncPipe, NgFor, NgIf, UpperCasePipe } from '@angular/common'; +import {Hero, HeroService} from './shared'; +import {AsyncPipe, NgFor, NgIf, UpperCasePipe} from '@angular/common'; // #docregion example /* avoid */ @@ -27,7 +27,8 @@ import { AsyncPipe, NgFor, NgIf, UpperCasePipe } from '@angular/common'; } `, - styles: [` + styles: [ + ` .heroes { margin: 0 0 2em 0; list-style-type: none; @@ -58,8 +59,9 @@ import { AsyncPipe, NgFor, NgIf, UpperCasePipe } from '@angular/common'; margin-right: .8em; border-radius: 4px 0 0 4px; } - `], - imports: [NgFor, NgIf, AsyncPipe, UpperCasePipe] + `, + ], + imports: [NgFor, NgIf, AsyncPipe, UpperCasePipe], }) export class HeroesComponent { heroes: Observable; diff --git a/adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts b/adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts index f7b1038c8bd..58fc3c3d774 100644 --- a/adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts +++ b/adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; +import {Component} from '@angular/core'; +import {Observable} from 'rxjs'; -import { Hero, HeroService } from './shared'; -import { AsyncPipe, NgFor, NgIf, UpperCasePipe } from '@angular/common'; +import {Hero, HeroService} from './shared'; +import {AsyncPipe, NgFor, NgIf, UpperCasePipe} from '@angular/common'; // #docregion example @Component({ diff --git a/adev/src/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts b/adev/src/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts index 78b3e247c23..d2bfcc3cd7c 100644 --- a/adev/src/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts +++ b/adev/src/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts @@ -1,13 +1,12 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; -import { Observable } from 'rxjs'; +import {Observable} from 'rxjs'; -import { Hero } from './hero.model'; +import {Hero} from './hero.model'; @Injectable() export class HeroService { - constructor(private http: HttpClient) {} getHeroes(): Observable { diff --git a/adev/src/content/examples/styleguide/src/05-12/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-12/app/app.component.ts index 8c1151f3439..51ece313766 100644 --- a/adev/src/content/examples/styleguide/src/05-12/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-12/app/app.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component'; +import {Component} from '@angular/core'; +import {HeroButtonComponent} from './heroes/shared/hero-button/hero-button.component'; @Component({ standalone: true, @@ -7,4 +7,4 @@ import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.com template: '', imports: [HeroButtonComponent], }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/05-12/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-12/app/app.module.ts index 5177b2cc64e..4211053c4ff 100644 --- a/adev/src/content/examples/styleguide/src/05-12/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-12/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroButtonComponent} from './heroes'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-12', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '05-12', component: AppComponent}])], + declarations: [AppComponent, HeroButtonComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts index a91ec4287b7..8c7df185dba 100644 --- a/adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,5 +1,5 @@ // #docregion -import { Component, EventEmitter } from '@angular/core'; +import {Component, EventEmitter} from '@angular/core'; // #docregion example /* avoid */ @@ -7,15 +7,11 @@ import { Component, EventEmitter } from '@angular/core'; standalone: true, selector: 'toh-hero-button', template: ``, - inputs: [ - 'label' - ], - outputs: [ - 'heroChange' - ] + inputs: ['label'], + outputs: ['heroChange'], }) export class HeroButtonComponent { heroChange = new EventEmitter(); - label: string = ""; + label: string = ''; } // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts index 8cd58a5c091..0b758f6aa6e 100644 --- a/adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts +++ b/adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,11 +1,11 @@ // #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; // #docregion example @Component({ standalone: true, selector: 'toh-hero-button', - template: `` + template: ``, }) export class HeroButtonComponent { @Output() heroChange = new EventEmitter(); diff --git a/adev/src/content/examples/styleguide/src/05-13/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-13/app/app.component.ts index 3b440ba42ec..fdf9158afc9 100644 --- a/adev/src/content/examples/styleguide/src/05-13/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-13/app/app.component.ts @@ -1,10 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) export class AppComponent { - doSomething() {} } diff --git a/adev/src/content/examples/styleguide/src/05-13/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-13/app/app.module.ts index 7ebe91dbbcf..5f88c94ff39 100644 --- a/adev/src/content/examples/styleguide/src/05-13/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-13/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroButtonComponent, HeroHighlightDirective } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroButtonComponent, HeroHighlightDirective} from './heroes'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-13', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent, HeroHighlightDirective - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '05-13', component: AppComponent}])], + declarations: [AppComponent, HeroButtonComponent, HeroHighlightDirective], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts index 82928b83c58..5c6c0a695cb 100644 --- a/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,11 +1,11 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; // #docregion example /* avoid pointless aliasing */ @Component({ standalone: true, selector: 'toh-hero-button', - template: `` + template: ``, }) export class HeroButtonComponent { // Pointless aliases diff --git a/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts b/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts index 40df7d0edb7..ddbc69e6217 100644 --- a/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts +++ b/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,11 +1,11 @@ // #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; // #docregion example @Component({ standalone: true, selector: 'toh-hero-button', - template: `` + template: ``, }) export class HeroButtonComponent { // No aliases diff --git a/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts b/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts index 33b4c65ceb0..7e4f4530501 100644 --- a/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts +++ b/adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts @@ -1,5 +1,5 @@ // #docregion -import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; +import {Directive, ElementRef, Input, OnChanges} from '@angular/core'; // eslint-disable-next-line @angular-eslint/directive-selector @Directive({ @@ -7,11 +7,10 @@ import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; selector: '[heroHighlight]', }) export class HeroHighlightDirective implements OnChanges { - // Aliased because `color` is a better property name than `heroHighlight` @Input('heroHighlight') color = ''; - constructor(private el: ElementRef) { } + constructor(private el: ElementRef) {} ngOnChanges() { this.el.nativeElement.style.backgroundColor = this.color || 'yellow'; diff --git a/adev/src/content/examples/styleguide/src/05-14/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-14/app/app.component.ts index 8ed6da4c822..3dc51c50ac2 100644 --- a/adev/src/content/examples/styleguide/src/05-14/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-14/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - template: `` + template: ``, }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/05-14/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-14/app/app.module.ts index 0b294573d27..d26bd2dae8a 100644 --- a/adev/src/content/examples/styleguide/src/05-14/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-14/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { ToastComponent } from './shared'; +import {AppComponent} from './app.component'; +import {ToastComponent} from './shared'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-14', component: AppComponent }]) - ], - declarations: [ - AppComponent, - ToastComponent - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '05-14', component: AppComponent}])], + declarations: [AppComponent, ToastComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts index 101652bb91c..83ffd7549b2 100644 --- a/adev/src/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts @@ -1,13 +1,12 @@ // #docregion -import { OnInit } from '@angular/core'; +import {OnInit} from '@angular/core'; // #docregion example /* avoid */ export class ToastComponent implements OnInit { - private defaults = { title: '', - message: 'May the Force be with you' + message: 'May the Force be with you', }; message: string; title: string; @@ -20,7 +19,7 @@ export class ToastComponent implements OnInit { // private methods private hide() { this.toastElement.style.opacity = 0; - setTimeout(() => this.toastElement.style.zIndex = 0, 400); + setTimeout(() => (this.toastElement.style.zIndex = 0), 400); } activate(message = this.defaults.message, title = this.defaults.title) { diff --git a/adev/src/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts b/adev/src/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts index 4feaa972692..b8c0ce621b2 100644 --- a/adev/src/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts +++ b/adev/src/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts @@ -1,9 +1,9 @@ // #docregion -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; @Component({ selector: 'toh-toast', - template: `...` + template: `...`, }) // #docregion example export class ToastComponent implements OnInit { @@ -14,7 +14,7 @@ export class ToastComponent implements OnInit { // private fields private defaults = { title: '', - message: 'May the Force be with you' + message: 'May the Force be with you', }; private toastElement: any; @@ -32,7 +32,7 @@ export class ToastComponent implements OnInit { // private methods private hide() { this.toastElement.style.opacity = 0; - setTimeout(() => this.toastElement.style.zIndex = 0, 400); + setTimeout(() => (this.toastElement.style.zIndex = 0), 400); } private show() { diff --git a/adev/src/content/examples/styleguide/src/05-15/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-15/app/app.component.ts index 91b569b1e7e..c248f524363 100644 --- a/adev/src/content/examples/styleguide/src/05-15/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-15/app/app.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { HeroService } from './heroes'; +import {HeroService} from './heroes'; @Component({ selector: 'sg-app', template: '', - providers: [HeroService] + providers: [HeroService], }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/05-15/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-15/app/app.module.ts index 9bd4b8c9a2a..0a2c86f9558 100644 --- a/adev/src/content/examples/styleguide/src/05-15/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-15/app/app.module.ts @@ -1,19 +1,13 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroListComponent } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroListComponent} from './heroes'; @NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-15', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroListComponent - ], - exports: [ AppComponent ] + imports: [BrowserModule, RouterModule.forChild([{path: '05-15', component: AppComponent}])], + declarations: [AppComponent, HeroListComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts index 5458365d8d2..46323fa8ac7 100644 --- a/adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts @@ -1,20 +1,20 @@ // #docregion /* avoid */ -import { Component, OnInit } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import {Component, OnInit} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; -import { Observable } from 'rxjs'; -import { catchError, finalize } from 'rxjs/operators'; +import {Observable} from 'rxjs'; +import {catchError, finalize} from 'rxjs/operators'; -import { Hero } from '../shared/hero.model'; +import {Hero} from '../shared/hero.model'; const heroesUrl = 'http://angular.io'; @Component({ standalone: true, selector: 'toh-hero-list', - template: `...` + template: `...`, }) export class HeroListComponent implements OnInit { heroes: Hero[]; @@ -25,10 +25,13 @@ export class HeroListComponent implements OnInit { getHeroes() { this.heroes = []; - this.http.get(heroesUrl).pipe( - catchError(this.catchBadResponse), - finalize(() => this.hideSpinner()) - ).subscribe((heroes: Hero[]) => this.heroes = heroes); + this.http + .get(heroesUrl) + .pipe( + catchError(this.catchBadResponse), + finalize(() => this.hideSpinner()), + ) + .subscribe((heroes: Hero[]) => (this.heroes = heroes)); } ngOnInit() { this.getHeroes(); diff --git a/adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts b/adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts index dced12f834d..d8eecec4914 100644 --- a/adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts +++ b/adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts @@ -1,24 +1,22 @@ // #docregion example -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; -import { Hero, HeroService } from '../shared'; +import {Hero, HeroService} from '../shared'; @Component({ standalone: true, selector: 'toh-hero-list', - template: `...` + template: `...`, }) export class HeroListComponent implements OnInit { heroes: Hero[] = []; - constructor(private heroService: HeroService) { } + constructor(private heroService: HeroService) {} getHeroes() { this.heroes = []; - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes); + this.heroService.getHeroes().subscribe((heroes) => (this.heroes = heroes)); } ngOnInit() { this.getHeroes(); } } // #enddocregion example - diff --git a/adev/src/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts b/adev/src/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts index 94bdf2615cb..f0f20be054c 100644 --- a/adev/src/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts +++ b/adev/src/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts @@ -1,9 +1,9 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { of } from 'rxjs'; +import {of} from 'rxjs'; -import { Hero } from './hero.model'; +import {Hero} from './hero.model'; @Injectable() export class HeroService { diff --git a/adev/src/content/examples/styleguide/src/05-16/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-16/app/app.component.ts index 4d549e7166b..655657dbe1b 100644 --- a/adev/src/content/examples/styleguide/src/05-16/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-16/app/app.component.ts @@ -1,10 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) export class AppComponent { - - onSavedTheDay(event$: any) { } + onSavedTheDay(event$: any) {} } diff --git a/adev/src/content/examples/styleguide/src/05-16/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-16/app/app.module.ts index c3fb36f8acc..e76d58a1973 100644 --- a/adev/src/content/examples/styleguide/src/05-16/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-16/app/app.module.ts @@ -1,19 +1,13 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroComponent } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroComponent} from './heroes'; @NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-16', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroComponent - ], - exports: [ AppComponent ] + imports: [BrowserModule, RouterModule.forChild([{path: '05-16', component: AppComponent}])], + declarations: [AppComponent, HeroComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts index 4f2059a6401..8db45242cdf 100644 --- a/adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts @@ -1,12 +1,12 @@ // #docregion -import { Component, EventEmitter, Output } from '@angular/core'; +import {Component, EventEmitter, Output} from '@angular/core'; // #docregion example /* avoid */ @Component({ standalone: true, selector: 'toh-hero', - template: `...` + template: `...`, }) export class HeroComponent { @Output() onSavedTheDay = new EventEmitter(); diff --git a/adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts b/adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts index 9d5a1404c3e..befdc8f16ae 100644 --- a/adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts +++ b/adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts @@ -1,15 +1,13 @@ // #docregion -import { Component, EventEmitter, Output } from '@angular/core'; +import {Component, EventEmitter, Output} from '@angular/core'; @Component({ standalone: true, selector: 'toh-hero', - template: `...` + template: `...`, }) // #docregion example export class HeroComponent { @Output() savedTheDay = new EventEmitter(); } // #enddocregion example - - diff --git a/adev/src/content/examples/styleguide/src/05-17/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-17/app/app.component.ts index 86728b8b801..37a4595ffd6 100644 --- a/adev/src/content/examples/styleguide/src/05-17/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-17/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - template: '' + template: '', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/05-17/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-17/app/app.module.ts index e850d80ae39..7a5ad610c2e 100644 --- a/adev/src/content/examples/styleguide/src/05-17/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-17/app/app.module.ts @@ -1,20 +1,13 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroComponent, HeroListComponent } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroComponent, HeroListComponent} from './heroes'; @NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-17', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroComponent, - HeroListComponent - ], - exports: [ AppComponent ] + imports: [BrowserModule, RouterModule.forChild([{path: '05-17', component: AppComponent}])], + declarations: [AppComponent, HeroComponent, HeroListComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts index 563ce7bff04..d5dedddf947 100644 --- a/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts @@ -1,9 +1,9 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Hero } from '../shared/hero.model'; -import { NgFor } from '@angular/common'; -import { HeroComponent } from '../hero/hero.component'; +import {Hero} from '../shared/hero.model'; +import {NgFor} from '@angular/common'; +import {HeroComponent} from '../hero/hero.component'; // #docregion example /* avoid */ @@ -21,7 +21,7 @@ import { HeroComponent } from '../hero/hero.component'; Average power: {{totalPowers / heroes.length}} `, - imports: [NgFor, HeroComponent] + imports: [NgFor, HeroComponent], }) export class HeroListComponent { heroes: Hero[] = []; diff --git a/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts b/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts index 082b0c4ec6c..0508c1af879 100644 --- a/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts +++ b/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; -import { HeroComponent } from '../hero/hero.component'; -import { Hero } from '../shared/hero.model'; -import { NgFor } from '@angular/common'; +import {Component} from '@angular/core'; +import {HeroComponent} from '../hero/hero.component'; +import {Hero} from '../shared/hero.model'; +import {NgFor} from '@angular/common'; // #docregion example @Component({ diff --git a/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts b/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts index 8a5221c02ce..ebe6af89e99 100644 --- a/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts +++ b/adev/src/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts @@ -1,14 +1,12 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; -import { Hero } from '../shared/hero.model'; +import {Hero} from '../shared/hero.model'; @Component({ standalone: true, selector: 'toh-hero', - template: `...` + template: `...`, }) export class HeroComponent { @Input() hero!: Hero; } - - diff --git a/adev/src/content/examples/styleguide/src/05-18/app/app.component.ts b/adev/src/content/examples/styleguide/src/05-18/app/app.component.ts index 86728b8b801..37a4595ffd6 100644 --- a/adev/src/content/examples/styleguide/src/05-18/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/05-18/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - template: '' + template: '', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/05-18/app/app.module.ts b/adev/src/content/examples/styleguide/src/05-18/app/app.module.ts index fe0b893ff27..44f33aa1e63 100644 --- a/adev/src/content/examples/styleguide/src/05-18/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/05-18/app/app.module.ts @@ -1,20 +1,13 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroComponent, HeroListComponent } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroComponent, HeroListComponent} from './heroes'; @NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-18', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroComponent, - HeroListComponent - ], - exports: [AppComponent] + imports: [BrowserModule, RouterModule.forChild([{path: '05-18', component: AppComponent}])], + declarations: [AppComponent, HeroComponent, HeroListComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero-list/hero-list.component.ts b/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero-list/hero-list.component.ts index 5f82e7ec11a..b46f326f43f 100644 --- a/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero-list/hero-list.component.ts +++ b/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero-list/hero-list.component.ts @@ -1,6 +1,6 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Hero } from '../shared/hero.model'; +import {Hero} from '../shared/hero.model'; @Component({ selector: 'toh-hero-list', @@ -12,7 +12,7 @@ import { Hero } from '../shared/hero.model'; Total powers: {{totalPowers}}
    Average power: {{avgPower}} - ` + `, }) export class HeroListComponent { heroes: Hero[] = []; diff --git a/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.avoid.ts b/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.avoid.ts index 99e3d0bce57..c95b6df026b 100644 --- a/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.avoid.ts @@ -1,10 +1,10 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; // #docregion example @Component({ standalone: true, selector: 'toh-hero', - template: `...` + template: `...`, }) export class HeroComponent { // The exclamation mark suppresses errors that a property is diff --git a/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.optional.ts b/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.optional.ts index 5d1e904cd8f..46e1569d90c 100644 --- a/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.optional.ts +++ b/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.optional.ts @@ -1,10 +1,10 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; // #docregion example @Component({ standalone: true, selector: 'toh-hero', - template: `...` + template: `...`, }) export class HeroComponent { @Input() id?: string; diff --git a/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.ts b/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.ts index 406279a45f9..4fee1f7502c 100644 --- a/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.ts +++ b/adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.ts @@ -1,10 +1,10 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; // #docregion example @Component({ standalone: true, selector: 'toh-hero', - template: `...` + template: `...`, }) export class HeroComponent { @Input() id = 'default_id'; diff --git a/adev/src/content/examples/styleguide/src/06-01/app/app.component.ts b/adev/src/content/examples/styleguide/src/06-01/app/app.component.ts index 7c9f37919f4..9638c692e49 100644 --- a/adev/src/content/examples/styleguide/src/06-01/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/06-01/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/06-01/app/app.module.ts b/adev/src/content/examples/styleguide/src/06-01/app/app.module.ts index 318cd306d75..b86d385cf53 100644 --- a/adev/src/content/examples/styleguide/src/06-01/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/06-01/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HighlightDirective } from './shared'; +import {AppComponent} from './app.component'; +import {HighlightDirective} from './shared'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '06-01', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HighlightDirective - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '06-01', component: AppComponent}])], + declarations: [AppComponent, HighlightDirective], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts b/adev/src/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts index 7b0af1e575f..3253896ec3b 100644 --- a/adev/src/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts +++ b/adev/src/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts @@ -1,10 +1,10 @@ // #docregion -import { Directive, HostListener } from '@angular/core'; +import {Directive, HostListener} from '@angular/core'; // #docregion example @Directive({ standalone: true, - selector: '[tohHighlight]' + selector: '[tohHighlight]', }) export class HighlightDirective { @HostListener('mouseover') onMouseEnter() { diff --git a/adev/src/content/examples/styleguide/src/06-03/app/app.component.ts b/adev/src/content/examples/styleguide/src/06-03/app/app.component.ts index 0d0a7d107b2..aabc6486feb 100644 --- a/adev/src/content/examples/styleguide/src/06-03/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/06-03/app/app.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', template: ` - ` + `, }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/06-03/app/app.module.ts b/adev/src/content/examples/styleguide/src/06-03/app/app.module.ts index b19f3fdc00b..b2f81c44987 100644 --- a/adev/src/content/examples/styleguide/src/06-03/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/06-03/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { ValidatorDirective, Validator2Directive } from './shared'; +import {AppComponent} from './app.component'; +import {ValidatorDirective, Validator2Directive} from './shared'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '06-03', component: AppComponent }]) - ], - declarations: [ - AppComponent, - ValidatorDirective, Validator2Directive - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '06-03', component: AppComponent}])], + declarations: [AppComponent, ValidatorDirective, Validator2Directive], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts b/adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts index b71c17e5a5b..fa5529574ad 100644 --- a/adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts +++ b/adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts @@ -1,9 +1,9 @@ // #docregion -import { Directive, HostBinding, HostListener } from '@angular/core'; +import {Directive, HostBinding, HostListener} from '@angular/core'; @Directive({ standalone: true, - selector: '[tohValidator]' + selector: '[tohValidator]', }) export class ValidatorDirective { @HostBinding('attr.role') role = 'button'; diff --git a/adev/src/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts b/adev/src/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts index d036f7d17b0..7a8511871d5 100644 --- a/adev/src/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts +++ b/adev/src/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts @@ -1,14 +1,14 @@ /* eslint-disable @angular-eslint/no-host-metadata-property */ // #docregion -import { Directive } from '@angular/core'; +import {Directive} from '@angular/core'; @Directive({ standalone: true, selector: '[tohValidator2]', host: { '[attr.role]': 'role', - '(mouseenter)': 'onMouseEnter()' - } + '(mouseenter)': 'onMouseEnter()', + }, }) export class Validator2Directive { role = 'button'; diff --git a/adev/src/content/examples/styleguide/src/07-01/app/app.component.ts b/adev/src/content/examples/styleguide/src/07-01/app/app.component.ts index 50c86e91bf0..e0d7f1a93cb 100644 --- a/adev/src/content/examples/styleguide/src/07-01/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/07-01/app/app.component.ts @@ -1,18 +1,18 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; -import { Hero, HeroService } from './heroes'; +import {Hero, HeroService} from './heroes'; @Component({ selector: 'sg-app', templateUrl: './app.component.html', - providers: [HeroService] + providers: [HeroService], }) export class AppComponent implements OnInit { heroes: Hero[] = []; - constructor(private heroService: HeroService) { } + constructor(private heroService: HeroService) {} ngOnInit() { - this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes); + this.heroService.getHeroes().subscribe((heroes) => (this.heroes = heroes)); } } diff --git a/adev/src/content/examples/styleguide/src/07-01/app/app.module.ts b/adev/src/content/examples/styleguide/src/07-01/app/app.module.ts index 0077500deaf..7d00c6f00b7 100644 --- a/adev/src/content/examples/styleguide/src/07-01/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/07-01/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; @NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '07-01', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] + imports: [BrowserModule, RouterModule.forChild([{path: '07-01', component: AppComponent}])], + declarations: [AppComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts b/adev/src/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts index 5affff16ae4..bce24f41b93 100644 --- a/adev/src/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts +++ b/adev/src/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts @@ -1,13 +1,13 @@ // #docregion -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; -import { Hero } from './hero.model'; +import {Hero} from './hero.model'; @Injectable() // #docregion example export class HeroService { - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) {} getHeroes() { return this.http.get('api/heroes'); diff --git a/adev/src/content/examples/styleguide/src/07-04/app/app.component.ts b/adev/src/content/examples/styleguide/src/07-04/app/app.component.ts index b0bc9677fea..cd4c6cf3aed 100644 --- a/adev/src/content/examples/styleguide/src/07-04/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/07-04/app/app.component.ts @@ -1,19 +1,19 @@ // #docregion -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; -import { HeroArena, HeroService, Hero } from './heroes'; +import {HeroArena, HeroService, Hero} from './heroes'; @Component({ selector: 'toh-app', template: '
    {{heroes | json}}
    ', - providers: [HeroArena, HeroService] + providers: [HeroArena, HeroService], }) export class AppComponent implements OnInit { heroes: Hero[] = []; - constructor(private heroArena: HeroArena) { } + constructor(private heroArena: HeroArena) {} ngOnInit() { - this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes); + this.heroArena.getParticipants().subscribe((heroes) => (this.heroes = heroes)); } } diff --git a/adev/src/content/examples/styleguide/src/07-04/app/app.module.ts b/adev/src/content/examples/styleguide/src/07-04/app/app.module.ts index 71c515c9c92..49290f915fe 100644 --- a/adev/src/content/examples/styleguide/src/07-04/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/07-04/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; @NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '07-04', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] + imports: [BrowserModule, RouterModule.forChild([{path: '07-04', component: AppComponent}])], + declarations: [AppComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts b/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts index 76815e51d76..d4545dce9d2 100644 --- a/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts +++ b/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts @@ -1,14 +1,15 @@ // #docregion -import { Inject } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import {Inject} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; -import { HeroService } from './hero.service'; +import {HeroService} from './hero.service'; // #docregion example /* avoid */ export class HeroArena { constructor( - @Inject(HeroService) private heroService: HeroService, - @Inject(HttpClient) private http: HttpClient) {} + @Inject(HeroService) private heroService: HeroService, + @Inject(HttpClient) private http: HttpClient, + ) {} } // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts b/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts index 339d8116376..b3fcc7069fe 100644 --- a/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts +++ b/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts @@ -1,21 +1,22 @@ // #docplaster // #docregion -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; -import { HeroService } from './hero.service'; +import {HeroService} from './hero.service'; // #docregion example @Injectable() export class HeroArena { constructor( private heroService: HeroService, - private http: HttpClient) {} - // #enddocregion example - // test harness - getParticipants() { - return this.heroService.getHeroes(); - } - // #docregion example + private http: HttpClient, + ) {} + // #enddocregion example + // test harness + getParticipants() { + return this.heroService.getHeroes(); + } + // #docregion example } // #enddocregion example diff --git a/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts b/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts index 94bdf2615cb..f0f20be054c 100644 --- a/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts +++ b/adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts @@ -1,9 +1,9 @@ // #docregion -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { of } from 'rxjs'; +import {of} from 'rxjs'; -import { Hero } from './hero.model'; +import {Hero} from './hero.model'; @Injectable() export class HeroService { diff --git a/adev/src/content/examples/styleguide/src/09-01/app/app.component.ts b/adev/src/content/examples/styleguide/src/09-01/app/app.component.ts index ebc904f7226..4c7ab45d704 100644 --- a/adev/src/content/examples/styleguide/src/09-01/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/09-01/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'sg-app', - template: '' + template: '', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/09-01/app/app.module.ts b/adev/src/content/examples/styleguide/src/09-01/app/app.module.ts index 5872e801d66..bc3ae87ab05 100644 --- a/adev/src/content/examples/styleguide/src/09-01/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/09-01/app/app.module.ts @@ -1,17 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; -import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; +import {AppComponent} from './app.component'; +import {HeroButtonComponent} from './heroes'; @NgModule({ - imports: [ - RouterModule.forChild([{ path: '09-01', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent - ], - exports: [ AppComponent ] + imports: [RouterModule.forChild([{path: '09-01', component: AppComponent}])], + declarations: [AppComponent, HeroButtonComponent], + exports: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts index 9e7ac291533..c6eff50828f 100644 --- a/adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,15 +1,16 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion example /* avoid */ @Component({ standalone: true, selector: 'toh-hero-button', - template: `` + template: ``, }) export class HeroButtonComponent { - onInit() { // misspelled + onInit() { + // misspelled console.log('The component is initialized'); } } diff --git a/adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts b/adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts index c52975f499f..eae707f906e 100644 --- a/adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts +++ b/adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,11 +1,11 @@ // #docregion -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; // #docregion example @Component({ standalone: true, selector: 'toh-hero-button', - template: `` + template: ``, }) export class HeroButtonComponent implements OnInit { ngOnInit() { diff --git a/adev/src/content/examples/styleguide/src/app/app.component.ts b/adev/src/content/examples/styleguide/src/app/app.component.ts index 968036cb8c2..0c9100486ea 100644 --- a/adev/src/content/examples/styleguide/src/app/app.component.ts +++ b/adev/src/content/examples/styleguide/src/app/app.component.ts @@ -1,7 +1,7 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', - templateUrl: './app.component.html' + templateUrl: './app.component.html', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/styleguide/src/app/app.module.ts b/adev/src/content/examples/styleguide/src/app/app.module.ts index 8a6bed738e2..78cd34aa838 100644 --- a/adev/src/content/examples/styleguide/src/app/app.module.ts +++ b/adev/src/content/examples/styleguide/src/app/app.module.ts @@ -1,16 +1,15 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; -import { HttpClientModule } from '@angular/common/http'; -import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; +import {HttpClientModule} from '@angular/common/http'; +import {InMemoryWebApiModule} from 'angular-in-memory-web-api'; -import { RouterModule } from '@angular/router'; +import {RouterModule} from '@angular/router'; -import { HashLocationStrategy, - LocationStrategy } from '@angular/common'; +import {HashLocationStrategy, LocationStrategy} from '@angular/common'; -import { HeroData } from '../app/hero-data'; -import { AppComponent } from '../app/app.component'; +import {HeroData} from '../app/hero-data'; +import {AppComponent} from '../app/app.component'; import * as s0101 from '../01-01/app/app.module'; import * as s0205 from '../02-05/app/app.module'; @@ -60,14 +59,12 @@ import * as s0901 from '../09-01/app/app.module'; s0704.AppModule, s0901.AppModule, - RouterModule.forRoot([ - { path: '', redirectTo: '/01-01', pathMatch: 'full' } - ], {/* enableTracing: true */}), + RouterModule.forRoot([{path: '', redirectTo: '/01-01', pathMatch: 'full'}], { + /* enableTracing: true */ + }), ], - providers: [ - { provide: LocationStrategy, useClass: HashLocationStrategy } - ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] + providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}], + declarations: [AppComponent], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/styleguide/src/app/app.routes.ts b/adev/src/content/examples/styleguide/src/app/app.routes.ts index bce6b4df06f..33b05e75bc4 100644 --- a/adev/src/content/examples/styleguide/src/app/app.routes.ts +++ b/adev/src/content/examples/styleguide/src/app/app.routes.ts @@ -1,8 +1,8 @@ -import { Routes } from '@angular/router'; +import {Routes} from '@angular/router'; -import { AppComponent as S0101 } from '../01-01/app'; +import {AppComponent as S0101} from '../01-01/app'; export const routes: Routes = [ - { path: '', redirectTo: '/01-01', pathMatch: 'full' }, - { path: '01-01', component: S0101 }, + {path: '', redirectTo: '/01-01', pathMatch: 'full'}, + {path: '01-01', component: S0101}, ]; diff --git a/adev/src/content/examples/styleguide/src/app/hero-data.ts b/adev/src/content/examples/styleguide/src/app/hero-data.ts index 893b5f8b8d5..fc28cfabd7b 100644 --- a/adev/src/content/examples/styleguide/src/app/hero-data.ts +++ b/adev/src/content/examples/styleguide/src/app/hero-data.ts @@ -1,10 +1,10 @@ export class HeroData { createDb() { const heroes = [ - { id: 1, name: 'Windstorm' }, - { id: 2, name: 'Bombasto' }, - { id: 3, name: 'Magneta' }, - { id: 4, name: 'Tornado' } + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'Bombasto'}, + {id: 3, name: 'Magneta'}, + {id: 4, name: 'Tornado'}, ]; return {heroes}; } diff --git a/adev/src/content/examples/styleguide/src/main.ts b/adev/src/content/examples/styleguide/src/main.ts index 537b861085e..b697867b377 100644 --- a/adev/src/content/examples/styleguide/src/main.ts +++ b/adev/src/content/examples/styleguide/src/main.ts @@ -1,5 +1,4 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {AppModule} from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts index d93d0f734e5..0e2abfd432c 100644 --- a/adev/src/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts @@ -1,22 +1,17 @@ -import { browser, element, by, logging } from 'protractor'; +import {browser, element, by, logging} from 'protractor'; describe('Template-reference-variables-example', () => { beforeEach(() => browser.get('')); // helper function used to test what's logged to the console async function logChecker(contents: string) { - const logs = await browser - .manage() - .logs() - .get(logging.Type.BROWSER); - const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1); + const logs = await browser.manage().logs().get(logging.Type.BROWSER); + const messages = logs.filter(({message}) => message.indexOf(contents) !== -1); expect(messages.length).toBeGreaterThan(0); } it('should display Template reference variables', async () => { - expect(await element(by.css('h1')).getText()).toEqual( - 'Template reference variables' - ); + expect(await element(by.css('h1')).getText()).toEqual('Template reference variables'); }); it('should log a Calling 123 ... message', async () => { @@ -33,7 +28,8 @@ describe('Template-reference-variables-example', () => { const nameInput = element.all(by.css('input')).get(1); await nameInput.sendKeys('123'); await submitButton.click(); - expect(await element.all(by.css('div > p')).get(2).getText()).toEqual('Submitted. Form value is {"name":"123"}'); + expect(await element.all(by.css('div > p')).get(2).getText()).toEqual( + 'Submitted. Form value is {"name":"123"}', + ); }); - }); diff --git a/adev/src/content/examples/template-reference-variables/src/app/app.component.ts b/adev/src/content/examples/template-reference-variables/src/app/app.component.ts index ea6883b023c..ab458acffe2 100644 --- a/adev/src/content/examples/template-reference-variables/src/app/app.component.ts +++ b/adev/src/content/examples/template-reference-variables/src/app/app.component.ts @@ -1,17 +1,15 @@ -import { Component, ViewChild } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { NgForm, FormsModule } from '@angular/forms'; - +import {Component, ViewChild} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {NgForm, FormsModule} from '@angular/forms'; @Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', - imports: [ CommonModule, FormsModule ], - styleUrls: ['./app.component.css'] + imports: [CommonModule, FormsModule], + styleUrls: ['./app.component.css'], }) export class AppComponent { - public firstExample = 'Hello, World!'; public secondExample = 'Hello, World!'; @@ -22,8 +20,7 @@ export class AppComponent { Value: {{ ref1.value }} - ` - ; + `; public desugared2 = ` @@ -33,7 +30,7 @@ export class AppComponent { Value: {{ ref2?.value }}`; - public ngForExample = ` + public ngForExample = ` @@ -42,9 +39,11 @@ export class AppComponent { {{ ref.value }}`; - @ViewChild('itemForm', { static: false }) form!: NgForm; + @ViewChild('itemForm', {static: false}) form!: NgForm; - get submitMessage() { return this._submitMessage; } + get submitMessage() { + return this._submitMessage; + } private _submitMessage = ''; onSubmit(form: NgForm) { diff --git a/adev/src/content/examples/template-reference-variables/src/main.ts b/adev/src/content/examples/template-reference-variables/src/main.ts index 7e10ffabd9a..bba4ddf9ad8 100644 --- a/adev/src/content/examples/template-reference-variables/src/main.ts +++ b/adev/src/content/examples/template-reference-variables/src/main.ts @@ -1,6 +1,7 @@ -import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/platform-browser'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {AppComponent} from './app/app.component'; -bootstrapApplication(AppComponent, { providers: [provideProtractorTestingSupport()] }) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, {providers: [provideProtractorTestingSupport()]}).catch((err) => + console.error(err), +); diff --git a/adev/src/content/examples/template-syntax/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/template-syntax/e2e/src/app.e2e-spec.ts index 6c2f9a7f396..a00efc6b053 100644 --- a/adev/src/content/examples/template-syntax/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/template-syntax/e2e/src/app.e2e-spec.ts @@ -1,8 +1,7 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; // TODO Not yet complete describe('Template Syntax', () => { - beforeAll(() => browser.get('')); it('should be able to use interpolation with a hero', async () => { diff --git a/adev/src/content/examples/template-syntax/src/app/app.component.ts b/adev/src/content/examples/template-syntax/src/app/app.component.ts index 30bc69dc4c4..0bb26ce7010 100644 --- a/adev/src/content/examples/template-syntax/src/app/app.component.ts +++ b/adev/src/content/examples/template-syntax/src/app/app.component.ts @@ -1,17 +1,21 @@ -import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core'; -import { CommonModule, DatePipe } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import {AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren} from '@angular/core'; +import {CommonModule, DatePipe} from '@angular/common'; +import {FormsModule} from '@angular/forms'; -import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component'; -import { ClickDirective, ClickDirective2 } from './click.directive'; -import { HeroFormComponent } from './hero-form.component'; -import { heroSwitchComponents } from './hero-switch.components'; -import { SizerComponent } from './sizer.component'; -import { SvgComponent } from './svg.component'; +import {BigHeroDetailComponent, HeroDetailComponent} from './hero-detail.component'; +import {ClickDirective, ClickDirective2} from './click.directive'; +import {HeroFormComponent} from './hero-form.component'; +import {heroSwitchComponents} from './hero-switch.components'; +import {SizerComponent} from './sizer.component'; +import {SvgComponent} from './svg.component'; -import { Hero } from './hero'; +import {Hero} from './hero'; -export enum Color {Red, Green, Blue} +export enum Color { + Red, + Green, + Blue, +} /** * Giant grab bag of stuff to drive the chapter @@ -22,7 +26,8 @@ export enum Color {Red, Green, Blue} templateUrl: './app.component.html', imports: [ // Angular Sources - CommonModule, FormsModule, + CommonModule, + FormsModule, DatePipe, // Sample Components and Directives @@ -33,12 +38,11 @@ export enum Color {Red, Green, Blue} HeroFormComponent, heroSwitchComponents, // an array of components SizerComponent, - SvgComponent - ], - styleUrls: [ './app.component.css' ] + SvgComponent, + ], + styleUrls: ['./app.component.css'], }) export class AppComponent implements AfterViewInit, OnInit { - ngOnInit() { this.resetHeroes(); this.setCurrentClasses(); @@ -47,11 +51,11 @@ export class AppComponent implements AfterViewInit, OnInit { ngAfterViewInit() { // Detect effects of NgForTrackBy - trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount++); + trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount++); trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++); } - @ViewChildren('noTrackBy') heroesNoTrackBy!: QueryList; + @ViewChildren('noTrackBy') heroesNoTrackBy!: QueryList; @ViewChildren('withTrackBy') heroesWithTrackBy!: QueryList; actionName = 'Go for it'; @@ -59,14 +63,20 @@ export class AppComponent implements AfterViewInit, OnInit { classes = 'special'; help = ''; - alert(msg?: string) { window.alert(msg); } - callFax(value: string) { this.alert(`Faxing ${value} ...`); } - callPhone(value: string) { this.alert(`Calling ${value} ...`); } - canSave = true; + alert(msg?: string) { + window.alert(msg); + } + callFax(value: string) { + this.alert(`Faxing ${value} ...`); + } + callPhone(value: string) { + this.alert(`Calling ${value} ...`); + } + canSave = true; changeIds() { this.resetHeroes(); - this.heroes.forEach(h => h.id += 10 * this.heroIdIncrement++); + this.heroes.forEach((h) => (h.id += 10 * this.heroIdIncrement++)); this.heroesWithTrackByCountReset = -1; } @@ -84,7 +94,9 @@ export class AppComponent implements AfterViewInit, OnInit { Color = Color; color = Color.Red; - colorToggle() {this.color = (this.color === Color.Red) ? Color.Blue : Color.Red; } + colorToggle() { + this.color = this.color === Color.Red ? Color.Blue : Color.Red; + } currentHero!: Hero; @@ -111,7 +123,7 @@ export class AppComponent implements AfterViewInit, OnInit { heroes: Hero[] = []; // trackBy change counting - heroesNoTrackByCount = 0; + heroesNoTrackByCount = 0; heroesWithTrackByCount = 0; heroesWithTrackByCountReset = 0; @@ -129,29 +141,35 @@ export class AppComponent implements AfterViewInit, OnInit { isSpecial = true; isUnchanged = true; - get nullHero(): Hero | null { return null; } + get nullHero(): Hero | null { + return null; + } onClickMe(event?: MouseEvent) { - const evtMsg = event ? ' Event target class is ' + (event.target as HTMLElement).className : ''; + const evtMsg = event ? ' Event target class is ' + (event.target as HTMLElement).className : ''; this.alert('Click me.' + evtMsg); } onSave(event?: MouseEvent) { const evtMsg = event ? ' Event target is ' + (event.target as HTMLElement).textContent : ''; this.alert('Saved.' + evtMsg); - if (event) { event.stopPropagation(); } + if (event) { + event.stopPropagation(); + } } - onSubmit(data: any) {/* referenced but not used */} + onSubmit(data: any) { + /* referenced but not used */ + } product = { name: 'frimfram', - price: 42 + price: 42, }; // updates with fresh set of cloned heroes resetHeroes() { - this.heroes = Hero.heroes.map(hero => hero.clone()); + this.heroes = Hero.heroes.map((hero) => hero.clone()); this.currentHero = this.heroes[0]; this.hero = this.currentHero; this.heroesWithTrackByCountReset = 0; @@ -164,10 +182,10 @@ export class AppComponent implements AfterViewInit, OnInit { currentClasses: Record = {}; setCurrentClasses() { // CSS classes: added/removed per current state of component properties - this.currentClasses = { + this.currentClasses = { saveable: this.canSave, modified: !this.isUnchanged, - special: this.isSpecial + special: this.isSpecial, }; } @@ -175,28 +193,32 @@ export class AppComponent implements AfterViewInit, OnInit { setCurrentStyles() { // CSS styles: set per current state of component properties this.currentStyles = { - 'font-style': this.canSave ? 'italic' : 'normal', - 'font-weight': !this.isUnchanged ? 'bold' : 'normal', - 'font-size': this.isSpecial ? '24px' : '12px' + 'font-style': this.canSave ? 'italic' : 'normal', + 'font-weight': !this.isUnchanged ? 'bold' : 'normal', + 'font-size': this.isSpecial ? '24px' : '12px', }; } - trackByHeroes(index: number, hero: Hero): number { return hero.id; } + trackByHeroes(index: number, hero: Hero): number { + return hero.id; + } - trackById(index: number, item: any): number { return item.id; } + trackById(index: number, item: any): number { + return item.id; + } } // helper to track changes to viewChildren function trackChanges(views: QueryList, changed: () => void) { let oldRefs = views.toArray(); views.changes.subscribe((changes: QueryList) => { - const changedRefs = changes.toArray(); - // Check if every changed Element is the same as old and in the same position - const isSame = oldRefs.every((v, i) => v.nativeElement === changedRefs[i].nativeElement); - if (!isSame) { - oldRefs = changedRefs; - // wait a tick because called after views are constructed - setTimeout(changed, 0); - } + const changedRefs = changes.toArray(); + // Check if every changed Element is the same as old and in the same position + const isSame = oldRefs.every((v, i) => v.nativeElement === changedRefs[i].nativeElement); + if (!isSame) { + oldRefs = changedRefs; + // wait a tick because called after views are constructed + setTimeout(changed, 0); + } }); } diff --git a/adev/src/content/examples/template-syntax/src/app/click.directive.ts b/adev/src/content/examples/template-syntax/src/app/click.directive.ts index 7362a211045..ba20fbf2658 100644 --- a/adev/src/content/examples/template-syntax/src/app/click.directive.ts +++ b/adev/src/content/examples/template-syntax/src/app/click.directive.ts @@ -2,11 +2,11 @@ @angular-eslint/directive-selector, @angular-eslint/no-output-rename, @angular-eslint/no-outputs-metadata-property */ -import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; +import {Directive, ElementRef, EventEmitter, Output} from '@angular/core'; @Directive({ standalone: true, - selector: '[myClick]' + selector: '[myClick]', }) export class ClickDirective { @Output('myClick') clicks = new EventEmitter(); // @Output(alias) propertyName = ... @@ -14,28 +14,26 @@ export class ClickDirective { toggle = false; constructor(el: ElementRef) { - el.nativeElement - .addEventListener('click', (event: Event) => { - this.toggle = !this.toggle; - this.clicks.emit(this.toggle ? 'Click!' : ''); - }); + el.nativeElement.addEventListener('click', (event: Event) => { + this.toggle = !this.toggle; + this.clicks.emit(this.toggle ? 'Click!' : ''); + }); } } @Directive({ standalone: true, selector: '[myClick2]', - outputs: ['clicks:myClick'] // propertyName:alias + outputs: ['clicks:myClick'], // propertyName:alias }) export class ClickDirective2 { clicks = new EventEmitter(); toggle = false; constructor(el: ElementRef) { - el.nativeElement - .addEventListener('click', (event: Event) => { - this.toggle = !this.toggle; - this.clicks.emit(this.toggle ? 'Click2!' : ''); - }); + el.nativeElement.addEventListener('click', (event: Event) => { + this.toggle = !this.toggle; + this.clicks.emit(this.toggle ? 'Click2!' : ''); + }); } } diff --git a/adev/src/content/examples/template-syntax/src/app/hero-detail.component.ts b/adev/src/content/examples/template-syntax/src/app/hero-detail.component.ts index b9eba321bc9..55b1d39e7de 100644 --- a/adev/src/content/examples/template-syntax/src/app/hero-detail.component.ts +++ b/adev/src/content/examples/template-syntax/src/app/hero-detail.component.ts @@ -1,8 +1,8 @@ /* eslint-disable @angular-eslint/no-inputs-metadata-property, @angular-eslint/no-outputs-metadata-property */ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { CurrencyPipe, DatePipe } from '@angular/common'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {CurrencyPipe, DatePipe} from '@angular/common'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ standalone: true, @@ -17,7 +17,7 @@ import { Hero } from './hero'; {{prefix}} {{hero.name}} - ` + `, }) export class HeroDetailComponent { hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero @@ -53,13 +53,14 @@ export class HeroDetailComponent { `, imports: [CurrencyPipe, DatePipe], - styles: [` + styles: [ + ` .detail { border: 1px solid black; padding: 4px; max-width: 450px; } img { float: left; margin-right: 8px; height: 100px; } - `] + `, + ], }) export class BigHeroDetailComponent extends HeroDetailComponent { - @Input() override hero!: Hero; @Output() override deleteRequest = new EventEmitter(); diff --git a/adev/src/content/examples/template-syntax/src/app/hero-form.component.ts b/adev/src/content/examples/template-syntax/src/app/hero-form.component.ts index ab8c7cfcbdb..e6b4146552d 100644 --- a/adev/src/content/examples/template-syntax/src/app/hero-form.component.ts +++ b/adev/src/content/examples/template-syntax/src/app/hero-form.component.ts @@ -1,17 +1,19 @@ -import { Component, Input, ViewChild } from '@angular/core'; -import { FormsModule, NgForm } from '@angular/forms'; +import {Component, Input, ViewChild} from '@angular/core'; +import {FormsModule, NgForm} from '@angular/forms'; -import { Hero } from './hero'; +import {Hero} from './hero'; @Component({ standalone: true, selector: 'app-hero-form', templateUrl: './hero-form.component.html', - imports: [ FormsModule ], - styles: [` + imports: [FormsModule], + styles: [ + ` button { margin: 6px 0; } #heroForm { border: 1px solid black; margin: 20px 0; padding: 8px; max-width: 350px; } - `] + `, + ], }) export class HeroFormComponent { @Input() hero!: Hero; @@ -27,6 +29,6 @@ export class HeroFormComponent { } onSubmit(form: NgForm) { - this._submitMessage = 'Submitted. form value is ' + JSON.stringify(form.value); + this._submitMessage = 'Submitted. form value is ' + JSON.stringify(form.value); } } diff --git a/adev/src/content/examples/template-syntax/src/app/hero-switch.components.ts b/adev/src/content/examples/template-syntax/src/app/hero-switch.components.ts index 74c36772e2c..a92c5909f72 100644 --- a/adev/src/content/examples/template-syntax/src/app/hero-switch.components.ts +++ b/adev/src/content/examples/template-syntax/src/app/hero-switch.components.ts @@ -1,10 +1,10 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; +import {Component, Input} from '@angular/core'; +import {Hero} from './hero'; @Component({ standalone: true, selector: 'app-happy-hero', - template: 'Wow. You like {{hero.name}}. What a happy hero ... just like you.' + template: 'Wow. You like {{hero.name}}. What a happy hero ... just like you.', }) export class HappyHeroComponent { @Input() hero!: Hero; @@ -13,7 +13,7 @@ export class HappyHeroComponent { @Component({ standalone: true, selector: 'app-sad-hero', - template: 'You like {{hero.name}}? Such a sad hero. Are you sad too?' + template: 'You like {{hero.name}}? Such a sad hero. Are you sad too?', }) export class SadHeroComponent { @Input() hero!: Hero; @@ -22,7 +22,7 @@ export class SadHeroComponent { @Component({ standalone: true, selector: 'app-confused-hero', - template: 'Are you as confused as {{hero.name}}?' + template: 'Are you as confused as {{hero.name}}?', }) export class ConfusedHeroComponent { @Input() hero!: Hero; @@ -31,16 +31,20 @@ export class ConfusedHeroComponent { @Component({ standalone: true, selector: 'app-unknown-hero', - template: '{{message}}' + template: '{{message}}', }) export class UnknownHeroComponent { @Input() hero!: Hero; get message() { - return this.hero && this.hero.name ? - `${this.hero.name} is strange and mysterious.` : - 'Are you feeling indecisive?'; + return this.hero && this.hero.name + ? `${this.hero.name} is strange and mysterious.` + : 'Are you feeling indecisive?'; } } -export const heroSwitchComponents = - [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ]; +export const heroSwitchComponents = [ + HappyHeroComponent, + SadHeroComponent, + ConfusedHeroComponent, + UnknownHeroComponent, +]; diff --git a/adev/src/content/examples/template-syntax/src/app/hero.ts b/adev/src/content/examples/template-syntax/src/app/hero.ts index c39ce3ef8e9..9a3cffcb1a5 100644 --- a/adev/src/content/examples/template-syntax/src/app/hero.ts +++ b/adev/src/content/examples/template-syntax/src/app/hero.ts @@ -8,15 +8,14 @@ export class Hero { 'happy', new Date(1970, 1, 25), 'https://www.imdb.com/title/tt0065832/', - 325 + 325, ), - new Hero(1, 'Dr Nice', 'happy'), + new Hero(1, 'Dr Nice', 'happy'), new Hero(2, 'RubberMan', 'sad'), new Hero(3, 'Windstorm', 'confused'), - new Hero(4, 'Magneta') + new Hero(4, 'Magneta'), ]; - constructor( public id = Hero.nextId++, public name?: string, @@ -24,7 +23,7 @@ export class Hero { public birthdate?: Date, public url?: string, public rate = 100, - ) {} + ) {} clone(): Hero { return Object.assign(new Hero(), this); diff --git a/adev/src/content/examples/template-syntax/src/app/sizer.component.ts b/adev/src/content/examples/template-syntax/src/app/sizer.component.ts index 25a0509d7c2..a397f38ba2b 100644 --- a/adev/src/content/examples/template-syntax/src/app/sizer.component.ts +++ b/adev/src/content/examples/template-syntax/src/app/sizer.component.ts @@ -1,5 +1,5 @@ // #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; @Component({ standalone: true, @@ -9,14 +9,18 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; FontSize: {{size}}px - ` + `, }) export class SizerComponent { - @Input() size!: number | string; + @Input() size!: number | string; @Output() sizeChange = new EventEmitter(); - dec() { this.resize(-1); } - inc() { this.resize(+1); } + dec() { + this.resize(-1); + } + inc() { + this.resize(+1); + } resize(delta: number) { this.size = Math.min(40, Math.max(8, +this.size + delta)); diff --git a/adev/src/content/examples/template-syntax/src/app/svg.component.ts b/adev/src/content/examples/template-syntax/src/app/svg.component.ts index a90720b7354..f2165dee478 100644 --- a/adev/src/content/examples/template-syntax/src/app/svg.component.ts +++ b/adev/src/content/examples/template-syntax/src/app/svg.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ standalone: true, selector: 'app-svg', templateUrl: './svg.component.svg', - styleUrls: ['./svg.component.css'] + styleUrls: ['./svg.component.css'], }) export class SvgComponent { fillColor = 'rgb(255, 0, 0)'; diff --git a/adev/src/content/examples/template-syntax/src/main.ts b/adev/src/content/examples/template-syntax/src/main.ts index 7e10ffabd9a..bba4ddf9ad8 100644 --- a/adev/src/content/examples/template-syntax/src/main.ts +++ b/adev/src/content/examples/template-syntax/src/main.ts @@ -1,6 +1,7 @@ -import { bootstrapApplication, provideProtractorTestingSupport } from '@angular/platform-browser'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; +import {AppComponent} from './app/app.component'; -bootstrapApplication(AppComponent, { providers: [provideProtractorTestingSupport()] }) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, {providers: [provideProtractorTestingSupport()]}).catch((err) => + console.error(err), +); diff --git a/adev/src/content/examples/testing/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/testing/e2e/src/app.e2e-spec.ts index 4d7246b83fb..93dba43b66e 100644 --- a/adev/src/content/examples/testing/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/testing/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Testing Example', () => { const expectedViewNames = ['Dashboard', 'Heroes', 'About']; @@ -17,7 +17,7 @@ describe('Testing Example', () => { }); it(`has views ${expectedViewNames}`, async () => { - const viewNames = await getPageElts().navElts.map(el => el!.getText()); + const viewNames = await getPageElts().navElts.map((el) => el!.getText()); expect(viewNames).toEqual(expectedViewNames); }); diff --git a/adev/src/content/examples/testing/src/app/about/about.component.spec.ts b/adev/src/content/examples/testing/src/app/about/about.component.spec.ts index 647cbb66234..60ff9790588 100755 --- a/adev/src/content/examples/testing/src/app/about/about.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/about/about.component.spec.ts @@ -1,11 +1,11 @@ -import { provideHttpClient } from '@angular/common/http'; -import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {provideHttpClient} from '@angular/common/http'; +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { UserService } from '../model'; -import { TwainService } from '../twain/twain.service'; +import {UserService} from '../model'; +import {TwainService} from '../twain/twain.service'; -import { AboutComponent } from './about.component'; +import {AboutComponent} from './about.component'; let fixture: ComponentFixture; diff --git a/adev/src/content/examples/testing/src/app/about/about.component.ts b/adev/src/content/examples/testing/src/app/about/about.component.ts index 6857e145cd1..8a4a41ead7e 100755 --- a/adev/src/content/examples/testing/src/app/about/about.component.ts +++ b/adev/src/content/examples/testing/src/app/about/about.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { HighlightDirective } from '../shared/highlight.directive'; -import { TwainComponent } from '../twain/twain.component'; +import {HighlightDirective} from '../shared/highlight.directive'; +import {TwainComponent} from '../twain/twain.component'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/app/app-initial.component.spec.ts b/adev/src/content/examples/testing/src/app/app-initial.component.spec.ts index 95facd880c0..6be3760189c 100755 --- a/adev/src/content/examples/testing/src/app/app-initial.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/app-initial.component.spec.ts @@ -1,8 +1,8 @@ // #docplaster // #docregion -import { TestBed, waitForAsync } from '@angular/core/testing'; +import {TestBed, waitForAsync} from '@angular/core/testing'; // #enddocregion -import { AppComponent } from './app-initial.component'; +import {AppComponent} from './app-initial.component'; /* // #docregion import { AppComponent } from './app.component'; @@ -37,8 +37,8 @@ describe('AppComponent (initial CLI version)', () => { // #enddocregion /// As it should be -import { DebugElement } from '@angular/core'; -import { ComponentFixture } from '@angular/core/testing'; +import {DebugElement} from '@angular/core'; +import {ComponentFixture} from '@angular/core/testing'; describe('AppComponent (initial CLI version - as it should be)', () => { let app: AppComponent; diff --git a/adev/src/content/examples/testing/src/app/app-initial.component.ts b/adev/src/content/examples/testing/src/app/app-initial.component.ts index 068bae4ed5b..41cb9b8f036 100755 --- a/adev/src/content/examples/testing/src/app/app-initial.component.ts +++ b/adev/src/content/examples/testing/src/app/app-initial.component.ts @@ -1,6 +1,6 @@ // #docregion // Reduced version of the initial AppComponent generated by CLI -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/app/app.component.router.spec.ts b/adev/src/content/examples/testing/src/app/app.component.router.spec.ts index d34f015edac..c6e8964d4a2 100755 --- a/adev/src/content/examples/testing/src/app/app.component.router.spec.ts +++ b/adev/src/content/examples/testing/src/app/app.component.router.spec.ts @@ -1,20 +1,20 @@ // For more examples: // https://github.com/angular/angular/blob/main/packages/router/test/integration.spec.ts -import { Location } from '@angular/common'; -import { provideLocationMocks, SpyLocation } from '@angular/common/testing'; -import { DebugElement, Type } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { provideRouter, Router, RouterLink } from '@angular/router'; +import {Location} from '@angular/common'; +import {provideLocationMocks, SpyLocation} from '@angular/common/testing'; +import {DebugElement, Type} from '@angular/core'; +import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing'; +import {By} from '@angular/platform-browser'; +import {provideRouter, Router, RouterLink} from '@angular/router'; -import { asyncData, click } from '../testing'; +import {asyncData, click} from '../testing'; -import { AboutComponent } from './about/about.component'; -import { AppComponent } from './app.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { HeroService, TestHeroService } from './model/testing/test-hero.service'; -import { TwainService } from './twain/twain.service'; +import {AboutComponent} from './about/about.component'; +import {AppComponent} from './app.component'; +import {DashboardComponent} from './dashboard/dashboard.component'; +import {HeroService, TestHeroService} from './model/testing/test-hero.service'; +import {TwainService} from './twain/twain.service'; let comp: AppComponent; let fixture: ComponentFixture; @@ -27,15 +27,15 @@ describe('AppComponent & router testing', () => { TestBed.configureTestingModule( Object.assign({}, appConfig, { providers: [ - { provide: HeroService, useClass: TestHeroService }, + {provide: HeroService, useClass: TestHeroService}, UserService, TwainService, provideHttpClient(), provideLocationMocks(), provideRouter([ - { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, - { path: 'about', component: AboutComponent }, - { path: 'dashboard', component: DashboardComponent }, + {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, + {path: 'about', component: AboutComponent}, + {path: 'dashboard', component: DashboardComponent}, ]), ], }), @@ -78,11 +78,11 @@ describe('AppComponent & router testing', () => { /////////////// -import { HeroListComponent } from './hero/hero-list.component'; -import { appConfig } from './app.config'; +import {HeroListComponent} from './hero/hero-list.component'; +import {appConfig} from './app.config'; import heroRoutes from './hero/hero.routes'; -import { UserService } from './model'; -import { provideHttpClient } from '@angular/common/http'; +import {UserService} from './model'; +import {provideHttpClient} from '@angular/common/http'; ///////// Can't get lazy loaded Heroes to work yet xdescribe('AppComponent & Lazy Loading (not working yet)', () => { @@ -92,7 +92,7 @@ xdescribe('AppComponent & Lazy Loading (not working yet)', () => { beforeEach(fakeAsync(() => { createComponent(); - router.resetConfig([{ path: 'heroes', loadChildren: () => heroRoutes }]); + router.resetConfig([{path: 'heroes', loadChildren: () => heroRoutes}]); })); it('should navigate to "Heroes" on click', waitForAsync(() => { diff --git a/adev/src/content/examples/testing/src/app/app.component.spec.ts b/adev/src/content/examples/testing/src/app/app.component.spec.ts index 768d132420c..d31d1a5d89d 100755 --- a/adev/src/content/examples/testing/src/app/app.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/app.component.spec.ts @@ -1,21 +1,21 @@ // #docplaster -import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { provideRouter, Router, RouterLink } from '@angular/router'; +import {Component, DebugElement, NO_ERRORS_SCHEMA} from '@angular/core'; +import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing'; +import {By} from '@angular/platform-browser'; +import {provideRouter, Router, RouterLink} from '@angular/router'; -import { AppComponent } from './app.component'; -import { appConfig } from './app.config'; -import { UserService } from './model'; +import {AppComponent} from './app.component'; +import {appConfig} from './app.config'; +import {UserService} from './model'; // #docregion component-stubs -@Component({ standalone: true, selector: 'app-banner', template: '' }) +@Component({standalone: true, selector: 'app-banner', template: ''}) class BannerStubComponent {} -@Component({ standalone: true, selector: 'router-outlet', template: '' }) +@Component({standalone: true, selector: 'router-outlet', template: ''}) class RouterOutletStubComponent {} -@Component({ standalone: true, selector: 'app-welcome', template: '' }) +@Component({standalone: true, selector: 'app-welcome', template: ''}) class WelcomeStubComponent {} // #enddocregion component-stubs @@ -106,8 +106,8 @@ function tests() { it('can click Heroes link in template', fakeAsync(() => { const heroesLinkDe = linkDes[1]; // heroes link DebugElement - TestBed.inject(Router).resetConfig([{ path: '**', children: [] }]); - heroesLinkDe.triggerEventHandler('click', { button: 0 }); + TestBed.inject(Router).resetConfig([{path: '**', children: []}]); + heroesLinkDe.triggerEventHandler('click', {button: 0}); tick(); fixture.detectChanges(); diff --git a/adev/src/content/examples/testing/src/app/app.component.ts b/adev/src/content/examples/testing/src/app/app.component.ts index f61c66b9753..99e02cf8bb6 100755 --- a/adev/src/content/examples/testing/src/app/app.component.ts +++ b/adev/src/content/examples/testing/src/app/app.component.ts @@ -1,9 +1,9 @@ // #docregion -import { Component } from '@angular/core'; -import { RouterLink, RouterOutlet } from '@angular/router'; +import {Component} from '@angular/core'; +import {RouterLink, RouterOutlet} from '@angular/router'; -import { BannerComponent } from './banner/banner.component'; -import { WelcomeComponent } from './welcome/welcome.component'; +import {BannerComponent} from './banner/banner.component'; +import {WelcomeComponent} from './welcome/welcome.component'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/app/app.config.ts b/adev/src/content/examples/testing/src/app/app.config.ts index dfcc94b59f0..147e316cddd 100644 --- a/adev/src/content/examples/testing/src/app/app.config.ts +++ b/adev/src/content/examples/testing/src/app/app.config.ts @@ -1,14 +1,14 @@ -import { provideHttpClient } from '@angular/common/http'; -import { ApplicationConfig, importProvidersFrom } from '@angular/core'; -import { provideProtractorTestingSupport } from '@angular/platform-browser'; -import { provideRouter } from '@angular/router'; -import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; +import {provideHttpClient} from '@angular/common/http'; +import {ApplicationConfig, importProvidersFrom} from '@angular/core'; +import {provideProtractorTestingSupport} from '@angular/platform-browser'; +import {provideRouter} from '@angular/router'; +import {HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api'; -import { routes } from './app.routes'; -import { InMemoryDataService } from './in-memory-data.service'; -import { HeroService } from './model/hero.service'; -import { UserService } from './model/user.service'; -import { TwainService } from './twain/twain.service'; +import {routes} from './app.routes'; +import {InMemoryDataService} from './in-memory-data.service'; +import {HeroService} from './model/hero.service'; +import {UserService} from './model/user.service'; +import {TwainService} from './twain/twain.service'; export const appProviders = [ provideRouter(routes), @@ -18,7 +18,7 @@ export const appProviders = [ // The HttpClientInMemoryWebApiModule module intercepts HTTP requests // and returns simulated server responses. // Remove it when a real server is ready to receive requests. - HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: false }), + HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {dataEncapsulation: false}), ), HeroService, TwainService, diff --git a/adev/src/content/examples/testing/src/app/app.routes.ts b/adev/src/content/examples/testing/src/app/app.routes.ts index 8c4985ea6b9..c92c9f8b8d4 100644 --- a/adev/src/content/examples/testing/src/app/app.routes.ts +++ b/adev/src/content/examples/testing/src/app/app.routes.ts @@ -1,11 +1,11 @@ -import { Routes } from '@angular/router'; +import {Routes} from '@angular/router'; -import { AboutComponent } from './about/about.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; +import {AboutComponent} from './about/about.component'; +import {DashboardComponent} from './dashboard/dashboard.component'; export const routes: Routes = [ - { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, - { path: 'about', component: AboutComponent }, - { path: 'dashboard', component: DashboardComponent }, - { path: 'heroes', loadChildren: () => import('./hero/hero.routes') }, + {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, + {path: 'about', component: AboutComponent}, + {path: 'dashboard', component: DashboardComponent}, + {path: 'heroes', loadChildren: () => import('./hero/hero.routes')}, ]; diff --git a/adev/src/content/examples/testing/src/app/banner/banner-external.component.spec.ts b/adev/src/content/examples/testing/src/app/banner/banner-external.component.spec.ts index f9d97c34e50..55b35fc7402 100755 --- a/adev/src/content/examples/testing/src/app/banner/banner-external.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/banner/banner-external.component.spec.ts @@ -1,7 +1,7 @@ // #docplaster -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { BannerComponent } from './banner-external.component'; +import {BannerComponent} from './banner-external.component'; describe('BannerComponent (external files)', () => { let component: BannerComponent; diff --git a/adev/src/content/examples/testing/src/app/banner/banner-external.component.ts b/adev/src/content/examples/testing/src/app/banner/banner-external.component.ts index 95cce3aec9f..1e84ab92034 100755 --- a/adev/src/content/examples/testing/src/app/banner/banner-external.component.ts +++ b/adev/src/content/examples/testing/src/app/banner/banner-external.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion metadata @Component({ diff --git a/adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts index d8efc606e4a..b55febd2784 100755 --- a/adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts @@ -1,15 +1,15 @@ // #docplaster // #docregion import-debug-element -import { DebugElement } from '@angular/core'; +import {DebugElement} from '@angular/core'; // #enddocregion import-debug-element // #docregion v1 -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; // #enddocregion v1 // #docregion import-by -import { By } from '@angular/platform-browser'; +import {By} from '@angular/platform-browser'; // #enddocregion import-by -import { BannerComponent } from './banner-initial.component'; +import {BannerComponent} from './banner-initial.component'; /* // #docregion v1 @@ -24,7 +24,7 @@ describe('BannerComponent (initial CLI generated)', () => { let fixture: ComponentFixture; beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ imports: [BannerComponent] }).compileComponents(); + TestBed.configureTestingModule({imports: [BannerComponent]}).compileComponents(); })); beforeEach(() => { @@ -43,7 +43,7 @@ describe('BannerComponent (initial CLI generated)', () => { describe('BannerComponent (minimal)', () => { it('should create', () => { // #docregion configureTestingModule - TestBed.configureTestingModule({ imports: [BannerComponent] }); + TestBed.configureTestingModule({imports: [BannerComponent]}); // #enddocregion configureTestingModule // #docregion createComponent const fixture = TestBed.createComponent(BannerComponent); @@ -62,7 +62,7 @@ describe('BannerComponent (with beforeEach)', () => { let fixture: ComponentFixture; beforeEach(() => { - TestBed.configureTestingModule({ imports: [BannerComponent] }); + TestBed.configureTestingModule({imports: [BannerComponent]}); fixture = TestBed.createComponent(BannerComponent); component = fixture.componentInstance; }); diff --git a/adev/src/content/examples/testing/src/app/banner/banner-initial.component.ts b/adev/src/content/examples/testing/src/app/banner/banner-initial.component.ts index bdd344812e2..988628f547f 100755 --- a/adev/src/content/examples/testing/src/app/banner/banner-initial.component.ts +++ b/adev/src/content/examples/testing/src/app/banner/banner-initial.component.ts @@ -1,6 +1,6 @@ // BannerComponent as initially generated by the CLI // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts b/adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts index 8a13cd1f4e9..b35055638d2 100755 --- a/adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts +++ b/adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts @@ -1,11 +1,11 @@ // #docplaster // #docregion // #docregion import-ComponentFixtureAutoDetect -import { ComponentFixtureAutoDetect } from '@angular/core/testing'; +import {ComponentFixtureAutoDetect} from '@angular/core/testing'; // #enddocregion import-ComponentFixtureAutoDetect -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { BannerComponent } from './banner.component'; +import {BannerComponent} from './banner.component'; describe('BannerComponent (AutoChangeDetect)', () => { let comp: BannerComponent; @@ -16,7 +16,7 @@ describe('BannerComponent (AutoChangeDetect)', () => { // #docregion auto-detect TestBed.configureTestingModule({ imports: [BannerComponent], - providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }], + providers: [{provide: ComponentFixtureAutoDetect, useValue: true}], }); // #enddocregion auto-detect fixture = TestBed.createComponent(BannerComponent); diff --git a/adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts b/adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts index 16adc528e6d..956c2755fa7 100755 --- a/adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts @@ -1,8 +1,8 @@ // #docplaster // #docregion -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { BannerComponent } from './banner.component'; +import {BannerComponent} from './banner.component'; describe('BannerComponent (inline template)', () => { // #docregion setup diff --git a/adev/src/content/examples/testing/src/app/banner/banner.component.ts b/adev/src/content/examples/testing/src/app/banner/banner.component.ts index eac78bbd7a8..5dafe4866fa 100755 --- a/adev/src/content/examples/testing/src/app/banner/banner.component.ts +++ b/adev/src/content/examples/testing/src/app/banner/banner.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion component @Component({ diff --git a/adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts b/adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts index 67b99bf657d..ae5fe333826 100755 --- a/adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts @@ -1,14 +1,14 @@ // #docplaster -import { DebugElement } from '@angular/core'; -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { first } from 'rxjs/operators'; +import {DebugElement} from '@angular/core'; +import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; +import {By} from '@angular/platform-browser'; +import {first} from 'rxjs/operators'; -import { addMatchers, click } from '../../testing'; -import { appProviders } from '../app.config'; -import { Hero } from '../model/hero'; +import {addMatchers, click} from '../../testing'; +import {appProviders} from '../app.config'; +import {Hero} from '../model/hero'; -import { DashboardHeroComponent } from './dashboard-hero.component'; +import {DashboardHeroComponent} from './dashboard-hero.component'; beforeEach(addMatchers); @@ -16,7 +16,7 @@ describe('DashboardHeroComponent class only', () => { // #docregion class-only it('raises the selected event when clicked', () => { const comp = new DashboardHeroComponent(); - const hero: Hero = { id: 42, name: 'Test' }; + const hero: Hero = {id: 42, name: 'Test'}; comp.hero = hero; comp.selected.pipe(first()).subscribe((selectedHero: Hero) => expect(selectedHero).toBe(hero)); @@ -52,7 +52,7 @@ describe('DashboardHeroComponent when tested directly', () => { heroEl = heroDe.nativeElement; // mock the hero supplied by the parent component - expectedHero = { id: 42, name: 'Test Name' }; + expectedHero = {id: 42, name: 'Test Name'}; // simulate the parent setting the input property with that hero comp.hero = expectedHero; @@ -154,7 +154,7 @@ describe('DashboardHeroComponent when inside a test host', () => { }); ////// Test Host Component ////// -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; // #docregion test-host @Component({ @@ -163,7 +163,7 @@ import { Component } from '@angular/core'; template: ` `, }) class TestHostComponent { - hero: Hero = { id: 42, name: 'Test Name' }; + hero: Hero = {id: 42, name: 'Test Name'}; selectedHero: Hero | undefined; onSelected(hero: Hero) { this.selectedHero = hero; diff --git a/adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts index 128e8a5e911..40417972f7d 100755 --- a/adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts +++ b/adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { UpperCasePipe } from '@angular/common'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {UpperCasePipe} from '@angular/common'; -import { Hero } from '../model/hero'; +import {Hero} from '../model/hero'; // #docregion component @Component({ diff --git a/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts index a3745c41585..8c364ef57e0 100644 --- a/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts +++ b/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts @@ -1,10 +1,10 @@ -import { Router } from '@angular/router'; +import {Router} from '@angular/router'; -import { DashboardComponent } from './dashboard.component'; -import { Hero } from '../model/hero'; +import {DashboardComponent} from './dashboard.component'; +import {Hero} from '../model/hero'; -import { addMatchers } from '../../testing'; -import { TestHeroService } from '../model/testing/test-hero.service'; +import {addMatchers} from '../../testing'; +import {TestHeroService} from '../model/testing/test-hero.service'; class FakeRouter { navigateByUrl(url: string) { @@ -51,7 +51,7 @@ describe('DashboardComponent class only', () => { }); it('should tell ROUTER to navigate by hero id', () => { - const hero: Hero = { id: 42, name: 'Abbracadabra' }; + const hero: Hero = {id: 42, name: 'Abbracadabra'}; const spy = spyOn(router, 'navigateByUrl'); comp.gotoDetail(hero); diff --git a/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts b/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts index c150ac0c5d5..da4608b3454 100755 --- a/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts @@ -1,20 +1,20 @@ -import { provideHttpClient } from '@angular/common/http'; -import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { TestBed, waitForAsync } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NavigationEnd, provideRouter, Router } from '@angular/router'; -import { RouterTestingHarness } from '@angular/router/testing'; -import { firstValueFrom } from 'rxjs'; -import { filter } from 'rxjs/operators'; +import {provideHttpClient} from '@angular/common/http'; +import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing'; +import {NO_ERRORS_SCHEMA} from '@angular/core'; +import {TestBed, waitForAsync} from '@angular/core/testing'; +import {By} from '@angular/platform-browser'; +import {NavigationEnd, provideRouter, Router} from '@angular/router'; +import {RouterTestingHarness} from '@angular/router/testing'; +import {firstValueFrom} from 'rxjs'; +import {filter} from 'rxjs/operators'; -import { addMatchers, click } from '../../testing'; -import { HeroService } from '../model/hero.service'; -import { getTestHeroes } from '../model/testing/test-heroes'; +import {addMatchers, click} from '../../testing'; +import {HeroService} from '../model/hero.service'; +import {getTestHeroes} from '../model/testing/test-heroes'; -import { DashboardComponent } from './dashboard.component'; -import { appConfig } from '../app.config'; -import { HeroDetailComponent } from '../hero/hero-detail.component'; +import {DashboardComponent} from './dashboard.component'; +import {appConfig} from '../app.config'; +import {HeroDetailComponent} from '../hero/hero-detail.component'; beforeEach(addMatchers); @@ -45,7 +45,7 @@ describe('DashboardComponent (shallow)', () => { TestBed.configureTestingModule( Object.assign({}, appConfig, { imports: [DashboardComponent, HeroDetailComponent], - providers: [provideRouter([{ path: 'heroes/:id', component: HeroDetailComponent }])], + providers: [provideRouter([{path: 'heroes/:id', component: HeroDetailComponent}])], schemas: [NO_ERRORS_SCHEMA], }), ); @@ -71,7 +71,7 @@ function compileAndCreate() { Object.assign({}, appConfig, { imports: [DashboardComponent], providers: [ - provideRouter([{ path: '**', component: DashboardComponent }]), + provideRouter([{path: '**', component: DashboardComponent}]), provideHttpClient(), provideHttpClientTesting(), HeroService, diff --git a/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.ts b/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.ts index 7bdc4dd6e9d..f765aff5193 100755 --- a/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.ts +++ b/adev/src/content/examples/testing/src/app/dashboard/dashboard.component.ts @@ -1,12 +1,12 @@ // #docregion -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {Router} from '@angular/router'; -import { Hero } from '../model/hero'; -import { HeroService } from '../model/hero.service'; -import { sharedImports } from '../shared/shared'; +import {Hero} from '../model/hero'; +import {HeroService} from '../model/hero.service'; +import {sharedImports} from '../shared/shared'; -import { DashboardHeroComponent } from './dashboard-hero.component'; +import {DashboardHeroComponent} from './dashboard-hero.component'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts b/adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts index 121bb6cc044..17e08c4cb96 100644 --- a/adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts +++ b/adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts @@ -1,6 +1,6 @@ -import { fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { interval, of } from 'rxjs'; -import { delay, take } from 'rxjs/operators'; +import {fakeAsync, tick, waitForAsync} from '@angular/core/testing'; +import {interval, of} from 'rxjs'; +import {delay, take} from 'rxjs/operators'; describe('Angular async helper', () => { describe('async', () => { @@ -119,7 +119,7 @@ describe('Angular async helper', () => { const callback = jasmine.createSpy('callback'); nestedTimer(callback); expect(callback).not.toHaveBeenCalled(); - tick(0, { processNewMacroTasksSynchronously: false }); + tick(0, {processNewMacroTasksSynchronously: false}); // the nested timeout will not be triggered expect(callback).not.toHaveBeenCalled(); tick(0); diff --git a/adev/src/content/examples/testing/src/app/demo/demo-main.ts b/adev/src/content/examples/testing/src/app/demo/demo-main.ts index 9243428b7ab..66b0ec18e1d 100644 --- a/adev/src/content/examples/testing/src/app/demo/demo-main.ts +++ b/adev/src/content/examples/testing/src/app/demo/demo-main.ts @@ -1,5 +1,5 @@ // main app entry point -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DemoModule } from './demo'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {DemoModule} from './demo'; platformBrowserDynamic().bootstrapModule(DemoModule); diff --git a/adev/src/content/examples/testing/src/app/demo/demo.spec.ts b/adev/src/content/examples/testing/src/app/demo/demo.spec.ts index 35f3b79f90d..562c91a8448 100644 --- a/adev/src/content/examples/testing/src/app/demo/demo.spec.ts +++ b/adev/src/content/examples/testing/src/app/demo/demo.spec.ts @@ -1,5 +1,5 @@ // #docplaster -import { LightswitchComponent, MasterService, ValueService, ReversePipe } from './demo'; +import {LightswitchComponent, MasterService, ValueService, ReversePipe} from './demo'; ///////// Fakes ///////// export class FakeValueService extends ValueService { @@ -51,7 +51,7 @@ describe('demo (no TestBed):', () => { }); it('#getValue should return faked value from a fake object', () => { - const fake = { getValue: () => 'fake value' }; + const fake = {getValue: () => 'fake value'}; masterService = new MasterService(fake as ValueService); expect(masterService.getValue()).toBe('fake value'); }); @@ -79,7 +79,7 @@ describe('demo (no TestBed):', () => { // #docregion no-before-each-test it('#getValue should return stubbed value from a spy', () => { // #docregion no-before-each-setup-call - const { masterService, stubValue, valueServiceSpy } = setup(); + const {masterService, stubValue, valueServiceSpy} = setup(); // #enddocregion no-before-each-setup-call expect(masterService.getValue()).withContext('service returned stub value').toBe(stubValue); expect(valueServiceSpy.getValue.calls.count()) @@ -96,7 +96,7 @@ describe('demo (no TestBed):', () => { const masterService = new MasterService(valueServiceSpy); valueServiceSpy.getValue.and.returnValue(stubValue); - return { masterService, stubValue, valueServiceSpy }; + return {masterService, stubValue, valueServiceSpy}; } // #enddocregion no-before-each-setup }); diff --git a/adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts index 980468b24ea..b464d18a677 100755 --- a/adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts +++ b/adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts @@ -1,5 +1,5 @@ // #docplaster -import { Component, DebugElement, Injectable } from '@angular/core'; +import {Component, DebugElement, Injectable} from '@angular/core'; import { ComponentFixture, fakeAsync, @@ -8,10 +8,10 @@ import { tick, waitForAsync, } from '@angular/core/testing'; -import { FormsModule, NgControl, NgModel } from '@angular/forms'; -import { By } from '@angular/platform-browser'; +import {FormsModule, NgControl, NgModel} from '@angular/forms'; +import {By} from '@angular/platform-browser'; -import { addMatchers, click } from '../../testing'; +import {addMatchers, click} from '../../testing'; import { BankAccountComponent, @@ -51,7 +51,7 @@ describe('demo (with TestBed):', () => { // #docregion value-service-inject-before-each beforeEach(() => { - TestBed.configureTestingModule({ providers: [ValueService] }); + TestBed.configureTestingModule({providers: [ValueService]}); // #enddocregion value-service-before-each service = TestBed.inject(ValueService); // #docregion value-service-before-each @@ -105,7 +105,7 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ // Provide both the service-to-test and its (spy) dependency - providers: [MasterService, { provide: ValueService, useValue: spy }], + providers: [MasterService, {provide: ValueService, useValue: spy}], }); // Inject both the service-to-test and its (spy) dependency masterService = TestBed.inject(MasterService); @@ -129,7 +129,7 @@ describe('demo (with TestBed):', () => { describe('use inject within `it`', () => { beforeEach(() => { - TestBed.configureTestingModule({ providers: [ValueService] }); + TestBed.configureTestingModule({providers: [ValueService]}); }); it('should use modified providers', inject([ValueService], (service: ValueService) => { @@ -142,7 +142,7 @@ describe('demo (with TestBed):', () => { let serviceValue: string; beforeEach(() => { - TestBed.configureTestingModule({ providers: [ValueService] }); + TestBed.configureTestingModule({providers: [ValueService]}); }); beforeEach(waitForAsync( @@ -400,7 +400,7 @@ describe('demo (with TestBed):', () => { imports: [Child1Component], }) .overrideComponent(Child1Component, { - set: { template: 'Fake' }, + set: {template: 'Fake'}, }) .createComponent(Child1Component); @@ -413,8 +413,8 @@ describe('demo (with TestBed):', () => { imports: [TestProvidersComponent], }) .overrideComponent(TestProvidersComponent, { - remove: { providers: [ValueService] }, - add: { providers: [{ provide: ValueService, useClass: FakeValueService }] }, + remove: {providers: [ValueService]}, + add: {providers: [{provide: ValueService, useClass: FakeValueService}]}, // Or replace them all (this component has only one provider) // set: { providers: [{ provide: ValueService, useClass: FakeValueService }] }, @@ -441,7 +441,7 @@ describe('demo (with TestBed):', () => { // }, // Or replace them all (this component has only one viewProvider) - set: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] }, + set: {viewProviders: [{provide: ValueService, useClass: FakeValueService}]}, }) .createComponent(TestViewProvidersComponent); @@ -464,10 +464,10 @@ describe('demo (with TestBed):', () => { providers: [ValueService], }) .overrideComponent(TestComponent, { - set: { providers: [{ provide: ValueService, useValue: {} }] }, + set: {providers: [{provide: ValueService, useValue: {}}]}, }) .overrideComponent(TestProvidersComponent, { - set: { providers: [{ provide: ValueService, useClass: FakeValueService }] }, + set: {providers: [{provide: ValueService, useClass: FakeValueService}]}, }) .createComponent(TestComponent); @@ -546,7 +546,7 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ imports: [ParentComponent, FakeChildComponent], }).overrideComponent(ParentComponent, { - set: { imports: [FakeChildComponent] }, + set: {imports: [FakeChildComponent]}, }); }); @@ -562,7 +562,7 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ imports: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent], }).overrideComponent(ParentComponent, { - set: { imports: [FakeChildWithGrandchildComponent, FakeGrandchildComponent] }, + set: {imports: [FakeChildWithGrandchildComponent, FakeGrandchildComponent]}, }); }); diff --git a/adev/src/content/examples/testing/src/app/demo/demo.ts b/adev/src/content/examples/testing/src/app/demo/demo.ts index 7fb7ad04e2d..e426a18b345 100755 --- a/adev/src/content/examples/testing/src/app/demo/demo.ts +++ b/adev/src/content/examples/testing/src/app/demo/demo.ts @@ -18,11 +18,11 @@ import { PipeTransform, SimpleChanges, } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { of } from 'rxjs'; -import { delay } from 'rxjs/operators'; +import {FormsModule} from '@angular/forms'; +import {of} from 'rxjs'; +import {delay} from 'rxjs/operators'; -import { sharedImports } from '../shared/shared'; +import {sharedImports} from '../shared/shared'; ////////// The App: Services and Components for the tests. ////////////// @@ -69,7 +69,7 @@ export class MasterService { /* * Reverse the input string. */ -@Pipe({ name: 'reverse', standalone: true }) +@Pipe({name: 'reverse', standalone: true}) export class ReversePipe implements PipeTransform { transform(s: string) { let r = ''; @@ -190,7 +190,7 @@ export class InputComponent { // } // As the styleguide recommends -@Directive({ standalone: true, selector: 'input[value]' }) +@Directive({standalone: true, selector: 'input[value]'}) export class InputValueBinderDirective { @HostBinding() @Input() value: any; @@ -249,7 +249,7 @@ export class IoComponent { imports: [IoComponent, sharedImports], }) export class IoParentComponent { - heroes: Hero[] = [{ name: 'Bob' }, { name: 'Carol' }, { name: 'Ted' }, { name: 'Alice' }]; + heroes: Hero[] = [{name: 'Bob'}, {name: 'Carol'}, {name: 'Ted'}, {name: 'Alice'}]; selectedHero!: Hero; onSelect(hero: Hero) { this.selectedHero = hero; @@ -314,7 +314,7 @@ export class ExternalTemplateComponent implements OnInit { }) export class InnerCompWithExternalTemplateComponent {} -@Component({ standalone: true, selector: 'needs-content', template: '' }) +@Component({standalone: true, selector: 'needs-content', template: ''}) export class NeedsContentComponent { // children with #content local variable @ContentChildren('content') children: any; @@ -480,7 +480,7 @@ export class ShellComponent {} LightswitchComponent, NeedsContentComponent, ReversePipeComponent, - MyIfParentComponent + MyIfParentComponent, ], }) export class DemoComponent {} diff --git a/adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts index fb1410660ad..fdddeb5a020 100755 --- a/adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts @@ -1,17 +1,17 @@ // #docplaster -import { HttpClient, HttpHandler, provideHttpClient } from '@angular/common/http'; -import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; -import { fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { provideRouter, Router } from '@angular/router'; -import { RouterTestingHarness } from '@angular/router/testing'; +import {HttpClient, HttpHandler, provideHttpClient} from '@angular/common/http'; +import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing'; +import {fakeAsync, TestBed, tick} from '@angular/core/testing'; +import {provideRouter, Router} from '@angular/router'; +import {RouterTestingHarness} from '@angular/router/testing'; -import { asyncData, click } from '../../testing'; -import { Hero } from '../model/hero'; -import { sharedImports } from '../shared/shared'; +import {asyncData, click} from '../../testing'; +import {Hero} from '../model/hero'; +import {sharedImports} from '../shared/shared'; -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroDetailService } from './hero-detail.service'; -import { HeroListComponent } from './hero-list.component'; +import {HeroDetailComponent} from './hero-detail.component'; +import {HeroDetailService} from './hero-detail.service'; +import {HeroListComponent} from './hero-list.component'; ////// Testing Vars ////// let component: HeroDetailComponent; @@ -32,7 +32,7 @@ const testHero = getTestHeroes()[0]; function overrideSetup() { // #docregion hds-spy class HeroDetailServiceSpy { - testHero: Hero = { ...testHero }; + testHero: Hero = {...testHero}; /* emit cloned test hero */ getHero = jasmine @@ -54,19 +54,19 @@ function overrideSetup() { imports: [HeroDetailComponent, HeroListComponent], providers: [ provideRouter([ - { path: 'heroes', component: HeroListComponent }, - { path: 'heroes/:id', component: HeroDetailComponent }, + {path: 'heroes', component: HeroListComponent}, + {path: 'heroes/:id', component: HeroDetailComponent}, ]), HttpClient, HttpHandler, // HeroDetailService at this level is IRRELEVANT! - { provide: HeroDetailService, useValue: {} }, + {provide: HeroDetailService, useValue: {}}, ], }), ) // #docregion override-component-method .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceSpy }] }, + set: {providers: [{provide: HeroDetailService, useClass: HeroDetailServiceSpy}]}, }) // #enddocregion override-component-method .compileComponents(); @@ -117,7 +117,7 @@ function overrideSetup() { } //////////////////// -import { getTestHeroes } from '../model/testing/test-hero.service'; +import {getTestHeroes} from '../model/testing/test-hero.service'; const firstHero = getTestHeroes()[0]; @@ -129,8 +129,8 @@ function heroModuleSetup() { imports: [HeroDetailComponent, HeroListComponent], providers: [ provideRouter([ - { path: 'heroes/:id', component: HeroDetailComponent }, - { path: 'heroes', component: HeroListComponent }, + {path: 'heroes/:id', component: HeroDetailComponent}, + {path: 'heroes', component: HeroListComponent}, ]), provideHttpClient(), provideHttpClientTesting(), @@ -161,7 +161,7 @@ function heroModuleSetup() { it('should save when click save but not navigate immediately', () => { click(page.saveBtn); - expect(TestBed.inject(HttpTestingController).expectOne({ method: 'PUT', url: 'api/heroes' })); + expect(TestBed.inject(HttpTestingController).expectOne({method: 'PUT', url: 'api/heroes'})); expect(TestBed.inject(Router).url).toEqual('/heroes/41'); }); @@ -208,9 +208,9 @@ function heroModuleSetup() { } ///////////////////// -import { FormsModule } from '@angular/forms'; -import { TitleCasePipe } from '../shared/title-case.pipe'; -import { appConfig } from '../app.config'; +import {FormsModule} from '@angular/forms'; +import {TitleCasePipe} from '../shared/title-case.pipe'; +import {appConfig} from '../app.config'; function formsModuleSetup() { // #docregion setup-forms-module @@ -221,7 +221,7 @@ function formsModuleSetup() { providers: [ provideHttpClient(), provideHttpClientTesting(), - provideRouter([{ path: 'heroes/:id', component: HeroDetailComponent }]), + provideRouter([{path: 'heroes/:id', component: HeroDetailComponent}]), ], }), ).compileComponents(); @@ -245,7 +245,7 @@ function sharedModuleSetup() { Object.assign({}, appConfig, { imports: [HeroDetailComponent, sharedImports], providers: [ - provideRouter([{ path: 'heroes/:id', component: HeroDetailComponent }]), + provideRouter([{path: 'heroes/:id', component: HeroDetailComponent}]), provideHttpClient(), provideHttpClientTesting(), ], diff --git a/adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts b/adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts index 4d593eb0e08..57313735362 100755 --- a/adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts +++ b/adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts @@ -1,11 +1,11 @@ // #docplaster -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router, RouterLink } from '@angular/router'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute, Router, RouterLink} from '@angular/router'; -import { Hero } from '../model/hero'; -import { sharedImports } from '../shared/shared'; +import {Hero} from '../model/hero'; +import {sharedImports} from '../shared/shared'; -import { HeroDetailService } from './hero-detail.service'; +import {HeroDetailService} from './hero-detail.service'; // #docregion prototype @Component({ @@ -38,7 +38,7 @@ export class HeroDetailComponent implements OnInit { private getHero(id: string | null): void { // when no id or id===0, create new blank hero if (!id) { - this.hero = { id: 0, name: '' } as Hero; + this.hero = {id: 0, name: ''} as Hero; return; } @@ -60,7 +60,7 @@ export class HeroDetailComponent implements OnInit { } gotoList() { - this.router.navigate(['../'], { relativeTo: this.route }); + this.router.navigate(['../'], {relativeTo: this.route}); } // #docregion prototype } diff --git a/adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts b/adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts index e2167eb32d5..441abc81a62 100755 --- a/adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts +++ b/adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts @@ -1,12 +1,12 @@ -import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import {map} from 'rxjs/operators'; -import { Hero } from '../model/hero'; -import { HeroService } from '../model/hero.service'; +import {Hero} from '../model/hero'; +import {HeroService} from '../model/hero.service'; // #docregion prototype -@Injectable({ providedIn: 'root' }) +@Injectable({providedIn: 'root'}) export class HeroDetailService { constructor(private heroService: HeroService) {} // #enddocregion prototype diff --git a/adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts index a069089c629..46de53a6716 100755 --- a/adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts @@ -1,17 +1,17 @@ -import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; +import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {DebugElement} from '@angular/core'; -import { Router } from '@angular/router'; +import {Router} from '@angular/router'; -import { addMatchers } from '../../testing'; -import { HeroService } from '../model/hero.service'; -import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service'; +import {addMatchers} from '../../testing'; +import {HeroService} from '../model/hero.service'; +import {getTestHeroes, TestHeroService} from '../model/testing/test-hero.service'; -import { HeroListComponent } from './hero-list.component'; -import { HighlightDirective } from '../shared/highlight.directive'; -import { appConfig } from '../app.config'; +import {HeroListComponent} from './hero-list.component'; +import {HighlightDirective} from '../shared/highlight.directive'; +import {appConfig} from '../app.config'; const HEROES = getTestHeroes(); @@ -29,8 +29,8 @@ describe('HeroListComponent', () => { TestBed.configureTestingModule( Object.assign({}, appConfig, { providers: [ - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy }, + {provide: HeroService, useClass: TestHeroService}, + {provide: Router, useValue: routerSpy}, ], }), ) diff --git a/adev/src/content/examples/testing/src/app/hero/hero-list.component.ts b/adev/src/content/examples/testing/src/app/hero/hero-list.component.ts index 8fd38574aa3..4347400e6c6 100755 --- a/adev/src/content/examples/testing/src/app/hero/hero-list.component.ts +++ b/adev/src/content/examples/testing/src/app/hero/hero-list.component.ts @@ -1,12 +1,12 @@ -import { Component } from '@angular/core'; -import { AsyncPipe } from '@angular/common'; -import { Router } from '@angular/router'; +import {Component} from '@angular/core'; +import {AsyncPipe} from '@angular/common'; +import {Router} from '@angular/router'; -import { Observable } from 'rxjs'; +import {Observable} from 'rxjs'; -import { Hero } from '../model/hero'; -import { HeroService } from '../model/hero.service'; -import { sharedImports } from '../shared/shared'; +import {Hero} from '../model/hero'; +import {HeroService} from '../model/hero.service'; +import {sharedImports} from '../shared/shared'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/app/hero/hero.routes.ts b/adev/src/content/examples/testing/src/app/hero/hero.routes.ts index 4db95eaa34c..1668b130448 100755 --- a/adev/src/content/examples/testing/src/app/hero/hero.routes.ts +++ b/adev/src/content/examples/testing/src/app/hero/hero.routes.ts @@ -1,8 +1,8 @@ -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; -import { Routes } from '@angular/router'; +import {HeroListComponent} from './hero-list.component'; +import {HeroDetailComponent} from './hero-detail.component'; +import {Routes} from '@angular/router'; export default [ - { path: '', component: HeroListComponent }, - { path: ':id', component: HeroDetailComponent }, + {path: '', component: HeroListComponent}, + {path: ':id', component: HeroDetailComponent}, ] as Routes; diff --git a/adev/src/content/examples/testing/src/app/in-memory-data.service.ts b/adev/src/content/examples/testing/src/app/in-memory-data.service.ts index b8122a4729c..23cf6475af6 100644 --- a/adev/src/content/examples/testing/src/app/in-memory-data.service.ts +++ b/adev/src/content/examples/testing/src/app/in-memory-data.service.ts @@ -1,5 +1,5 @@ -import { InMemoryDbService } from 'angular-in-memory-web-api'; -import { QUOTES } from './twain/twain.data'; +import {InMemoryDbService} from 'angular-in-memory-web-api'; +import {QUOTES} from './twain/twain.data'; // Adjust to reduce number of quotes const maxQuotes = Infinity; // 0; @@ -8,17 +8,17 @@ const maxQuotes = Infinity; // 0; export class InMemoryDataService implements InMemoryDbService { createDb() { const heroes = [ - { id: 12, name: 'Dr. Nice' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr. IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' }, + {id: 12, name: 'Dr. Nice'}, + {id: 13, name: 'Bombasto'}, + {id: 14, name: 'Celeritas'}, + {id: 15, name: 'Magneta'}, + {id: 16, name: 'RubberMan'}, + {id: 17, name: 'Dynama'}, + {id: 18, name: 'Dr. IQ'}, + {id: 19, name: 'Magma'}, + {id: 20, name: 'Tornado'}, ]; - return { heroes, quotes: QUOTES.slice(0, maxQuotes) }; + return {heroes, quotes: QUOTES.slice(0, maxQuotes)}; } } diff --git a/adev/src/content/examples/testing/src/app/model/hero.service.spec.ts b/adev/src/content/examples/testing/src/app/model/hero.service.spec.ts index 447d7af3389..67cad203620 100644 --- a/adev/src/content/examples/testing/src/app/model/hero.service.spec.ts +++ b/adev/src/content/examples/testing/src/app/model/hero.service.spec.ts @@ -1,13 +1,13 @@ -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; // Other imports -import { TestBed } from '@angular/core/testing'; -import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http'; +import {TestBed} from '@angular/core/testing'; +import {HttpClient, HttpResponse, HttpErrorResponse} from '@angular/common/http'; -import { asyncData, asyncError } from '../../testing/async-observable-helpers'; +import {asyncData, asyncError} from '../../testing/async-observable-helpers'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; +import {Hero} from './hero'; +import {HeroService} from './hero.service'; describe('HeroesService (with spies)', () => { // #docregion test-with-spies @@ -22,8 +22,8 @@ describe('HeroesService (with spies)', () => { it('should return expected heroes (HttpClient called once)', (done: DoneFn) => { const expectedHeroes: Hero[] = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, + {id: 1, name: 'A'}, + {id: 2, name: 'B'}, ]; httpClientSpy.get.and.returnValue(asyncData(expectedHeroes)); @@ -90,8 +90,8 @@ describe('HeroesService (with mocks)', () => { beforeEach(() => { heroService = TestBed.inject(HeroService); expectedHeroes = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, + {id: 1, name: 'A'}, + {id: 2, name: 'B'}, ] as Hero[]; }); @@ -131,7 +131,7 @@ describe('HeroesService (with mocks)', () => { const req = httpTestingController.expectOne(heroService.heroesUrl); // respond with a 404 and the error message in the body - req.flush(msg, { status: 404, statusText: 'Not Found' }); + req.flush(msg, {status: 404, statusText: 'Not Found'}); }); it('should return expected heroes (called multiple times)', () => { @@ -148,7 +148,7 @@ describe('HeroesService (with mocks)', () => { // Respond to each request with different mock hero results requests[0].flush([]); - requests[1].flush([{ id: 1, name: 'bob' }]); + requests[1].flush([{id: 1, name: 'bob'}]); requests[2].flush(expectedHeroes); }); }); @@ -158,7 +158,7 @@ describe('HeroesService (with mocks)', () => { const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`; it('should update a hero and return it', () => { - const updateHero: Hero = { id: 1, name: 'A' }; + const updateHero: Hero = {id: 1, name: 'A'}; heroService.updateHero(updateHero).subscribe({ next: (data) => expect(data).withContext('should return the hero').toEqual(updateHero), @@ -181,7 +181,7 @@ describe('HeroesService (with mocks)', () => { it('should turn 404 error into user-facing error', () => { const msg = 'Deliberate 404'; - const updateHero: Hero = { id: 1, name: 'A' }; + const updateHero: Hero = {id: 1, name: 'A'}; heroService.updateHero(updateHero).subscribe({ next: (heroes) => fail('expected to fail'), error: (error) => expect(error.message).toContain(msg), @@ -190,7 +190,7 @@ describe('HeroesService (with mocks)', () => { const req = httpTestingController.expectOne(heroService.heroesUrl); // respond with a 404 and the error message in the body - req.flush(msg, { status: 404, statusText: 'Not Found' }); + req.flush(msg, {status: 404, statusText: 'Not Found'}); }); it('should turn network error into user-facing error', (done) => { @@ -198,7 +198,7 @@ describe('HeroesService (with mocks)', () => { // the network level. Connection timeout, DNS error, offline, etc. const errorEvent = new ProgressEvent('error'); - const updateHero: Hero = { id: 1, name: 'A' }; + const updateHero: Hero = {id: 1, name: 'A'}; heroService.updateHero(updateHero).subscribe({ next: (heroes) => fail('expected to fail'), error: (error) => { diff --git a/adev/src/content/examples/testing/src/app/model/hero.service.ts b/adev/src/content/examples/testing/src/app/model/hero.service.ts index 0c238f686e5..2fddbd85e69 100644 --- a/adev/src/content/examples/testing/src/app/model/hero.service.ts +++ b/adev/src/content/examples/testing/src/app/model/hero.service.ts @@ -1,15 +1,15 @@ -import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; -import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; -import { catchError, map, tap } from 'rxjs/operators'; +import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import {catchError, map, tap} from 'rxjs/operators'; -import { Hero } from './hero'; +import {Hero} from './hero'; const httpOptions = { - headers: new HttpHeaders({ 'Content-Type': 'application/json' }), + headers: new HttpHeaders({'Content-Type': 'application/json'}), }; -@Injectable({ providedIn: 'root' }) +@Injectable({providedIn: 'root'}) export class HeroService { readonly heroesUrl = 'api/heroes'; // URL to web api diff --git a/adev/src/content/examples/testing/src/app/model/testing/http-client.spec.ts b/adev/src/content/examples/testing/src/app/model/testing/http-client.spec.ts index c2277021d89..21dcd3143f6 100644 --- a/adev/src/content/examples/testing/src/app/model/testing/http-client.spec.ts +++ b/adev/src/content/examples/testing/src/app/model/testing/http-client.spec.ts @@ -1,11 +1,11 @@ // Http testing module and mocking controller -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; // Other imports -import { TestBed } from '@angular/core/testing'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import {TestBed} from '@angular/core/testing'; +import {HttpClient, HttpErrorResponse} from '@angular/common/http'; -import { HttpHeaders } from '@angular/common/http'; +import {HttpHeaders} from '@angular/common/http'; interface Data { name: string; @@ -34,7 +34,7 @@ describe('HttpClient testing', () => { /// Tests begin /// it('can test HttpClient.get', () => { - const testData: Data = { name: 'Test Data' }; + const testData: Data = {name: 'Test Data'}; // Make an HTTP GET request httpClient.get(testUrl).subscribe((data) => @@ -59,12 +59,12 @@ describe('HttpClient testing', () => { }); it('can test HttpClient.get with matching header', () => { - const testData: Data = { name: 'Test Data' }; + const testData: Data = {name: 'Test Data'}; // Make an HTTP GET request with specific header httpClient .get(testUrl, { - headers: new HttpHeaders({ Authorization: 'my-auth-token' }), + headers: new HttpHeaders({Authorization: 'my-auth-token'}), }) .subscribe((data) => expect(data).toEqual(testData)); @@ -75,12 +75,7 @@ describe('HttpClient testing', () => { }); it('can test multiple requests', () => { - const testData: Data[] = [ - { name: 'bob' }, - { name: 'carol' }, - { name: 'ted' }, - { name: 'alice' }, - ]; + const testData: Data[] = [{name: 'bob'}, {name: 'carol'}, {name: 'ted'}, {name: 'alice'}]; // Make three requests in a row httpClient @@ -121,7 +116,7 @@ describe('HttpClient testing', () => { const req = httpTestingController.expectOne(testUrl); // Respond with mock error - req.flush(emsg, { status: 404, statusText: 'Not Found' }); + req.flush(emsg, {status: 404, statusText: 'Not Found'}); }); it('can test for network error', (done) => { diff --git a/adev/src/content/examples/testing/src/app/model/testing/test-hero.service.ts b/adev/src/content/examples/testing/src/app/model/testing/test-hero.service.ts index f4fc9efa251..c93a3122a8a 100644 --- a/adev/src/content/examples/testing/src/app/model/testing/test-hero.service.ts +++ b/adev/src/content/examples/testing/src/app/model/testing/test-hero.service.ts @@ -1,18 +1,18 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; -import { Observable } from 'rxjs'; -import { asyncData } from '../../../testing'; +import {Observable} from 'rxjs'; +import {asyncData} from '../../../testing'; -import { map } from 'rxjs/operators'; +import {map} from 'rxjs/operators'; // re-export for tester convenience -export { Hero } from '../hero'; -export { HeroService } from '../hero.service'; -export { getTestHeroes } from './test-heroes'; +export {Hero} from '../hero'; +export {HeroService} from '../hero.service'; +export {getTestHeroes} from './test-heroes'; -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; -import { getTestHeroes } from './test-heroes'; +import {Hero} from '../hero'; +import {HeroService} from '../hero.service'; +import {getTestHeroes} from './test-heroes'; @Injectable() /** diff --git a/adev/src/content/examples/testing/src/app/model/testing/test-heroes.ts b/adev/src/content/examples/testing/src/app/model/testing/test-heroes.ts index 4cd45d15b56..709ec3212de 100644 --- a/adev/src/content/examples/testing/src/app/model/testing/test-heroes.ts +++ b/adev/src/content/examples/testing/src/app/model/testing/test-heroes.ts @@ -1,13 +1,13 @@ -import { Hero } from '../hero'; +import {Hero} from '../hero'; /** return fresh array of test heroes */ export function getTestHeroes(): Hero[] { return [ - { id: 41, name: 'Bob' }, - { id: 42, name: 'Carol' }, - { id: 43, name: 'Ted' }, - { id: 44, name: 'Alice' }, - { id: 45, name: 'Speedy' }, - { id: 46, name: 'Stealthy' }, + {id: 41, name: 'Bob'}, + {id: 42, name: 'Carol'}, + {id: 43, name: 'Ted'}, + {id: 44, name: 'Alice'}, + {id: 45, name: 'Speedy'}, + {id: 46, name: 'Stealthy'}, ]; } diff --git a/adev/src/content/examples/testing/src/app/model/user.service.ts b/adev/src/content/examples/testing/src/app/model/user.service.ts index 3989e0b95bc..0cb52202e34 100644 --- a/adev/src/content/examples/testing/src/app/model/user.service.ts +++ b/adev/src/content/examples/testing/src/app/model/user.service.ts @@ -1,7 +1,7 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable() export class UserService { isLoggedIn = true; - user = { name: 'Sam Spade' }; + user = {name: 'Sam Spade'}; } diff --git a/adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts b/adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts index f49344bd87a..6566ebfb522 100755 --- a/adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts @@ -1,8 +1,8 @@ // #docplaster // #docregion without-toBlob-macrotask -import { fakeAsync, TestBed, tick } from '@angular/core/testing'; +import {fakeAsync, TestBed, tick} from '@angular/core/testing'; -import { CanvasComponent } from './canvas.component'; +import {CanvasComponent} from './canvas.component'; describe('CanvasComponent', () => { // #enddocregion without-toBlob-macrotask @@ -11,7 +11,7 @@ describe('CanvasComponent', () => { (window as any).__zone_symbol__FakeAsyncTestMacroTask = [ { source: 'HTMLCanvasElement.toBlob', - callbackArgs: [{ size: 200 }], + callbackArgs: [{size: 200}], }, ]; }); diff --git a/adev/src/content/examples/testing/src/app/shared/canvas.component.ts b/adev/src/content/examples/testing/src/app/shared/canvas.component.ts index 63a93f73502..e4b3d49bcff 100755 --- a/adev/src/content/examples/testing/src/app/shared/canvas.component.ts +++ b/adev/src/content/examples/testing/src/app/shared/canvas.component.ts @@ -6,7 +6,7 @@ import 'zone.js/plugins/zone-patch-canvas'; // #enddocregion import-canvas-patch // #docregion main -import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; +import {Component, AfterViewInit, ViewChild, ElementRef} from '@angular/core'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts b/adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts index da83ba3559e..7ca4e491441 100755 --- a/adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts +++ b/adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts @@ -1,8 +1,8 @@ -import { Component, DebugElement } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; +import {Component, DebugElement} from '@angular/core'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {By} from '@angular/platform-browser'; -import { HighlightDirective } from './highlight.directive'; +import {HighlightDirective} from './highlight.directive'; // #docregion test-component @Component({ diff --git a/adev/src/content/examples/testing/src/app/shared/highlight.directive.ts b/adev/src/content/examples/testing/src/app/shared/highlight.directive.ts index 7a8566236a5..64ff54a524f 100755 --- a/adev/src/content/examples/testing/src/app/shared/highlight.directive.ts +++ b/adev/src/content/examples/testing/src/app/shared/highlight.directive.ts @@ -1,8 +1,8 @@ /* eslint-disable @angular-eslint/directive-selector */ // #docregion -import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; +import {Directive, ElementRef, Input, OnChanges} from '@angular/core'; -@Directive({ standalone: true, selector: '[highlight]' }) +@Directive({standalone: true, selector: '[highlight]'}) /** * Set backgroundColor for the attached element to highlight color * and set the element's customProperty to true diff --git a/adev/src/content/examples/testing/src/app/shared/shared.ts b/adev/src/content/examples/testing/src/app/shared/shared.ts index 1dce3040881..98c8dbec0b3 100755 --- a/adev/src/content/examples/testing/src/app/shared/shared.ts +++ b/adev/src/content/examples/testing/src/app/shared/shared.ts @@ -1,7 +1,7 @@ -import { FormsModule } from '@angular/forms'; +import {FormsModule} from '@angular/forms'; -import { HighlightDirective } from './highlight.directive'; -import { TitleCasePipe } from './title-case.pipe'; -import { NgFor, NgIf } from '@angular/common'; +import {HighlightDirective} from './highlight.directive'; +import {TitleCasePipe} from './title-case.pipe'; +import {NgFor, NgIf} from '@angular/common'; export const sharedImports = [FormsModule, HighlightDirective, TitleCasePipe, NgIf, NgFor]; diff --git a/adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts b/adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts index add14971456..a4501980cdb 100644 --- a/adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts +++ b/adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -import { TitleCasePipe } from './title-case.pipe'; +import {TitleCasePipe} from './title-case.pipe'; // #docregion excerpt describe('TitleCasePipe', () => { diff --git a/adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts b/adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts index 62369098594..16e7e4c90d6 100755 --- a/adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts +++ b/adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts @@ -1,7 +1,7 @@ // #docregion -import { Pipe, PipeTransform } from '@angular/core'; +import {Pipe, PipeTransform} from '@angular/core'; -@Pipe({ name: 'titlecase', standalone: true, pure: true }) +@Pipe({name: 'titlecase', standalone: true, pure: true}) /** Transform to Title Case: uppercase the first letter of the words in a string. */ export class TitleCasePipe implements PipeTransform { transform(input: string): string { diff --git a/adev/src/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts b/adev/src/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts index 892945c592c..d69b474d4a1 100755 --- a/adev/src/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts +++ b/adev/src/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts @@ -1,12 +1,12 @@ // #docplaster -import { fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing'; +import {fakeAsync, ComponentFixture, TestBed, tick} from '@angular/core/testing'; // #docregion import-marbles -import { cold, getTestScheduler } from 'jasmine-marbles'; +import {cold, getTestScheduler} from 'jasmine-marbles'; // #enddocregion import-marbles -import { TwainService } from './twain.service'; -import { TwainComponent } from './twain.component'; +import {TwainService} from './twain.service'; +import {TwainComponent} from './twain.component'; describe('TwainComponent (marbles)', () => { let component: TwainComponent; @@ -29,7 +29,7 @@ describe('TwainComponent (marbles)', () => { TestBed.configureTestingModule({ imports: [TwainComponent], - providers: [{ provide: TwainService, useValue: twainService }], + providers: [{provide: TwainService, useValue: twainService}], }); fixture = TestBed.createComponent(TwainComponent); @@ -43,7 +43,7 @@ describe('TwainComponent (marbles)', () => { it('should show quote after getQuote (marbles)', () => { // observable test quote value and complete(), after delay // #docregion test-quote-marbles - const q$ = cold('---x|', { x: testQuote }); + const q$ = cold('---x|', {x: testQuote}); // #enddocregion test-quote-marbles getQuoteSpy.and.returnValue(q$); diff --git a/adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts b/adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts index eee64b7f828..5d9746a1c96 100755 --- a/adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts @@ -1,13 +1,13 @@ // #docplaster -import { fakeAsync, ComponentFixture, TestBed, tick, waitForAsync } from '@angular/core/testing'; +import {fakeAsync, ComponentFixture, TestBed, tick, waitForAsync} from '@angular/core/testing'; -import { asyncData, asyncError } from '../../testing'; +import {asyncData, asyncError} from '../../testing'; -import { of, throwError } from 'rxjs'; -import { last } from 'rxjs/operators'; +import {of, throwError} from 'rxjs'; +import {last} from 'rxjs/operators'; -import { TwainComponent } from './twain.component'; -import { TwainService } from './twain.service'; +import {TwainComponent} from './twain.component'; +import {TwainService} from './twain.service'; describe('TwainComponent', () => { let component: TwainComponent; @@ -36,7 +36,7 @@ describe('TwainComponent', () => { TestBed.configureTestingModule({ imports: [TwainComponent], - providers: [{ provide: TwainService, useValue: twainService }], + providers: [{provide: TwainService, useValue: twainService}], }); fixture = TestBed.createComponent(TwainComponent); diff --git a/adev/src/content/examples/testing/src/app/twain/twain.component.ts b/adev/src/content/examples/testing/src/app/twain/twain.component.ts index 2e652662962..2f1d1aa979a 100755 --- a/adev/src/content/examples/testing/src/app/twain/twain.component.ts +++ b/adev/src/content/examples/testing/src/app/twain/twain.component.ts @@ -1,12 +1,12 @@ // #docregion -import { Component, OnInit } from '@angular/core'; -import { AsyncPipe } from '@angular/common'; -import { sharedImports } from '../shared/shared'; +import {Component, OnInit} from '@angular/core'; +import {AsyncPipe} from '@angular/common'; +import {sharedImports} from '../shared/shared'; -import { Observable, of } from 'rxjs'; -import { catchError, startWith } from 'rxjs/operators'; +import {Observable, of} from 'rxjs'; +import {catchError, startWith} from 'rxjs/operators'; -import { TwainService } from './twain.service'; +import {TwainService} from './twain.service'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/app/twain/twain.data.ts b/adev/src/content/examples/testing/src/app/twain/twain.data.ts index 0fca2d530a3..9b550934c03 100644 --- a/adev/src/content/examples/testing/src/app/twain/twain.data.ts +++ b/adev/src/content/examples/testing/src/app/twain/twain.data.ts @@ -1,4 +1,4 @@ -import { Quote } from './quote'; +import {Quote} from './quote'; export const QUOTES: Quote[] = [ 'Always do right. This will gratify some people and astonish the rest.', @@ -11,4 +11,4 @@ export const QUOTES: Quote[] = [ "Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn't.", 'The man who does not read good books has no advantage over the man who cannot read them.', 'Get your facts first, and then you can distort them as much as you please.', -].map((q, i) => ({ id: i + 1, quote: q })); +].map((q, i) => ({id: i + 1, quote: q})); diff --git a/adev/src/content/examples/testing/src/app/twain/twain.service.ts b/adev/src/content/examples/testing/src/app/twain/twain.service.ts index af32a0fea8d..bdb9dff58e2 100644 --- a/adev/src/content/examples/testing/src/app/twain/twain.service.ts +++ b/adev/src/content/examples/testing/src/app/twain/twain.service.ts @@ -1,11 +1,11 @@ // Mark Twain Quote service gets quotes from server -import { Injectable } from '@angular/core'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {HttpClient, HttpErrorResponse} from '@angular/common/http'; -import { Observable, of, throwError, Observer } from 'rxjs'; -import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators'; +import {Observable, of, throwError, Observer} from 'rxjs'; +import {concat, map, retryWhen, switchMap, take, tap} from 'rxjs/operators'; -import { Quote } from './quote'; +import {Quote} from './quote'; @Injectable() export class TwainService { diff --git a/adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts b/adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts index 5ed6f612386..4cd6b460d65 100755 --- a/adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts +++ b/adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts @@ -1,13 +1,13 @@ // #docplaster -import { ComponentFixture, inject, TestBed } from '@angular/core/testing'; +import {ComponentFixture, inject, TestBed} from '@angular/core/testing'; -import { UserService } from '../model/user.service'; -import { WelcomeComponent } from './welcome.component'; +import {UserService} from '../model/user.service'; +import {WelcomeComponent} from './welcome.component'; // #docregion mock-user-service class MockUserService { isLoggedIn = true; - user = { name: 'Test User' }; + user = {name: 'Test User'}; } // #enddocregion mock-user-service @@ -19,7 +19,7 @@ describe('WelcomeComponent (class only)', () => { beforeEach(() => { TestBed.configureTestingModule({ // provide the component-under-test and dependent service - providers: [WelcomeComponent, { provide: UserService, useClass: MockUserService }], + providers: [WelcomeComponent, {provide: UserService, useClass: MockUserService}], }); // inject both the component and the dependent service. comp = TestBed.inject(WelcomeComponent); @@ -62,7 +62,7 @@ describe('WelcomeComponent', () => { // #docregion user-service-stub userServiceStub = { isLoggedIn: true, - user: { name: 'Test User' }, + user: {name: 'Test User'}, }; // #enddocregion user-service-stub @@ -73,7 +73,7 @@ describe('WelcomeComponent', () => { // providers: [ UserService ], // NO! Don't provide the real service! // Provide a test-double instead // #docregion setup - providers: [{ provide: UserService, useValue: userServiceStub }], + providers: [{provide: UserService, useValue: userServiceStub}], }); // #enddocregion config-test-module diff --git a/adev/src/content/examples/testing/src/app/welcome/welcome.component.ts b/adev/src/content/examples/testing/src/app/welcome/welcome.component.ts index 4a928193551..f230cd70a25 100755 --- a/adev/src/content/examples/testing/src/app/welcome/welcome.component.ts +++ b/adev/src/content/examples/testing/src/app/welcome/welcome.component.ts @@ -1,6 +1,6 @@ // #docregion -import { Component, OnInit } from '@angular/core'; -import { UserService } from '../model/user.service'; +import {Component, OnInit} from '@angular/core'; +import {UserService} from '../model/user.service'; @Component({ standalone: true, diff --git a/adev/src/content/examples/testing/src/main.ts b/adev/src/content/examples/testing/src/main.ts index eebe28c15c2..091b8a9b07c 100755 --- a/adev/src/content/examples/testing/src/main.ts +++ b/adev/src/content/examples/testing/src/main.ts @@ -1,6 +1,6 @@ // main app entry point -import { bootstrapApplication } from '@angular/platform-browser'; -import { AppComponent } from './app/app.component'; -import { appConfig } from './app/app.config'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/adev/src/content/examples/testing/src/testing/async-observable-helpers.ts b/adev/src/content/examples/testing/src/testing/async-observable-helpers.ts index 4e0035709f3..d2cdd657237 100644 --- a/adev/src/content/examples/testing/src/testing/async-observable-helpers.ts +++ b/adev/src/content/examples/testing/src/testing/async-observable-helpers.ts @@ -10,7 +10,7 @@ * * Using `asap` scheduler - as in `of(value, asap)` - doesn't work either. */ -import { defer } from 'rxjs'; +import {defer} from 'rxjs'; // #docregion async-data /** diff --git a/adev/src/content/examples/testing/src/testing/index.ts b/adev/src/content/examples/testing/src/testing/index.ts index ca856e71a4e..e5ed104e7d5 100644 --- a/adev/src/content/examples/testing/src/testing/index.ts +++ b/adev/src/content/examples/testing/src/testing/index.ts @@ -1,5 +1,5 @@ -import { DebugElement } from '@angular/core'; -import { ComponentFixture, tick } from '@angular/core/testing'; +import {DebugElement} from '@angular/core'; +import {ComponentFixture, tick} from '@angular/core/testing'; export * from './async-observable-helpers'; export * from './jasmine-matchers'; @@ -16,8 +16,8 @@ export function advance(f: ComponentFixture): void { // #docregion click-event /** Button events to pass to `DebugElement.triggerEventHandler` for RouterLink event handler */ export const ButtonClickEvents = { - left: { button: 0 }, - right: { button: 2 }, + left: {button: 0}, + right: {button: 2}, }; /** Simulate element click. Defaults to mouse left-button click event. */ diff --git a/adev/src/content/examples/testing/src/testing/jasmine-matchers.ts b/adev/src/content/examples/testing/src/testing/jasmine-matchers.ts index 65c6ee284a0..c816509e492 100644 --- a/adev/src/content/examples/testing/src/testing/jasmine-matchers.ts +++ b/adev/src/content/examples/testing/src/testing/jasmine-matchers.ts @@ -19,7 +19,7 @@ function toHaveText(): jasmine.CustomMatcher { const actualText = elementText(actual); const pass = actualText.indexOf(expectedText) > -1; const message = pass ? '' : composeMessage(); - return { pass, message }; + return {pass, message}; function composeMessage() { const a = actualText.length < 100 ? actualText : actualText.slice(0, 100) + '...'; diff --git a/adev/src/content/examples/two-way-binding/e2e/app.po.ts b/adev/src/content/examples/two-way-binding/e2e/app.po.ts index 82ea75ba504..27fb1afae07 100644 --- a/adev/src/content/examples/two-way-binding/e2e/app.po.ts +++ b/adev/src/content/examples/two-way-binding/e2e/app.po.ts @@ -1,4 +1,4 @@ -import { browser, by, element } from 'protractor'; +import {browser, by, element} from 'protractor'; export class AppPage { navigateTo() { diff --git a/adev/src/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts index d24588b6416..f339f4af25a 100644 --- a/adev/src/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Two-way binding e2e tests', () => { - beforeEach(() => browser.get('')); const minusButton = element.all(by.css('button')).get(0); @@ -36,5 +35,4 @@ describe('Two-way binding e2e tests', () => { it('should display De-sugared two-way binding', async () => { expect(await element(by.css('h2')).getText()).toEqual('De-sugared two-way binding'); }); - }); diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts index e45e05b424b..5ceca5cf1f2 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by, ExpectedConditions } from 'protractor'; +import {browser, element, by, ExpectedConditions} from 'protractor'; describe('Lazy Loading AngularJS Tests', () => { const pageElements = { @@ -43,41 +43,40 @@ describe('Lazy Loading AngularJS Tests', () => { async function loadAngularJS() { // Abort if `resumeBootstrap` has already occurred if (await browser.executeScript(`return '__TESTABILITY__NG1_APP_ROOT_INJECTOR__' in window;`)) { - return; + return; } // Might have to re-insert the 'NG_DEFER_BOOTSTRAP!' if the name has been changed since protractor loaded the page - if (!await browser.executeScript("window.name.includes('NG_DEFER_BOOTSTRAP!')")) { - await browser.executeScript("window.name = 'NG_DEFER_BOOTSTRAP!' + name"); + if (!(await browser.executeScript("window.name.includes('NG_DEFER_BOOTSTRAP!')"))) { + await browser.executeScript("window.name = 'NG_DEFER_BOOTSTRAP!' + name"); } // Wait for the AngularJS bundle to download and initialize await browser.wait( ExpectedConditions.presenceOf(element(by.css('app-root app-angular-js'))), 5000, - 'AngularJS app' + 'AngularJS app', ); // Run the protractor pre-bootstrap logic and resumeBootstrap // Based on https://github.com/angular/protractor/blob/5.3.0/lib/browser.ts#L950-L969 { - const moduleNames = []; - for (const {name, script, args} of browser.mockModules_) { - moduleNames.push(name); - await browser.executeScriptWithDescription(script, 'add mock module ' + name, ...args); - } + const moduleNames = []; + for (const {name, script, args} of browser.mockModules_) { + moduleNames.push(name); + await browser.executeScriptWithDescription(script, 'add mock module ' + name, ...args); + } - await browser.executeScriptWithDescription( - // TODO: must manually assign __TESTABILITY__NG1_APP_ROOT_INJECTOR__ (https://github.com/angular/angular/issues/22723) - `window.__TESTABILITY__NG1_APP_ROOT_INJECTOR__ = angular.resumeBootstrap(arguments[0]) ` - + `|| angular.element('app-angular-js').injector();`, - 'resume bootstrap', - moduleNames - ); + await browser.executeScriptWithDescription( + // TODO: must manually assign __TESTABILITY__NG1_APP_ROOT_INJECTOR__ (https://github.com/angular/angular/issues/22723) + `window.__TESTABILITY__NG1_APP_ROOT_INJECTOR__ = angular.resumeBootstrap(arguments[0]) ` + + `|| angular.element('app-angular-js').injector();`, + 'resume bootstrap', + moduleNames, + ); } // Wait for the initial AngularJS page to finish loading await browser.waitForAngular(); } }); - diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts index 63c325d2b97..cdd514e10fb 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts @@ -1,21 +1,20 @@ -import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core'; -import { LazyLoaderService } from '../lazy-loader.service'; +import {Component, OnInit, OnDestroy, ElementRef} from '@angular/core'; +import {LazyLoaderService} from '../lazy-loader.service'; @Component({ selector: 'app-angular-js', - template: '
    ' + template: '
    ', }) export class AngularJSComponent implements OnInit, OnDestroy { constructor( private lazyLoader: LazyLoaderService, - private elRef: ElementRef + private elRef: ElementRef, ) {} ngOnInit() { this.lazyLoader.load(this.elRef.nativeElement); } - ngOnDestroy() { this.lazyLoader.destroy(); } diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts index 35fa6042439..a0446456b27 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts @@ -1,28 +1,29 @@ import * as angular from 'angular'; import 'angular-route'; -const appModule = angular.module('myApp', [ - 'ngRoute' -]) -.config(['$routeProvider', '$locationProvider', - function config($routeProvider: angular.route.IRouteProvider, - $locationProvider: angular.ILocationProvider) { +const appModule = angular.module('myApp', ['ngRoute']).config([ + '$routeProvider', + '$locationProvider', + function config( + $routeProvider: angular.route.IRouteProvider, + $locationProvider: angular.ILocationProvider, + ) { $locationProvider.html5Mode(true); - $routeProvider. - when('/users', { + $routeProvider + .when('/users', { template: `

    Users Page

    - ` - }). - otherwise({ - template: '' + `, + }) + .otherwise({ + template: '', }); - }] -); + }, +]); export function bootstrap(el: HTMLElement) { - return angular.bootstrap(el, [appModule.name]); + return angular.bootstrap(el, [appModule.name]); } diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app-routing.module.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app-routing.module.ts index 5cc7055597c..4e7036493e7 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app-routing.module.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app-routing.module.ts @@ -1,31 +1,31 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { Routes, RouterModule, UrlSegment } from '@angular/router'; -import { AngularJSComponent } from './angular-js/angular-js.component'; -import { HomeComponent } from './home/home.component'; -import { App404Component } from './app404/app404.component'; +import {NgModule} from '@angular/core'; +import {Routes, RouterModule, UrlSegment} from '@angular/router'; +import {AngularJSComponent} from './angular-js/angular-js.component'; +import {HomeComponent} from './home/home.component'; +import {App404Component} from './app404/app404.component'; // Match any URL that starts with `users` // #docregion matcher export function isAngularJSUrl(url: UrlSegment[]) { - return url.length > 0 && url[0].path.startsWith('users') ? ({consumed: url}) : null; + return url.length > 0 && url[0].path.startsWith('users') ? {consumed: url} : null; } // #enddocregion matcher export const routes: Routes = [ // Routes rendered by Angular - { path: '', component: HomeComponent }, + {path: '', component: HomeComponent}, // AngularJS routes - { matcher: isAngularJSUrl, component: AngularJSComponent }, + {matcher: isAngularJSUrl, component: AngularJSComponent}, // Catch-all route - { path: '**', component: App404Component } + {path: '**', component: App404Component}, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app.component.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app.component.ts index 400d937a2f4..1d99c108f8c 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app.component.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app.component.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts index 817ab8e5d1d..ef31be77564 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts @@ -1,24 +1,15 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { AngularJSComponent } from './angular-js/angular-js.component'; -import { HomeComponent } from './home/home.component'; -import { App404Component } from './app404/app404.component'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {AppRoutingModule} from './app-routing.module'; +import {AppComponent} from './app.component'; +import {AngularJSComponent} from './angular-js/angular-js.component'; +import {HomeComponent} from './home/home.component'; +import {App404Component} from './app404/app404.component'; @NgModule({ - declarations: [ - AppComponent, - AngularJSComponent, - HomeComponent, - App404Component - ], - imports: [ - BrowserModule, - AppRoutingModule - ], - bootstrap: [AppComponent] + declarations: [AppComponent, AngularJSComponent, HomeComponent, App404Component], + imports: [BrowserModule, AppRoutingModule], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app404/app404.component.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app404/app404.component.ts index 6911f7f3cb5..60bc924626c 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app404/app404.component.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/app404/app404.component.ts @@ -1,8 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-app404', templateUrl: './app404.component.html', - styleUrls: ['./app404.component.css'] + styleUrls: ['./app404.component.css'], }) export class App404Component {} diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/home/home.component.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/home/home.component.ts index 0cb0d0f59cd..1dc6980f164 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/home/home.component.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/home/home.component.ts @@ -1,10 +1,8 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', - styleUrls: ['./home.component.css'] + styleUrls: ['./home.component.css'], }) -export class HomeComponent { - -} +export class HomeComponent {} diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts index b464ef27c54..f8df2870857 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts @@ -1,14 +1,14 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; import * as angular from 'angular'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class LazyLoaderService { private app: angular.auto.IInjectorService | undefined; load(el: HTMLElement): void { - import('./angularjs-app').then(app => { + import('./angularjs-app').then((app) => { try { this.app = app.bootstrap(el); } catch (e) { diff --git a/adev/src/content/examples/upgrade-lazy-load-ajs/src/main.ts b/adev/src/content/examples/upgrade-lazy-load-ajs/src/main.ts index 1e3bab6e5eb..6f00233886b 100644 --- a/adev/src/content/examples/upgrade-lazy-load-ajs/src/main.ts +++ b/adev/src/content/examples/upgrade-lazy-load-ajs/src/main.ts @@ -1,7 +1,7 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +import {AppModule} from './app/app.module'; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/adev/src/content/examples/upgrade-module/e2e-spec.ts b/adev/src/content/examples/upgrade-module/e2e-spec.ts index c38ad9dcb62..fd5b44bea37 100644 --- a/adev/src/content/examples/upgrade-module/e2e-spec.ts +++ b/adev/src/content/examples/upgrade-module/e2e-spec.ts @@ -1,50 +1,39 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; describe('Upgrade Tests', () => { - describe('AngularJS Auto-bootstrap', () => { - beforeAll(() => browser.get('/index-ng-app.html')); it('bootstraps as expected', async () => { expect(await element(by.css('#message')).getText()).toEqual('Hello world'); }); - }); describe('AngularJS JavaScript Bootstrap', () => { - beforeAll(() => browser.get('/index-bootstrap.html')); it('bootstraps as expected', async () => { expect(await element(by.css('#message')).getText()).toEqual('Hello world'); }); - }); describe('AngularJS-Angular Hybrid Bootstrap', () => { - beforeAll(() => browser.get('/index-ajs-a-hybrid-bootstrap.html')); it('bootstraps as expected', async () => { expect(await element(by.css('#message')).getText()).toEqual('Hello world'); }); - }); describe('Upgraded static component', async () => { - beforeAll(() => browser.get('/index-upgrade-static.html')); it('renders', async () => { expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!'); }); - }); - describe('Upgraded component with IO', () => { - beforeAll(() => browser.get('/index-upgrade-io.html')); it('has inputs', async () => { @@ -55,22 +44,17 @@ describe('Upgrade Tests', () => { await element(by.buttonText('Delete')).click(); expect(await element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!'); }); - }); - describe('Downgraded static component', () => { - beforeAll(() => browser.get('/index-downgrade-static.html')); it('renders', async () => { expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!'); }); - }); describe('Downgraded component with IO', () => { - beforeAll(() => browser.get('/index-downgrade-io.html')); it('has inputs', async () => { @@ -85,51 +69,41 @@ describe('Upgrade Tests', () => { it('supports ng-repeat', async () => { expect(await element.all(by.css('hero-detail')).count()).toBe(3); }); - }); - describe('Downgraded component with content projection', () => { - beforeAll(() => browser.get('/index-ajs-to-a-projection.html')); it('can be transcluded into', async () => { - expect(await element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds'); + expect(await element(by.css('hero-detail')).getText()).toContain( + 'Specific powers of controlling winds', + ); }); - }); - describe('Upgraded component with transclusion', () => { - beforeAll(() => browser.get('/index-a-to-ajs-transclusion.html')); it('can be projected into', async () => { - expect(await element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds'); + expect(await element(by.css('hero-detail')).getText()).toContain( + 'Specific powers of controlling winds', + ); }); - }); - describe('Upgrading AngularJS Providers', () => { - beforeAll(() => browser.get('/index-ajs-to-a-providers.html')); it('works', async () => { expect(await element(by.css('h2')).getText()).toBe('1: Windstorm'); }); - }); - describe('Downgrading Angular Providers', () => { - beforeAll(() => browser.get('/index-a-to-ajs-providers.html')); it('works', async () => { expect(await element(by.css('h2')).getText()).toBe('1: Windstorm'); }); - }); - }); diff --git a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts index 6fb8b04991c..42394049c1b 100644 --- a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts @@ -1,34 +1,32 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; -import { DoBootstrap, NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule} from '@angular/upgrade/static'; -import { heroDetailComponent } from './hero-detail.component'; +import {heroDetailComponent} from './hero-detail.component'; // #docregion ngmodule, register -import { Heroes } from './heroes'; +import {Heroes} from './heroes'; // #enddocregion register @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - providers: [ Heroes ] + imports: [BrowserModule, UpgradeModule], + providers: [Heroes], }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } // #enddocregion ngmodule // #docregion register -import { downgradeInjectable } from '@angular/upgrade/static'; +import {downgradeInjectable} from '@angular/upgrade/static'; -angular.module('heroApp', []) +angular + .module('heroApp', []) .factory('heroes', downgradeInjectable(Heroes)) .component('heroDetail', heroDetailComponent); // #enddocregion register diff --git a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts index dd7aa10d797..a62f3bc428c 100644 --- a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts @@ -1,11 +1,14 @@ -import { Heroes } from './heroes'; +import {Heroes} from './heroes'; // #docregion export const heroDetailComponent = { template: `

    {{$ctrl.hero.id}}: {{$ctrl.hero.name}}

    `, - controller: ['heroes', function(heroes: Heroes) { - this.hero = heroes.get()[0]; - }] + controller: [ + 'heroes', + function (heroes: Heroes) { + this.hero = heroes.get()[0]; + }, + ], }; diff --git a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts index f5f6d87ed86..5c857c8735a 100644 --- a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts +++ b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts @@ -1,13 +1,10 @@ // #docregion -import { Injectable } from '@angular/core'; -import { Hero } from '../hero'; +import {Injectable} from '@angular/core'; +import {Hero} from '../hero'; @Injectable() export class Heroes { get() { - return [ - new Hero(1, 'Windstorm'), - new Hero(2, 'Spiderman') - ]; + return [new Hero(1, 'Windstorm'), new Hero(2, 'Spiderman')]; } } diff --git a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts index 0de41e9a5da..30f5682225a 100644 --- a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts @@ -1,35 +1,30 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; -import { DoBootstrap, NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static'; -import { heroDetail, HeroDetailDirective } from './hero-detail.component'; -import { ContainerComponent } from './container.component'; +import {heroDetail, HeroDetailDirective} from './hero-detail.component'; +import {ContainerComponent} from './container.component'; @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - ContainerComponent, - HeroDetailDirective - ] + imports: [BrowserModule, UpgradeModule], + declarations: [ContainerComponent, HeroDetailDirective], }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } -angular.module('heroApp', []) +angular + .module('heroApp', []) .component('heroDetail', heroDetail) .directive( 'myContainer', - downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory + downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory, ); platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts index 1b740d6554c..a13e675acb6 100644 --- a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts @@ -1,6 +1,6 @@ // #docregion -import { Component } from '@angular/core'; -import { Hero } from '../hero'; +import {Component} from '@angular/core'; +import {Hero} from '../hero'; @Component({ selector: 'my-container', @@ -9,7 +9,7 @@ import { Hero } from '../hero';

    {{hero.description}}

    - ` + `, }) export class ContainerComponent { hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds'); diff --git a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts index 94025abd85e..a1a4599ea91 100644 --- a/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts @@ -1,7 +1,7 @@ // #docregion export const heroDetail = { bindings: { - hero: '=' + hero: '=', }, template: `

    {{$ctrl.hero.name}}

    @@ -9,17 +9,17 @@ export const heroDetail = { `, - transclude: true + transclude: true, }; // #enddocregion -import { Directive, ElementRef, Injector, Input } from '@angular/core'; -import { UpgradeComponent } from '@angular/upgrade/static'; -import { Hero } from '../hero'; +import {Directive, ElementRef, Injector, Input} from '@angular/core'; +import {UpgradeComponent} from '@angular/upgrade/static'; +import {Hero} from '../hero'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector - selector: 'hero-detail' + selector: 'hero-detail', }) export class HeroDetailDirective extends UpgradeComponent { @Input() hero!: Hero; diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts index e904e14072c..89c54f3d3e9 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts @@ -1,30 +1,26 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; // #docregion ngmodule -import { DoBootstrap, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule} from '@angular/upgrade/static'; @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ] + imports: [BrowserModule, UpgradeModule], }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } // #enddocregion ngmodule -angular.module('heroApp', []) - .controller('MainCtrl', function() { - this.message = 'Hello world'; - }); +angular.module('heroApp', []).controller('MainCtrl', function () { + this.message = 'Hello world'; +}); // #docregion bootstrap -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(AppModule); // #enddocregion bootstrap diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts index 3ad843e885d..a96e0d41238 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts @@ -1,12 +1,11 @@ // #docregion ng1module -angular.module('heroApp', []) - .controller('MainCtrl', function() { - this.message = 'Hello world'; - }); +angular.module('heroApp', []).controller('MainCtrl', function () { + this.message = 'Hello world'; +}); // #enddocregion ng1module document.addEventListener('DOMContentLoaded', () => { // #docregion bootstrap - angular.bootstrap(document.body, ['heroApp'], { strictDi: true }); + angular.bootstrap(document.body, ['heroApp'], {strictDi: true}); // #enddocregion bootstrap }); diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts index 904f7578b85..af9b96db576 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts @@ -1,4 +1,3 @@ -angular.module('heroApp', []) - .controller('MainCtrl', function() { - this.message = 'Hello world'; - }); +angular.module('heroApp', []).controller('MainCtrl', function () { + this.message = 'Hello world'; +}); diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts index 729acf7e317..cff28e91ad4 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts @@ -1,34 +1,33 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; -import { DoBootstrap, NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static'; -import { MainController } from './main.controller'; -import { HeroDetailComponent } from './hero-detail.component'; +import {MainController} from './main.controller'; +import {HeroDetailComponent} from './hero-detail.component'; @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - HeroDetailComponent - ] + imports: [BrowserModule, UpgradeModule], + declarations: [HeroDetailComponent], }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } -angular.module('heroApp', []) +angular + .module('heroApp', []) .controller('MainController', MainController) - .directive('heroDetail', downgradeComponent({ - component: HeroDetailComponent, - inputs: ['hero'] - }) as angular.IDirectiveFactory); + .directive( + 'heroDetail', + downgradeComponent({ + component: HeroDetailComponent, + inputs: ['hero'], + }) as angular.IDirectiveFactory, + ); platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts index 0f517c9105d..473c60b80e3 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts @@ -1,6 +1,6 @@ // #docregion -import { Component, Input } from '@angular/core'; -import { Hero } from '../hero'; +import {Component, Input} from '@angular/core'; +import {Hero} from '../hero'; @Component({ selector: 'hero-detail', @@ -9,7 +9,7 @@ import { Hero } from '../hero';
    - ` + `, }) export class HeroDetailComponent { @Input() hero!: Hero; diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts index c6041ac7888..22b595030a4 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts @@ -1,4 +1,4 @@ -import { Hero } from '../hero'; +import {Hero} from '../hero'; export class MainController { hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds'); diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts index 52d4e74a1fc..09a51d46eef 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts @@ -1,5 +1,5 @@ // #docregion -import { HeroesService } from './heroes.service'; +import {HeroesService} from './heroes.service'; export function heroesServiceFactory(i: any) { return i.get('heroes'); @@ -8,5 +8,5 @@ export function heroesServiceFactory(i: any) { export const heroesServiceProvider = { provide: HeroesService, useFactory: heroesServiceFactory, - deps: ['$injector'] + deps: ['$injector'], }; diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts index adfa95abbab..c1f0f88014a 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts @@ -1,42 +1,36 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; -import { DoBootstrap, NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static'; -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroesService } from './heroes.service'; +import {HeroDetailComponent} from './hero-detail.component'; +import {HeroesService} from './heroes.service'; // #docregion register -import { heroesServiceProvider } from './ajs-upgraded-providers'; +import {heroesServiceProvider} from './ajs-upgraded-providers'; @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - providers: [ - heroesServiceProvider - ], + imports: [BrowserModule, UpgradeModule], + providers: [heroesServiceProvider], // #enddocregion register - declarations: [ - HeroDetailComponent - ] -// #docregion register + declarations: [HeroDetailComponent], + // #docregion register }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } // #enddocregion register -angular.module('heroApp', []) +angular + .module('heroApp', []) .service('heroes', HeroesService) .directive( 'heroDetail', - downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory + downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory, ); platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts index b02f85b99a5..d0ff2a2903b 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts @@ -1,13 +1,13 @@ // #docregion -import { Component } from '@angular/core'; -import { HeroesService } from './heroes.service'; -import { Hero } from '../hero'; +import {Component} from '@angular/core'; +import {HeroesService} from './heroes.service'; +import {Hero} from '../hero'; @Component({ selector: 'hero-detail', template: `

    {{hero.id}}: {{hero.name}}

    - ` + `, }) export class HeroDetailComponent { hero: Hero; diff --git a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts index 4a258e205a6..a66c196c482 100644 --- a/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts +++ b/adev/src/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts @@ -1,11 +1,8 @@ // #docregion -import { Hero } from '../hero'; +import {Hero} from '../hero'; export class HeroesService { get() { - return [ - new Hero(1, 'Windstorm'), - new Hero(2, 'Spiderman') - ]; + return [new Hero(1, 'Windstorm'), new Hero(2, 'Spiderman')]; } } diff --git a/adev/src/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts index 44060428339..1f54eb800a6 100644 --- a/adev/src/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts @@ -1,33 +1,31 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; -import { DoBootstrap, NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static'; -import { MainController } from './main.controller'; +import {MainController} from './main.controller'; -import { HeroDetailComponent } from './hero-detail.component'; +import {HeroDetailComponent} from './hero-detail.component'; @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - HeroDetailComponent - ] + imports: [BrowserModule, UpgradeModule], + declarations: [HeroDetailComponent], }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } -angular.module('heroApp', []) +angular + .module('heroApp', []) .controller('MainController', MainController) - .directive('heroDetail', downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory); - + .directive( + 'heroDetail', + downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory, + ); platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts b/adev/src/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts index 788f079341e..9f7a7ab2b1c 100644 --- a/adev/src/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts @@ -1,6 +1,6 @@ // #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { Hero } from '../hero'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {Hero} from '../hero'; @Component({ selector: 'hero-detail', @@ -8,7 +8,7 @@ import { Hero } from '../hero';

    {{hero.name}} details!

    id: {{hero.id}}
    - ` + `, }) export class HeroDetailComponent { @Input() hero!: Hero; diff --git a/adev/src/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts b/adev/src/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts index d50272073f2..397319bdeca 100644 --- a/adev/src/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts +++ b/adev/src/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts @@ -1,11 +1,8 @@ -import { Hero } from '../hero'; +import {Hero} from '../hero'; export class MainController { hero = new Hero(1, 'Windstorm'); - heroes = [ - new Hero(2, 'Superman'), - new Hero(3, 'Spiderman') - ]; + heroes = [new Hero(2, 'Superman'), new Hero(3, 'Spiderman')]; onDelete(hero: Hero) { hero.name = 'Ex-' + hero.name; } diff --git a/adev/src/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts index 3a6e4711b6e..832f7b99727 100644 --- a/adev/src/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts @@ -1,38 +1,34 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; -import { DoBootstrap, NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule} from '@angular/upgrade/static'; // #docregion downgradecomponent, ngmodule -import { HeroDetailComponent } from './hero-detail.component'; +import {HeroDetailComponent} from './hero-detail.component'; // #enddocregion downgradecomponent @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - HeroDetailComponent - ] + imports: [BrowserModule, UpgradeModule], + declarations: [HeroDetailComponent], }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } // #enddocregion ngmodule // #docregion downgradecomponent -import { downgradeComponent } from '@angular/upgrade/static'; +import {downgradeComponent} from '@angular/upgrade/static'; -angular.module('heroApp', []) +angular + .module('heroApp', []) .directive( 'heroDetail', - downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory + downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory, ); // #enddocregion downgradecomponent diff --git a/adev/src/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts b/adev/src/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts index fae7b9d5dac..8107fe55bf1 100644 --- a/adev/src/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts @@ -1,11 +1,11 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'hero-detail', template: `

    Windstorm details!

    id: 1
    - ` + `, }) -export class HeroDetailComponent { } +export class HeroDetailComponent {} diff --git a/adev/src/content/examples/upgrade-module/src/app/hero-detail.directive.ts b/adev/src/content/examples/upgrade-module/src/app/hero-detail.directive.ts index f43da49f231..1264b4dba59 100644 --- a/adev/src/content/examples/upgrade-module/src/app/hero-detail.directive.ts +++ b/adev/src/content/examples/upgrade-module/src/app/hero-detail.directive.ts @@ -5,7 +5,7 @@ export function heroDetailDirective() { scope: {}, bindToController: { hero: '=', - deleted: '&' + deleted: '&', }, template: `

    {{$ctrl.hero.name}} details!

    @@ -17,6 +17,6 @@ export function heroDetailDirective() { this.deleted({hero: this.hero}); }; }, - controllerAs: '$ctrl' + controllerAs: '$ctrl', }; } diff --git a/adev/src/content/examples/upgrade-module/src/app/hero.ts b/adev/src/content/examples/upgrade-module/src/app/hero.ts index 5dcb5664eb3..0e14278a55c 100644 --- a/adev/src/content/examples/upgrade-module/src/app/hero.ts +++ b/adev/src/content/examples/upgrade-module/src/app/hero.ts @@ -1,5 +1,7 @@ export class Hero { - constructor(public id: number, - public name: string, - public description?: string) { } + constructor( + public id: number, + public name: string, + public description?: string, + ) {} } diff --git a/adev/src/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts index 0de41e9a5da..30f5682225a 100644 --- a/adev/src/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts @@ -1,35 +1,30 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; -import { DoBootstrap, NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static'; -import { heroDetail, HeroDetailDirective } from './hero-detail.component'; -import { ContainerComponent } from './container.component'; +import {heroDetail, HeroDetailDirective} from './hero-detail.component'; +import {ContainerComponent} from './container.component'; @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - ContainerComponent, - HeroDetailDirective - ] + imports: [BrowserModule, UpgradeModule], + declarations: [ContainerComponent, HeroDetailDirective], }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } -angular.module('heroApp', []) +angular + .module('heroApp', []) .component('heroDetail', heroDetail) .directive( 'myContainer', - downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory + downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory, ); platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts b/adev/src/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts index 8d76085174d..efc1c2bcd75 100644 --- a/adev/src/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts @@ -1,6 +1,6 @@ // #docregion -import { Component } from '@angular/core'; -import { Hero } from '../hero'; +import {Component} from '@angular/core'; +import {Hero} from '../hero'; @Component({ selector: 'my-container', @@ -9,7 +9,7 @@ import { Hero } from '../hero'; - ` + `, }) export class ContainerComponent { hero = new Hero(1, 'Windstorm'); diff --git a/adev/src/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts b/adev/src/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts index 0d7d1a562c7..bc208828a88 100644 --- a/adev/src/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts @@ -3,7 +3,7 @@ export const heroDetail = { bindings: { hero: '<', - deleted: '&' + deleted: '&', }, template: `

    {{$ctrl.hero.name}} details!

    @@ -14,18 +14,18 @@ export const heroDetail = { this.onDelete = () => { this.deleted(this.hero); }; - } + }, }; // #enddocregion hero-detail-io // #docregion hero-detail-io-upgrade -import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core'; -import { UpgradeComponent } from '@angular/upgrade/static'; -import { Hero } from '../hero'; +import {Directive, ElementRef, Injector, Input, Output, EventEmitter} from '@angular/core'; +import {UpgradeComponent} from '@angular/upgrade/static'; +import {Hero} from '../hero'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector - selector: 'hero-detail' + selector: 'hero-detail', }) export class HeroDetailDirective extends UpgradeComponent { @Input() hero: Hero; diff --git a/adev/src/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts b/adev/src/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts index e2e37390a32..f12d0f7eb19 100644 --- a/adev/src/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts +++ b/adev/src/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts @@ -1,39 +1,37 @@ declare const angular: angular.IAngularStatic; import '@angular/compiler'; -import { DoBootstrap, NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {BrowserModule} from '@angular/platform-browser'; +import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static'; -import { heroDetail, HeroDetailDirective } from './hero-detail.component'; -import { ContainerComponent } from './container.component'; +import {heroDetail, HeroDetailDirective} from './hero-detail.component'; +import {ContainerComponent} from './container.component'; // #docregion hero-detail-upgrade @NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], + imports: [BrowserModule, UpgradeModule], declarations: [ HeroDetailDirective, // #enddocregion hero-detail-upgrade - ContainerComponent - // #docregion hero-detail-upgrade - ] + ContainerComponent, + // #docregion hero-detail-upgrade + ], }) export class AppModule implements DoBootstrap { - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); + this.upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); } } // #enddocregion hero-detail-upgrade -angular.module('heroApp', []) +angular + .module('heroApp', []) .component('heroDetail', heroDetail) .directive( 'myContainer', - downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory + downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory, ); platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts b/adev/src/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts index c28e5ea42df..53eb8bea938 100644 --- a/adev/src/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts @@ -1,11 +1,11 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'my-container', template: `

    Tour of Heroes

    - ` + `, }) -export class ContainerComponent { } +export class ContainerComponent {} diff --git a/adev/src/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts b/adev/src/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts index 8844bfa576b..c7462faa2ea 100644 --- a/adev/src/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts +++ b/adev/src/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts @@ -5,18 +5,17 @@ export const heroDetail = {

    Windstorm details!

    1
    `, - controller: function HeroDetailController() { - } + controller: function HeroDetailController() {}, }; // #enddocregion hero-detail // #docregion hero-detail-upgrade -import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core'; -import { UpgradeComponent } from '@angular/upgrade/static'; +import {Directive, ElementRef, Injector, SimpleChanges} from '@angular/core'; +import {UpgradeComponent} from '@angular/upgrade/static'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector - selector: 'hero-detail' + selector: 'hero-detail', }) export class HeroDetailDirective extends UpgradeComponent { constructor(elementRef: ElementRef, injector: Injector) { diff --git a/adev/src/content/examples/upgrade-module/src/app/villain.ts b/adev/src/content/examples/upgrade-module/src/app/villain.ts index ef3d014f118..0e6bb168a01 100644 --- a/adev/src/content/examples/upgrade-module/src/app/villain.ts +++ b/adev/src/content/examples/upgrade-module/src/app/villain.ts @@ -1,5 +1,7 @@ export class Villain { - constructor(public id: number, - public name: string, - public description?: string) { } + constructor( + public id: number, + public name: string, + public description?: string, + ) {} } diff --git a/adev/src/content/examples/upgrade-module/src/systemjs.config.1.js b/adev/src/content/examples/upgrade-module/src/systemjs.config.1.js index c08495644cb..1edc1d10eab 100644 --- a/adev/src/content/examples/upgrade-module/src/systemjs.config.1.js +++ b/adev/src/content/examples/upgrade-module/src/systemjs.config.1.js @@ -6,7 +6,7 @@ System.config({ paths: { // paths serve as alias - 'npm:': 'node_modules/' + 'npm:': 'node_modules/', }, // map tells the System loader where to look for things map: { @@ -18,7 +18,8 @@ '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', - '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', + '@angular/platform-browser-dynamic': + 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', // #docregion upgrade-static-package @@ -32,29 +33,29 @@ 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', - 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' + 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js', }, transpiler: 'plugin-babel', // packages tells the System loader how to load when no filename and/or no extension packages: { - 'app': { main: './main.js', defaultExtension: 'js' }, + 'app': {main: './main.js', defaultExtension: 'js'}, 'rxjs': { defaultExtension: 'js', format: 'cjs', - main: 'index.js' + main: 'index.js', }, 'rxjs/operators': { defaultExtension: 'js', format: 'cjs', - main: 'index.js' + main: 'index.js', }, 'meta': { '*.mjs': { babelOptions: { - es2015: false - } - } - } - } + es2015: false, + }, + }, + }, + }, }); })(this); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts index 61c7f2aced8..493a4337c37 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts @@ -1,41 +1,57 @@ -angular. - module('phonecatApp'). - animation('.phone', function phoneAnimationFactory() { - return { - addClass: animateIn, - removeClass: animateOut - }; +angular.module('phonecatApp').animation('.phone', function phoneAnimationFactory() { + return { + addClass: animateIn, + removeClass: animateOut, + }; - function animateIn(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } + function animateIn(element: JQuery, className: string, done: () => void) { + if (className !== 'selected') { + return; + } - element.css({ + element + .css({ display: 'block', position: 'absolute', top: 500, - left: 0 - }).animate({ - top: 0 - }, done); + left: 0, + }) + .animate( + { + top: 0, + }, + done, + ); - return function animateInEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; + return function animateInEnd(wasCanceled: boolean) { + if (wasCanceled) { + element.stop(); + } + }; + } + + function animateOut(element: JQuery, className: string, done: () => void) { + if (className !== 'selected') { + return; } - function animateOut(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } - - element.css({ + element + .css({ position: 'absolute', top: 0, - left: 0 - }).animate({ - top: -500 - }, done); + left: 0, + }) + .animate( + { + top: -500, + }, + done, + ); - return function animateOutEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; - } - }); + return function animateOutEnd(wasCanceled: boolean) { + if (wasCanceled) { + element.stop(); + } + }; + } +}); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts index 1d16f67fbe0..b81abf35af2 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts @@ -1,18 +1,20 @@ // #docregion -angular. - module('phonecatApp'). - config(['$locationProvider', '$routeProvider', - function config($locationProvider: angular.ILocationProvider, - $routeProvider: angular.route.IRouteProvider) { - $locationProvider.hashPrefix('!'); +angular.module('phonecatApp').config([ + '$locationProvider', + '$routeProvider', + function config( + $locationProvider: angular.ILocationProvider, + $routeProvider: angular.route.IRouteProvider, + ) { + $locationProvider.hashPrefix('!'); - $routeProvider. - when('/phones', { - template: '' - }). - when('/phones/:phoneId', { - template: '' - }). - otherwise('/phones'); - } - ]); + $routeProvider + .when('/phones', { + template: '', + }) + .when('/phones/:phoneId', { + template: '', + }) + .otherwise('/phones'); + }, +]); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts index ece35279ed2..d2ce0353c6f 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts @@ -1,8 +1,2 @@ // Define the `phonecatApp` module -angular.module('phonecatApp', [ - 'ngAnimate', - 'ngRoute', - 'core', - 'phoneDetail', - 'phoneList', -]); +angular.module('phonecatApp', ['ngAnimate', 'ngRoute', 'core', 'phoneDetail', 'phoneList']); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts index fa54ea9e1c3..bcd2b0f9d03 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts @@ -1,12 +1,10 @@ describe('checkmark', () => { - beforeEach(angular.mock.module('core')); - it('should convert boolean values to unicode checkmark or cross', - inject((checkmarkFilter: (v: boolean) => string) => { - expect(checkmarkFilter(true)).toBe('\u2713'); - expect(checkmarkFilter(false)).toBe('\u2718'); - }) - ); - + it('should convert boolean values to unicode checkmark or cross', inject(( + checkmarkFilter: (v: boolean) => string, + ) => { + expect(checkmarkFilter(true)).toBe('\u2713'); + expect(checkmarkFilter(false)).toBe('\u2718'); + })); }); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts index 3bb3a9cf66e..cc096db19f8 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts @@ -1,4 +1,2 @@ // #docregion -angular. - module('core'). - filter('checkmark', () => (input: boolean) => input ? '\u2713' : '\u2718'); +angular.module('core').filter('checkmark', () => (input: boolean) => (input ? '\u2713' : '\u2718')); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts index 1072736f5be..58eeb31ed78 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts @@ -1,11 +1,7 @@ describe('Phone', () => { let $httpBackend: angular.IHttpBackendService; let Phone: any; - const phonesData = [ - {name: 'Phone X'}, - {name: 'Phone Y'}, - {name: 'Phone Z'} - ]; + const phonesData = [{name: 'Phone X'}, {name: 'Phone Y'}, {name: 'Phone Z'}]; // Add a custom equality tester before each test beforeEach(() => { @@ -37,5 +33,4 @@ describe('Phone', () => { $httpBackend.flush(); expect(phones).toEqual(phonesData); }); - }); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts index 38b3d86a74c..f388c5c84c5 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts @@ -1,13 +1,16 @@ // #docregion -angular. - module('core.phone'). - factory('Phone', ['$resource', - ($resource: angular.resource.IResourceService) => - $resource('phones/:phoneId.json', {}, { +angular.module('core.phone').factory('Phone', [ + '$resource', + ($resource: angular.resource.IResourceService) => + $resource( + 'phones/:phoneId.json', + {}, + { query: { method: 'GET', params: {phoneId: 'phones'}, - isArray: true - } - }) - ]); + isArray: true, + }, + }, + ), +]); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts index 7b07ad306b0..a9290aebfbb 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts @@ -1,6 +1,5 @@ // #docregion describe('phoneDetail', () => { - // Load the module that contains the `phoneDetail` component before each test beforeEach(angular.mock.module('phoneDetail')); @@ -10,12 +9,14 @@ describe('phoneDetail', () => { let ctrl: any; const xyzPhoneData = { name: 'phone xyz', - images: ['image/url1.png', 'image/url2.png'] + images: ['image/url1.png', 'image/url2.png'], }; - beforeEach(inject(($componentController: any, - _$httpBackend_: angular.IHttpBackendService, - $routeParams: angular.route.IRouteParamsService) => { + beforeEach(inject(( + $componentController: any, + _$httpBackend_: angular.IHttpBackendService, + $routeParams: angular.route.IRouteParamsService, + ) => { $httpBackend = _$httpBackend_; $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData); @@ -32,7 +33,5 @@ describe('phoneDetail', () => { $httpBackend.flush(); expect(ctrl.phone).toEqual(xyzPhoneData); }); - }); - }); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts index 4fc9634d61c..206348305e7 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts @@ -16,9 +16,7 @@ class PhoneDetailController { } } -angular. - module('phoneDetail'). - component('phoneDetail', { - templateUrl: 'phone-detail/phone-detail.template.html', - controller: PhoneDetailController - }); +angular.module('phoneDetail').component('phoneDetail', { + templateUrl: 'phone-detail/phone-detail.template.html', + controller: PhoneDetailController, +}); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts index 73d986f5617..4f82d8c23d2 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts @@ -1,5 +1,2 @@ // Define the `phoneDetail` module -angular.module('phoneDetail', [ - 'ngRoute', - 'core.phone' -]); +angular.module('phoneDetail', ['ngRoute', 'core.phone']); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts index 212992cfa38..3426472bb5a 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts @@ -1,5 +1,4 @@ describe('phoneList', () => { - // Load the module that contains the `phoneList` component before each test beforeEach(angular.mock.module('phoneList')); @@ -10,8 +9,9 @@ describe('phoneList', () => { beforeEach(inject(($componentController: any, _$httpBackend_: angular.IHttpBackendService) => { $httpBackend = _$httpBackend_; - $httpBackend.expectGET('phones/phones.json') - .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); + $httpBackend + .expectGET('phones/phones.json') + .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); ctrl = $componentController('phoneList'); })); @@ -28,7 +28,5 @@ describe('phoneList', () => { it('should set a default value for the `orderProp` property', () => { expect(ctrl.orderProp).toBe('age'); }); - }); - }); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts index e2f2855ae68..23d9ddb81e4 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts @@ -9,12 +9,9 @@ class PhoneListController { this.phones = Phone.query(); this.orderProp = 'age'; } - } -angular. - module('phoneList'). - component('phoneList', { - templateUrl: 'phone-list/phone-list.template.html', - controller: PhoneListController - }); +angular.module('phoneList').component('phoneList', { + templateUrl: 'phone-list/phone-list.template.html', + controller: PhoneListController, +}); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts b/adev/src/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts index 3bf61605582..c0e2dbe53ab 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts @@ -1,10 +1,9 @@ -import { browser, element, by, ElementArrayFinder, ElementFinder } from 'protractor'; +import {browser, element, by, ElementArrayFinder, ElementFinder} from 'protractor'; // Angular E2E Testing Guide: // https://docs.angularjs.org/guide/e2e-testing describe('PhoneCat Application', () => { - beforeAll(() => { browser.baseUrl = `${browser.baseUrl}/app/`; @@ -18,11 +17,10 @@ describe('PhoneCat Application', () => { }); describe('View: Phone list', () => { - // Helpers const waitForCount = async (elems: ElementArrayFinder, count: number) => { // Wait for the list to stabilize, which may take a while (e.g. due to animations). - await browser.wait(async () => await elems.count() === count, 5000); + await browser.wait(async () => (await elems.count()) === count, 5000); }; beforeEach(() => browser.get('index.html#!/phones')); @@ -48,26 +46,22 @@ describe('PhoneCat Application', () => { const queryField = element(by.model('$ctrl.query')); const orderSelect = element(by.model('$ctrl.orderProp')); const nameOption = orderSelect.element(by.css('option[value="name"]')); - const phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name')); + const phoneNameColumn = element.all( + by.repeater('phone in $ctrl.phones').column('phone.name'), + ); function getNames() { return phoneNameColumn.map((elem: ElementFinder) => elem.getText()); } - await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter + await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter await waitForCount(phoneNameColumn, 2); - expect(await getNames()).toEqual([ - 'Motorola XOOM\u2122 with Wi-Fi', - 'MOTOROLA XOOM\u2122' - ]); + expect(await getNames()).toEqual(['Motorola XOOM\u2122 with Wi-Fi', 'MOTOROLA XOOM\u2122']); await nameOption.click(); - expect(await getNames()).toEqual([ - 'MOTOROLA XOOM\u2122', - 'Motorola XOOM\u2122 with Wi-Fi' - ]); + expect(await getNames()).toEqual(['MOTOROLA XOOM\u2122', 'Motorola XOOM\u2122 with Wi-Fi']); }); it('should render phone specific links', async () => { @@ -83,11 +77,9 @@ describe('PhoneCat Application', () => { await detailLink.click(); expect(await browser.getLocationAbsUrl()).toBe('/phones/nexus-s'); }); - }); describe('View: Phone detail', () => { - beforeEach(() => browser.get('index.html#!/phones/nexus-s')); it('should display the `nexus-s` page', async () => { @@ -110,7 +102,5 @@ describe('PhoneCat Application', () => { await thumbnails.get(0).click(); expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); - }); - }); diff --git a/adev/src/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js b/adev/src/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js index 89d9e7bcd75..a859203ce90 100644 --- a/adev/src/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js +++ b/adev/src/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js @@ -1,7 +1,6 @@ //jshint strict: false -module.exports = function(config) { +module.exports = function (config) { config.set({ - basePath: './app', files: [ @@ -13,7 +12,7 @@ module.exports = function(config) { '**/*.module.js', '*!(.module|.spec).js', '!(bower_components)/**/*!(.module|.spec).js', - '**/*.spec.js' + '**/*.spec.js', ], // This is needed, because the AngularJS files are loaded from `https://code.angularjs.org/`. @@ -31,11 +30,6 @@ module.exports = function(config) { browsers: ['Chrome', 'Firefox'], - plugins: [ - 'karma-chrome-launcher', - 'karma-firefox-launcher', - 'karma-jasmine' - ] - + plugins: ['karma-chrome-launcher', 'karma-firefox-launcher', 'karma-jasmine'], }); }; diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts index f6e1654d74a..aa6787d54d8 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts @@ -10,5 +10,5 @@ export function routeParamsFactory(i: any) { export const routeParamsProvider = { provide: RouteParams, useFactory: routeParamsFactory, - deps: ['$injector'] + deps: ['$injector'], }; diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts index 61c7f2aced8..493a4337c37 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts @@ -1,41 +1,57 @@ -angular. - module('phonecatApp'). - animation('.phone', function phoneAnimationFactory() { - return { - addClass: animateIn, - removeClass: animateOut - }; +angular.module('phonecatApp').animation('.phone', function phoneAnimationFactory() { + return { + addClass: animateIn, + removeClass: animateOut, + }; - function animateIn(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } + function animateIn(element: JQuery, className: string, done: () => void) { + if (className !== 'selected') { + return; + } - element.css({ + element + .css({ display: 'block', position: 'absolute', top: 500, - left: 0 - }).animate({ - top: 0 - }, done); + left: 0, + }) + .animate( + { + top: 0, + }, + done, + ); - return function animateInEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; + return function animateInEnd(wasCanceled: boolean) { + if (wasCanceled) { + element.stop(); + } + }; + } + + function animateOut(element: JQuery, className: string, done: () => void) { + if (className !== 'selected') { + return; } - function animateOut(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } - - element.css({ + element + .css({ position: 'absolute', top: 0, - left: 0 - }).animate({ - top: -500 - }, done); + left: 0, + }) + .animate( + { + top: -500, + }, + done, + ); - return function animateOutEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; - } - }); + return function animateOutEnd(wasCanceled: boolean) { + if (wasCanceled) { + element.stop(); + } + }; + } +}); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts index 3546c8b508b..b188592c0fc 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts @@ -1,17 +1,19 @@ -angular. - module('phonecatApp'). - config(['$locationProvider', '$routeProvider', - function config($locationProvider: angular.ILocationProvider, - $routeProvider: angular.route.IRouteProvider) { - $locationProvider.hashPrefix('!'); +angular.module('phonecatApp').config([ + '$locationProvider', + '$routeProvider', + function config( + $locationProvider: angular.ILocationProvider, + $routeProvider: angular.route.IRouteProvider, + ) { + $locationProvider.hashPrefix('!'); - $routeProvider. - when('/phones', { - template: '' - }). - when('/phones/:phoneId', { - template: '' - }). - otherwise('/phones'); - } - ]); + $routeProvider + .when('/phones', { + template: '', + }) + .when('/phones/:phoneId', { + template: '', + }) + .otherwise('/phones'); + }, +]); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts index cd07b1ac276..43350e72601 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts @@ -1,9 +1,3 @@ // #docregion // Define the `phonecatApp` AngularJS module -angular.module('phonecatApp', [ - 'ngAnimate', - 'ngRoute', - 'core', - 'phoneDetail', - 'phoneList', -]); +angular.module('phonecatApp', ['ngAnimate', 'ngRoute', 'core', 'phoneDetail', 'phoneList']); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts index 487be686d6a..bcf54917aa0 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts @@ -1,31 +1,31 @@ // #docplaster // #docregion bare -import { DoBootstrap, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import {DoBootstrap, NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; // #enddocregion bare // #docregion upgrademodule -import { UpgradeModule } from '@angular/upgrade/static'; +import {UpgradeModule} from '@angular/upgrade/static'; // #enddocregion upgrademodule // #docregion httpclientmodule -import { HttpClientModule } from '@angular/common/http'; +import {HttpClientModule} from '@angular/common/http'; // #enddocregion httpclientmodule // #docregion phonelist -import { FormsModule } from '@angular/forms'; +import {FormsModule} from '@angular/forms'; // #enddocregion phonelist // #docregion phone -import { Phone } from './core/phone/phone.service'; +import {Phone} from './core/phone/phone.service'; // #enddocregion phone // #docregion checkmarkpipe -import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; +import {CheckmarkPipe} from './core/checkmark/checkmark.pipe'; // #enddocregion checkmarkpipe // #docregion phonelist -import { PhoneListComponent } from './phone-list/phone-list.component'; +import {PhoneListComponent} from './phone-list/phone-list.component'; // #enddocregion phonelist // #docregion routeparams -import { routeParamsProvider } from './ajs-upgraded-providers'; +import {routeParamsProvider} from './ajs-upgraded-providers'; // #enddocregion routeparams // #docregion phonedetail -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; +import {PhoneDetailComponent} from './phone-detail/phone-detail.component'; // #enddocregion phonedetail // #docregion bare, upgrademodule, httpclientmodule, phone, phonelist, phonedetail, checkmarkpipe @@ -39,7 +39,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; HttpClientModule, // #enddocregion httpclientmodule, phone FormsModule, - // #docregion bare, upgrademodule, httpclientmodule, phone + // #docregion bare, upgrademodule, httpclientmodule, phone ], // #enddocregion bare, upgrademodule, httpclientmodule, phone declarations: [ @@ -47,7 +47,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; // #enddocregion phonelist PhoneDetailComponent, // #enddocregion phonedetail - CheckmarkPipe + CheckmarkPipe, // #docregion phonelist, phonedetail ], // #enddocregion phonelist @@ -55,15 +55,15 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; providers: [ Phone, // #enddocregion phone - routeParamsProvider + routeParamsProvider, // #docregion phone - ] + ], // #enddocregion routeparams -// #docregion bare, upgrademodule, httpclientmodule, phonelist + // #docregion bare, upgrademodule, httpclientmodule, phonelist }) export class AppModule implements DoBootstrap { // #enddocregion bare - constructor(private upgrade: UpgradeModule) { } + constructor(private upgrade: UpgradeModule) {} ngDoBootstrap() { this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); } diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts index d83987aadaf..6a8cd6755ad 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts @@ -1,8 +1,7 @@ // #docregion -import { CheckmarkPipe } from './checkmark.pipe'; +import {CheckmarkPipe} from './checkmark.pipe'; describe('CheckmarkPipe', () => { - it('should convert boolean values to unicode checkmark or cross', () => { const checkmarkPipe = new CheckmarkPipe(); expect(checkmarkPipe.transform(true)).toBe('\u2713'); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts index 888017e15cf..b6492b5f820 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts @@ -1,5 +1,5 @@ // #docregion -import { Pipe, PipeTransform } from '@angular/core'; +import {Pipe, PipeTransform} from '@angular/core'; @Pipe({name: 'checkmark'}) export class CheckmarkPipe implements PipeTransform { diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts index 720978f20a6..2205c483407 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts @@ -1,44 +1,41 @@ // #docregion -import { inject, TestBed } from '@angular/core/testing'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { Phone, PhoneData } from './phone.service'; +import {inject, TestBed} from '@angular/core/testing'; +import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; +import {Phone, PhoneData} from './phone.service'; describe('Phone', () => { let phone: Phone; const phonesData: PhoneData[] = [ {name: 'Phone X', snippet: '', images: []}, {name: 'Phone Y', snippet: '', images: []}, - {name: 'Phone Z', snippet: '', images: []} + {name: 'Phone Z', snippet: '', images: []}, ]; let httpMock: HttpTestingController; beforeEach(() => { TestBed.configureTestingModule({ - imports: [ - HttpClientTestingModule - ], - providers: [ - Phone, - ] + imports: [HttpClientTestingModule], + providers: [Phone], }); }); - beforeEach(inject([HttpTestingController, Phone], (_httpMock_: HttpTestingController, _phone_: Phone) => { - httpMock = _httpMock_; - phone = _phone_; - })); + beforeEach(inject( + [HttpTestingController, Phone], + (_httpMock_: HttpTestingController, _phone_: Phone) => { + httpMock = _httpMock_; + phone = _phone_; + }, + )); afterEach(() => { httpMock.verify(); }); it('should fetch the phones data from `/phones/phones.json`', () => { - phone.query().subscribe(result => { + phone.query().subscribe((result) => { expect(result).toEqual(phonesData); }); const req = httpMock.expectOne(`/phones/phones.json`); req.flush(phonesData); }); - }); - diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts index 119d2f1d33b..72e410e2ad8 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts @@ -1,11 +1,11 @@ // #docregion -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; +import {Observable} from 'rxjs'; // #docregion downgrade-injectable declare const angular: angular.IAngularStatic; -import { downgradeInjectable } from '@angular/upgrade/static'; +import {downgradeInjectable} from '@angular/upgrade/static'; // #enddocregion downgrade-injectable // #docregion phonedata-interface @@ -20,19 +20,18 @@ export interface PhoneData { // #docregion classdef, downgrade-injectable @Injectable() export class Phone { -// #enddocregion classdef, downgrade-injectable - constructor(private http: HttpClient) { } + // #enddocregion classdef, downgrade-injectable + constructor(private http: HttpClient) {} query(): Observable { return this.http.get(`phones/phones.json`); } get(id: string): Observable { return this.http.get(`phones/${id}.json`); } -// #docregion classdef, downgrade-injectable + // #docregion classdef, downgrade-injectable } // #enddocregion classdef // #enddocregion fullclass -angular.module('core.phone') - .factory('phone', downgradeInjectable(Phone)); +angular.module('core.phone').factory('phone', downgradeInjectable(Phone)); // #enddocregion downgrade-injectable diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts index d1302116cf3..f0ee0e139cf 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts @@ -1,6 +1,6 @@ // #docregion -import { platformBrowser } from '@angular/platform-browser'; +import {platformBrowser} from '@angular/platform-browser'; -import { AppModule } from './app.module'; +import {AppModule} from './app.module'; platformBrowser().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/main.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/main.ts index 2b978d046cc..16a95a09834 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/main.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/main.ts @@ -1,6 +1,6 @@ // #docregion bootstrap -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app.module'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {AppModule} from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); // #enddocregion bootstrap diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts index e8c5aae1d85..144f8c10369 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts @@ -1,6 +1,6 @@ // #docregion declare const angular: angular.IAngularStatic; -import { Phone, PhoneData } from '../core/phone/phone.service'; +import {Phone, PhoneData} from '../core/phone/phone.service'; class PhoneDetailController { phone: PhoneData; @@ -9,7 +9,7 @@ class PhoneDetailController { static $inject = ['$routeParams', 'phone']; constructor($routeParams: angular.route.IRouteParamsService, phone: Phone) { const phoneId = $routeParams.phoneId; - phone.get(phoneId).subscribe(data => { + phone.get(phoneId).subscribe((data) => { this.phone = data; this.setImage(data.images[0]); }); @@ -20,9 +20,7 @@ class PhoneDetailController { } } -angular. - module('phoneDetail'). - component('phoneDetail', { - templateUrl: 'phone-detail/phone-detail.template.html', - controller: PhoneDetailController - }); +angular.module('phoneDetail').component('phoneDetail', { + templateUrl: 'phone-detail/phone-detail.template.html', + controller: PhoneDetailController, +}); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts index 976d1ecd30a..d0fd4c6413f 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts @@ -1,10 +1,10 @@ -import { TestBed, waitForAsync } from '@angular/core/testing'; -import { ActivatedRoute } from '@angular/router'; -import { Observable, of } from 'rxjs'; +import {TestBed, waitForAsync} from '@angular/core/testing'; +import {ActivatedRoute} from '@angular/router'; +import {Observable, of} from 'rxjs'; -import { PhoneDetailComponent } from './phone-detail.component'; -import { Phone, PhoneData } from '../core/phone/phone.service'; -import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; +import {PhoneDetailComponent} from './phone-detail.component'; +import {Phone, PhoneData} from '../core/phone/phone.service'; +import {CheckmarkPipe} from '../core/checkmark/checkmark.pipe'; function xyzPhoneData(): PhoneData { return {name: 'phone xyz', snippet: '', images: ['image/url1.png', 'image/url2.png']}; @@ -16,23 +16,19 @@ class MockPhone { } } - class ActivatedRouteMock { constructor(public snapshot: any) {} } - describe('PhoneDetailComponent', () => { - beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ CheckmarkPipe, PhoneDetailComponent ], + declarations: [CheckmarkPipe, PhoneDetailComponent], providers: [ - { provide: Phone, useClass: MockPhone }, - { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { phoneId: 1 } }) } - ] - }) - .compileComponents(); + {provide: Phone, useClass: MockPhone}, + {provide: ActivatedRoute, useValue: new ActivatedRouteMock({params: {phoneId: 1}})}, + ], + }).compileComponents(); })); it('should fetch phone detail', () => { diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts index c6a8f7eda11..fe9b3ff7f7e 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts @@ -1,10 +1,10 @@ declare const angular: angular.IAngularStatic; -import { downgradeComponent } from '@angular/upgrade/static'; +import {downgradeComponent} from '@angular/upgrade/static'; -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Phone, PhoneData } from '../core/phone/phone.service'; -import { RouteParams } from '../ajs-upgraded-providers'; +import {Phone, PhoneData} from '../core/phone/phone.service'; +import {RouteParams} from '../ajs-upgraded-providers'; @Component({ selector: 'phone-detail', @@ -15,7 +15,7 @@ export class PhoneDetailComponent { mainImageUrl: string; constructor(routeParams: RouteParams, phone: Phone) { - phone.get(routeParams.phoneId).subscribe(data => { + phone.get(routeParams.phoneId).subscribe((data) => { this.phone = data; this.setImage(data.images[0]); }); @@ -26,8 +26,9 @@ export class PhoneDetailComponent { } } -angular.module('phoneDetail') +angular + .module('phoneDetail') .directive( 'phoneDetail', - downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory + downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory, ); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts index 73d986f5617..4f82d8c23d2 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts @@ -1,5 +1,2 @@ // Define the `phoneDetail` module -angular.module('phoneDetail', [ - 'ngRoute', - 'core.phone' -]); +angular.module('phoneDetail', ['ngRoute', 'core.phone']); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts index c0843c77267..6e7eb0b6a6b 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts @@ -1,6 +1,6 @@ // #docregion declare const angular: angular.IAngularStatic; -import { Phone, PhoneData } from '../core/phone/phone.service'; +import {Phone, PhoneData} from '../core/phone/phone.service'; class PhoneListController { phones: PhoneData[]; @@ -8,17 +8,14 @@ class PhoneListController { static $inject = ['phone']; constructor(phone: Phone) { - phone.query().subscribe(phones => { + phone.query().subscribe((phones) => { this.phones = phones; }); this.orderProp = 'age'; } - } -angular. - module('phoneList'). - component('phoneList', { - templateUrl: 'app/phone-list/phone-list.template.html', - controller: PhoneListController - }); +angular.module('phoneList').component('phoneList', { + templateUrl: 'app/phone-list/phone-list.template.html', + controller: PhoneListController, +}); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts index 2f73c288b83..0cba7e30f63 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts @@ -16,7 +16,8 @@ class ActivatedRouteMock { class MockPhone { query(): Observable { return of([ - {name: 'Nexus S', snippet: '', images: []}, {name: 'Motorola DROID', snippet: '', images: []} + {name: 'Nexus S', snippet: '', images: []}, + {name: 'Motorola DROID', snippet: '', images: []}, ]); } } @@ -25,17 +26,15 @@ let fixture: ComponentFixture; describe('PhoneList', () => { beforeEach(waitForAsync(() => { - TestBed - .configureTestingModule({ - declarations: [PhoneListComponent], - providers: [ - {provide: ActivatedRoute, useValue: new ActivatedRouteMock({params: {phoneId: 1}})}, - {provide: Location, useClass: SpyLocation}, - {provide: Phone, useClass: MockPhone}, - ], - schemas: [NO_ERRORS_SCHEMA] - }) - .compileComponents(); + TestBed.configureTestingModule({ + declarations: [PhoneListComponent], + providers: [ + {provide: ActivatedRoute, useValue: new ActivatedRouteMock({params: {phoneId: 1}})}, + {provide: Location, useClass: SpyLocation}, + {provide: Phone, useClass: MockPhone}, + ], + schemas: [NO_ERRORS_SCHEMA], + }).compileComponents(); })); beforeEach(() => { @@ -46,10 +45,12 @@ describe('PhoneList', () => { fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelectorAll('.phone-list-item').length).toBe(2); - expect(compiled.querySelector('.phone-list-item:nth-child(1)').textContent) - .toContain('Motorola DROID'); - expect(compiled.querySelector('.phone-list-item:nth-child(2)').textContent) - .toContain('Nexus S'); + expect(compiled.querySelector('.phone-list-item:nth-child(1)').textContent).toContain( + 'Motorola DROID', + ); + expect(compiled.querySelector('.phone-list-item:nth-child(2)').textContent).toContain( + 'Nexus S', + ); }); xit('should set the default value of orderProp model', () => { diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts index 7950d94dc5b..6eeeda2f273 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts @@ -1,17 +1,17 @@ // #docregion downgrade-component declare const angular: angular.IAngularStatic; -import { downgradeComponent } from '@angular/upgrade/static'; +import {downgradeComponent} from '@angular/upgrade/static'; // #enddocregion downgrade-component // #docregion initialclass -import { Component } from '@angular/core'; -import { Phone, PhoneData } from '../core/phone/phone.service'; +import {Component} from '@angular/core'; +import {Phone, PhoneData} from '../core/phone/phone.service'; // #docregion downgrade-component @Component({ selector: 'phone-list', - templateUrl: './phone-list.template.html' + templateUrl: './phone-list.template.html', }) export class PhoneListComponent { // #enddocregion downgrade-component @@ -20,7 +20,7 @@ export class PhoneListComponent { orderProp: string; constructor(phone: Phone) { - phone.query().subscribe(phones => { + phone.query().subscribe((phones) => { this.phones = phones; }); this.orderProp = 'age'; @@ -34,7 +34,7 @@ export class PhoneListComponent { private filterPhones(phones: PhoneData[]) { if (phones && this.query) { - return phones.filter(phone => { + return phones.filter((phone) => { const name = phone.name.toLowerCase(); const snippet = phone.snippet.toLowerCase(); return name.indexOf(this.query) >= 0 || snippet.indexOf(this.query) >= 0; @@ -64,9 +64,10 @@ export class PhoneListComponent { } // #enddocregion initialclass -angular.module('phoneList') +angular + .module('phoneList') .directive( 'phoneList', - downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory + downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory, ); // #enddocregion downgrade-component diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js b/adev/src/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js index 50088e69ea0..60d01b88108 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js @@ -17,9 +17,9 @@ var resources = [ 'app/core/core.module.js', 'app/core/phone/phone.module.js', 'app/phone-list/phone-list.module.js', - 'app/phone-detail/phone-detail.module.js' + 'app/phone-detail/phone-detail.module.js', ]; -resources.map(function(sourcePath) { +resources.map(function (sourcePath) { // Need to rename zone.umd.min.js to zone.min.js var destPath = `aot/${sourcePath}`.replace('.umd.min.js', '.min.js'); fsExtra.copySync(sourcePath, destPath); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts b/adev/src/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts index 424f91ca4a1..9a5ebff2a40 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts @@ -1,10 +1,9 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; // Angular E2E Testing Guide: // https://docs.angularjs.org/guide/e2e-testing describe('PhoneCat Application', () => { - it('should redirect `index.html` to `index.html#!/phones', async () => { await browser.get('index.html'); await browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine. @@ -12,7 +11,6 @@ describe('PhoneCat Application', () => { }); describe('View: Phone list', () => { - beforeEach(() => browser.get('index.html#!/phones')); it('should filter the phone list as a user types into the search box', async () => { @@ -39,19 +37,13 @@ describe('PhoneCat Application', () => { return phoneNameColumn.map((elem) => elem.getText()); } - await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter + await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - expect(await getNames()).toEqual([ - 'Motorola XOOM\u2122 with Wi-Fi', - 'MOTOROLA XOOM\u2122' - ]); + expect(await getNames()).toEqual(['Motorola XOOM\u2122 with Wi-Fi', 'MOTOROLA XOOM\u2122']); await nameOption.click(); - expect(await getNames()).toEqual([ - 'MOTOROLA XOOM\u2122', - 'Motorola XOOM\u2122 with Wi-Fi' - ]); + expect(await getNames()).toEqual(['MOTOROLA XOOM\u2122', 'Motorola XOOM\u2122 with Wi-Fi']); }); it('should render phone specific links', async () => { @@ -62,11 +54,9 @@ describe('PhoneCat Application', () => { await browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine. expect(await browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/); }); - }); describe('View: Phone detail', () => { - beforeEach(() => browser.get('index.html#!/phones/nexus-s')); it('should display the `nexus-s` page', async () => { @@ -89,7 +79,5 @@ describe('PhoneCat Application', () => { await thumbnails.get(0).click(); expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); - }); - }); diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js b/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js index 29b047a1504..c3f25af81b6 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js @@ -9,7 +9,7 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; var builtPath = '/base/app/'; -__karma__.loaded = function () { }; +__karma__.loaded = function () {}; function isJsFile(path) { return path.slice(-3) == '.js'; @@ -20,17 +20,15 @@ function isSpecFile(path) { } function isBuiltFile(path) { - return isJsFile(path) && (path.slice(0, builtPath.length) == builtPath); + return isJsFile(path) && path.slice(0, builtPath.length) == builtPath; } -var allSpecFiles = Object.keys(window.__karma__.files) - .filter(isSpecFile) - .filter(isBuiltFile); +var allSpecFiles = Object.keys(window.__karma__.files).filter(isSpecFile).filter(isBuiltFile); System.config({ baseURL: '/base', // Extend usual application package list with test folder - packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, + packages: {'testing': {main: 'index.js', defaultExtension: 'js'}}, // Assume npm: is set in `paths` in systemjs.config // Map the angular testing bundles @@ -40,23 +38,20 @@ System.config({ '@angular/common/http/testing': 'npm:@angular/common/fesm2022/http/testing.mjs', '@angular/compiler/testing': 'npm:@angular/compiler/fesm2022/testing.mjs', '@angular/platform-browser/testing': 'npm:@angular/platform-browser/fesm2022/testing.mjs', - '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/fesm2022/testing.mjs', + '@angular/platform-browser-dynamic/testing': + 'npm:@angular/platform-browser-dynamic/fesm2022/testing.mjs', '@angular/router/testing': 'npm:@angular/router/fesm2022/testing.mjs', '@angular/forms/testing': 'npm:@angular/forms/fesm2022/testing.mjs', }, }); -System.import('systemjs.config.js') - .then(importSystemJsExtras) - .then(initTestBed) - .then(initTesting); +System.import('systemjs.config.js').then(importSystemJsExtras).then(initTestBed).then(initTesting); /** Optional SystemJS configuration extras. Keep going w/o it */ -function importSystemJsExtras(){ - return System.import('systemjs.config.extras.js') - .catch(function(reason) { +function importSystemJsExtras() { + return System.import('systemjs.config.extras.js').catch(function (reason) { console.log( - 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' + 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.', ); console.log(reason); }); @@ -65,17 +60,16 @@ function importSystemJsExtras(){ function initTestBed() { return Promise.all([ System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') - ]) - - .then(function (providers) { - var coreTesting = providers[0]; + System.import('@angular/platform-browser-dynamic/testing'), + ]).then(function (providers) { + var coreTesting = providers[0]; var browserTesting = providers[1]; coreTesting.TestBed.initTestEnvironment( browserTesting.BrowserDynamicTestingModule, - browserTesting.platformBrowserDynamicTesting()); - }) + browserTesting.platformBrowserDynamicTesting(), + ); + }); } // Import all spec files and start karma @@ -83,7 +77,6 @@ function initTesting() { return Promise.all( allSpecFiles.map(function (moduleName) { return System.import(moduleName); - }) - ) - .then(__karma__.start, __karma__.error); + }), + ).then(__karma__.start, __karma__.error); } diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js b/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js index 29bcae1482e..f17b5e0b304 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js @@ -9,10 +9,11 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; // builtPaths: root paths for output ("built") files // get from karma.config.js, then prefix with '/src/' (default is 'app/') -var builtPaths = (__karma__.config.builtPaths || ['src/']) - .map(function(p) { return '/base/'+p;}); +var builtPaths = (__karma__.config.builtPaths || ['src/']).map(function (p) { + return '/base/' + p; +}); -__karma__.loaded = function () { }; +__karma__.loaded = function () {}; function isJsFile(path) { return path.slice(-3) == '.js'; @@ -24,20 +25,20 @@ function isSpecFile(path) { // Is a "built" file if is JavaScript file in one of the "built" folders function isBuiltFile(path) { - return isJsFile(path) && - builtPaths.reduce(function(keep, bp) { - return keep || (path.slice(0, bp.length) === bp); - }, false); + return ( + isJsFile(path) && + builtPaths.reduce(function (keep, bp) { + return keep || path.slice(0, bp.length) === bp; + }, false) + ); } -var allSpecFiles = Object.keys(window.__karma__.files) - .filter(isSpecFile) - .filter(isBuiltFile); +var allSpecFiles = Object.keys(window.__karma__.files).filter(isSpecFile).filter(isBuiltFile); System.config({ baseURL: 'base/src', // Extend usual application package list with testing folder - packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, + packages: {'testing': {main: 'index.js', defaultExtension: 'js'}}, // Assume npm: is set in `paths` in systemjs.config // Map the angular testing bundles @@ -47,50 +48,45 @@ System.config({ '@angular/common/http/testing': 'npm:@angular/common/fesm2022/http/testing.mjs', '@angular/compiler/testing': 'npm:@angular/compiler/fesm2022/testing.mjs', '@angular/platform-browser/testing': 'npm:@angular/platform-browser/fesm2022/testing.mjs', - '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/fesm2022/testing.mjs', + '@angular/platform-browser-dynamic/testing': + 'npm:@angular/platform-browser-dynamic/fesm2022/testing.mjs', '@angular/router/testing': 'npm:@angular/router/fesm2022/testing.mjs', '@angular/forms/testing': 'npm:@angular/forms/fesm2022/testing.mjs', }, }); -System.import('systemjs.config.js') - .then(importSystemJsExtras) - .then(initTestBed) - .then(initTesting); +System.import('systemjs.config.js').then(importSystemJsExtras).then(initTestBed).then(initTesting); /** Optional SystemJS configuration extras. Keep going w/o it */ -function importSystemJsExtras(){ - return System.import('systemjs.config.extras.js') - .catch(function(reason) { +function importSystemJsExtras() { + return System.import('systemjs.config.extras.js').catch(function (reason) { console.log( - 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' + 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.', ); console.log(reason); }); } -function initTestBed(){ +function initTestBed() { return Promise.all([ System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') - ]) - - .then(function (providers) { - var coreTesting = providers[0]; + System.import('@angular/platform-browser-dynamic/testing'), + ]).then(function (providers) { + var coreTesting = providers[0]; var browserTesting = providers[1]; coreTesting.TestBed.initTestEnvironment( browserTesting.BrowserDynamicTestingModule, - browserTesting.platformBrowserDynamicTesting()); - }) + browserTesting.platformBrowserDynamicTesting(), + ); + }); } // Import all spec files and start karma -function initTesting () { +function initTesting() { return Promise.all( allSpecFiles.map(function (moduleName) { return System.import(moduleName); - }) - ) - .then(__karma__.start, __karma__.error); + }), + ).then(__karma__.start, __karma__.error); } diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js b/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js index 5cde637cc67..cfc32e3c8c5 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js @@ -1,7 +1,6 @@ //jshint strict: false -module.exports = function(config) { +module.exports = function (config) { config.set({ - // #docregion basepath basePath: './', // #enddocregion basepath @@ -25,15 +24,15 @@ module.exports = function(config) { 'node_modules/zone.js/bundles/zone-testing.umd.js', // RxJs. - { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, + {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false}, + {pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false}, // Angular itself and the testing library - { pattern: 'node_modules/@angular/**/*.mjs', included: false, watched: false }, - { pattern: 'node_modules/@angular/**/*.mjs.map', included: false, watched: false }, + {pattern: 'node_modules/@angular/**/*.mjs', included: false, watched: false}, + {pattern: 'node_modules/@angular/**/*.mjs.map', included: false, watched: false}, - { pattern: 'node_modules/tslib/tslib.js', included: false, watched: false }, - { pattern: 'node_modules/systemjs-plugin-babel/**/*.js', included: false, watched: false }, + {pattern: 'node_modules/tslib/tslib.js', included: false, watched: false}, + {pattern: 'node_modules/systemjs-plugin-babel/**/*.js', included: false, watched: false}, {pattern: 'systemjs.config.js', included: false, watched: false}, 'karma-test-shim.js', @@ -61,7 +60,7 @@ module.exports = function(config) { proxies: { // required for component assets fetched by Angular's compiler '/phone-detail': '/base/app/phone-detail', - '/phone-list': '/base/app/phone-list' + '/phone-list': '/base/app/phone-list', }, // #enddocregion html @@ -71,10 +70,6 @@ module.exports = function(config) { browsers: ['Chrome'], - plugins: [ - 'karma-chrome-launcher', - 'karma-jasmine' - ] - + plugins: ['karma-chrome-launcher', 'karma-jasmine'], }); }; diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js b/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js index 5504b9de7bb..819fe9f4997 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js @@ -1,11 +1,10 @@ // #docregion -module.exports = function(config) { - - var appBase = 'src/'; // transpiled app JS and map files - var appAssets = '/base/app/'; // component assets fetched by Angular's compiler +module.exports = function (config) { + var appBase = 'src/'; // transpiled app JS and map files + var appAssets = '/base/app/'; // component assets fetched by Angular's compiler // Testing helpers (optional) are conventionally in a folder called `testing` - var testingBase = 'src/testing/'; // transpiled test JS and map files + var testingBase = 'src/testing/'; // transpiled test JS and map files var testingSrcBase = 'src/testing/'; // test source TS files config.set({ @@ -15,12 +14,12 @@ module.exports = function(config) { plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter') + require('karma-jasmine-html-reporter'), ], client: { builtPaths: [appBase, testingBase], // add more spec base paths as needed - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, files: [ @@ -35,46 +34,45 @@ module.exports = function(config) { 'node_modules/zone.js/bundles/zone-testing.umd.js', // RxJs - { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, + {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false}, + {pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false}, // tslib (TS helper fns such as `__extends`) - { pattern: 'node_modules/tslib/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/tslib/**/*.js.map', included: false, watched: false }, + {pattern: 'node_modules/tslib/**/*.js', included: false, watched: false}, + {pattern: 'node_modules/tslib/**/*.js.map', included: false, watched: false}, // Paths loaded via module imports: // Angular itself - { pattern: 'node_modules/@angular/**/*.mjs', included: false, watched: false }, - { pattern: 'node_modules/@angular/**/*.mjs.map', included: false, watched: false }, + {pattern: 'node_modules/@angular/**/*.mjs', included: false, watched: false}, + {pattern: 'node_modules/@angular/**/*.mjs.map', included: false, watched: false}, - { pattern: 'node_modules/tslib/tslib.js', included: false, watched: false }, - { pattern: 'node_modules/systemjs-plugin-babel/**/*.js', included: false, watched: false }, + {pattern: 'node_modules/tslib/tslib.js', included: false, watched: false}, + {pattern: 'node_modules/systemjs-plugin-babel/**/*.js', included: false, watched: false}, - { pattern: appBase + '/systemjs.config.js', included: false, watched: false }, - { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false }, + {pattern: appBase + '/systemjs.config.js', included: false, watched: false}, + {pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false}, 'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels // transpiled application & spec code paths loaded via module imports - { pattern: appBase + '**/*.js', included: false, watched: true }, - { pattern: testingBase + '**/*.js', included: false, watched: true }, - + {pattern: appBase + '**/*.js', included: false, watched: true}, + {pattern: testingBase + '**/*.js', included: false, watched: true}, // Asset (HTML & CSS) paths loaded via Angular's component compiler // (these paths need to be rewritten, see proxies section) - { pattern: appBase + '**/*.html', included: false, watched: true }, - { pattern: appBase + '**/*.css', included: false, watched: true }, + {pattern: appBase + '**/*.html', included: false, watched: true}, + {pattern: appBase + '**/*.css', included: false, watched: true}, // Paths for debugging with source maps in dev tools - { pattern: appBase + '**/*.ts', included: false, watched: false }, - { pattern: appBase + '**/*.js.map', included: false, watched: false }, - { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, - { pattern: testingBase + '**/*.js.map', included: false, watched: false} + {pattern: appBase + '**/*.ts', included: false, watched: false}, + {pattern: appBase + '**/*.js.map', included: false, watched: false}, + {pattern: testingSrcBase + '**/*.ts', included: false, watched: false}, + {pattern: testingBase + '**/*.js.map', included: false, watched: false}, ], // Proxied base paths for loading assets proxies: { // required for modules fetched by SystemJS - '/base/src/node_modules/': '/base/node_modules/' + '/base/src/node_modules/': '/base/node_modules/', }, exclude: [], @@ -86,6 +84,6 @@ module.exports = function(config) { logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], - singleRun: false - }) -} + singleRun: false, + }); +}; diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js b/adev/src/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js index 0a008f95a9f..86811d1b747 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js @@ -1,7 +1,7 @@ // #docregion import commonjs from '@rollup/plugin-commonjs'; -import {nodeResolve} from '@rollup/plugin-node-resolve' -import {terser} from 'rollup-plugin-terser' +import {nodeResolve} from '@rollup/plugin-node-resolve'; +import {terser} from 'rollup-plugin-terser'; //paths are relative to the execution path export default { @@ -10,7 +10,7 @@ export default { file: 'aot/dist/build.js', // output a single application bundle format: 'iife', sourcemap: true, - sourcemapFile: 'aot/dist/build.js.map' + sourcemapFile: 'aot/dist/build.js.map', }, // Rollup treeshaking has issues with https://github.com/angular/angular/blob/addd7f6249d54e258109f139fad1db0d0250352c/packages/core/src/linker/query_list.ts#L192 // see: https://github.com/rollup/rollup/issues/4895 @@ -18,8 +18,8 @@ export default { plugins: [ nodeResolve(), commonjs({ - include: ['node_modules/rxjs/**'] + include: ['node_modules/rxjs/**'], }), - terser() - ] -} + terser(), + ], +}; diff --git a/adev/src/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js b/adev/src/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js index 624288dbc21..4994251bbb0 100644 --- a/adev/src/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js +++ b/adev/src/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js @@ -8,7 +8,7 @@ // #enddocregion angular-paths, rxjs-paths, tslib-paths, plugin-babel paths: { // paths serve as alias - 'npm:': '/node_modules/' + 'npm:': '/node_modules/', }, // #docregion angular-paths, rxjs-paths, tslib-paths, plugin-babel map: { @@ -23,7 +23,8 @@ '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', - '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', + '@angular/platform-browser-dynamic': + 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/router/upgrade': 'npm:@angular/router/fesm2022/upgrade.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', @@ -44,7 +45,7 @@ // #docregion plugin-babel 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', - 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' + 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js', // #docregion paths, angular-paths, rxjs-paths, tslib-paths }, // #enddocregion paths, angular-paths, rxjs-paths, tslib-paths @@ -60,36 +61,36 @@ defaultExtension: 'js', meta: { './*.js': { - loader: 'ng-loader' - } - } + loader: 'ng-loader', + }, + }, }, 'angular-in-memory-web-api': { main: './index.js', - defaultExtension: 'js' + defaultExtension: 'js', }, // #docregion rxjs-paths 'rxjs': { defaultExtension: 'js', format: 'cjs', - main: 'index.js' + main: 'index.js', }, 'rxjs/operators': { defaultExtension: 'js', format: 'cjs', - main: 'index.js' + main: 'index.js', }, // #enddocregion rxjs-paths // #docregion plugin-babel 'meta': { '*.mjs': { babelOptions: { - es2015: false - } - } - } + es2015: false, + }, + }, + }, // #docregion rxjs-paths - } + }, // #docregion angular-paths, tslib-paths }); // #enddocregion angular-paths, rxjs-paths, tslib-paths, plugin-babel diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts index a437291ffd6..beffd6cb2d9 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts @@ -1,23 +1,23 @@ // #docregion -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {Routes, RouterModule} from '@angular/router'; +import {APP_BASE_HREF, HashLocationStrategy, LocationStrategy} from '@angular/common'; -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; -import { PhoneListComponent } from './phone-list/phone-list.component'; +import {PhoneDetailComponent} from './phone-detail/phone-detail.component'; +import {PhoneListComponent} from './phone-list/phone-list.component'; const routes: Routes = [ - { path: '', redirectTo: 'phones', pathMatch: 'full' }, - { path: 'phones', component: PhoneListComponent }, - { path: 'phones/:phoneId', component: PhoneDetailComponent } + {path: '', redirectTo: 'phones', pathMatch: 'full'}, + {path: 'phones', component: PhoneListComponent}, + {path: 'phones/:phoneId', component: PhoneDetailComponent}, ]; @NgModule({ - imports: [ RouterModule.forRoot(routes) ], - exports: [ RouterModule ], + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule], providers: [ - { provide: APP_BASE_HREF, useValue: '!' }, - { provide: LocationStrategy, useClass: HashLocationStrategy }, - ] + {provide: APP_BASE_HREF, useValue: '!'}, + {provide: LocationStrategy, useClass: HashLocationStrategy}, + ], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/app.component.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/app.component.ts index c476614121c..e6572201ef4 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/app.component.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/app.component.ts @@ -1,8 +1,8 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'phonecat-app', - template: '' + template: '', }) -export class AppComponent { } +export class AppComponent {} diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/app.module.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/app.module.ts index b8961beaa66..321efa49db8 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/app.module.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/app.module.ts @@ -1,31 +1,19 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular/common/http'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {FormsModule} from '@angular/forms'; +import {HttpClientModule} from '@angular/common/http'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; -import { Phone } from './core/phone/phone.service'; -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; -import { PhoneListComponent } from './phone-list/phone-list.component'; +import {AppRoutingModule} from './app-routing.module'; +import {AppComponent} from './app.component'; +import {CheckmarkPipe} from './core/checkmark/checkmark.pipe'; +import {Phone} from './core/phone/phone.service'; +import {PhoneDetailComponent} from './phone-detail/phone-detail.component'; +import {PhoneListComponent} from './phone-list/phone-list.component'; @NgModule({ - imports: [ - BrowserModule, - FormsModule, - HttpClientModule, - AppRoutingModule - ], - declarations: [ - AppComponent, - PhoneListComponent, - CheckmarkPipe, - PhoneDetailComponent - ], - providers: [ - Phone - ], - bootstrap: [ AppComponent ] + imports: [BrowserModule, FormsModule, HttpClientModule, AppRoutingModule], + declarations: [AppComponent, PhoneListComponent, CheckmarkPipe, PhoneDetailComponent], + providers: [Phone], + bootstrap: [AppComponent], }) export class AppModule {} diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts index 8a33658c8ee..1d8b5cbb934 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts @@ -1,7 +1,6 @@ -import { CheckmarkPipe } from './checkmark.pipe'; +import {CheckmarkPipe} from './checkmark.pipe'; describe('CheckmarkPipe', () => { - it('should convert boolean values to unicode checkmark or cross', () => { const checkmarkPipe = new CheckmarkPipe(); expect(checkmarkPipe.transform(true)).toBe('\u2713'); diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts index 888017e15cf..b6492b5f820 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts @@ -1,5 +1,5 @@ // #docregion -import { Pipe, PipeTransform } from '@angular/core'; +import {Pipe, PipeTransform} from '@angular/core'; @Pipe({name: 'checkmark'}) export class CheckmarkPipe implements PipeTransform { diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts index 8df361bd59c..e9daa1f3cca 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts @@ -1,34 +1,36 @@ -import { inject, TestBed } from '@angular/core/testing'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { Phone, PhoneData } from './phone.service'; +import {inject, TestBed} from '@angular/core/testing'; +import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; +import {Phone, PhoneData} from './phone.service'; describe('Phone', () => { let phone: Phone; const phonesData: PhoneData[] = [ {name: 'Phone X', snippet: '', images: []}, {name: 'Phone Y', snippet: '', images: []}, - {name: 'Phone Z', snippet: '', images: []} + {name: 'Phone Z', snippet: '', images: []}, ]; let mockHttp: HttpTestingController; beforeEach(() => { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], - providers: [Phone] + providers: [Phone], }); }); - beforeEach(inject([HttpTestingController, Phone], (_mockHttp_: HttpTestingController, _phone_: Phone) => { - mockHttp = _mockHttp_; - phone = _phone_; - })); + beforeEach(inject( + [HttpTestingController, Phone], + (_mockHttp_: HttpTestingController, _phone_: Phone) => { + mockHttp = _mockHttp_; + phone = _phone_; + }, + )); it('should fetch the phones data from `/phones/phones.json`', () => { - phone.query().subscribe(result => { + phone.query().subscribe((result) => { expect(result).toEqual(phonesData); }); const req = mockHttp.expectOne(`/phones/phones.json`); req.flush(phonesData); }); - }); diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts index 33643a900dc..02e4178361c 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts @@ -1,7 +1,7 @@ // #docregion -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; +import {Observable} from 'rxjs'; export interface PhoneData { name: string; @@ -11,7 +11,7 @@ export interface PhoneData { @Injectable() export class Phone { - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) {} query(): Observable { return this.http.get(`phones/phones.json`); } diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/main.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/main.ts index 6af7a5b2ae8..ef5f2a9aa5b 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/main.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/main.ts @@ -1,5 +1,5 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app.module'; +import {AppModule} from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts index 4ebfdd344e5..6ed075252a8 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts @@ -1,13 +1,13 @@ // #docregion // #docregion activatedroute -import { TestBed, waitForAsync } from '@angular/core/testing'; -import { ActivatedRoute } from '@angular/router'; +import {TestBed, waitForAsync} from '@angular/core/testing'; +import {ActivatedRoute} from '@angular/router'; // #enddocregion activatedroute -import { Observable, of } from 'rxjs'; +import {Observable, of} from 'rxjs'; -import { PhoneDetailComponent } from './phone-detail.component'; -import { Phone, PhoneData } from '../core/phone/phone.service'; -import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; +import {PhoneDetailComponent} from './phone-detail.component'; +import {Phone, PhoneData} from '../core/phone/phone.service'; +import {CheckmarkPipe} from '../core/checkmark/checkmark.pipe'; function xyzPhoneData(): PhoneData { return {name: 'phone xyz', snippet: '', images: ['image/url1.png', 'image/url2.png']}; @@ -32,13 +32,12 @@ describe('PhoneDetailComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ CheckmarkPipe, PhoneDetailComponent ], + declarations: [CheckmarkPipe, PhoneDetailComponent], providers: [ - { provide: Phone, useClass: MockPhone }, - { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { phoneId: 1 } }) } - ] - }) - .compileComponents(); + {provide: Phone, useClass: MockPhone}, + {provide: ActivatedRoute, useValue: new ActivatedRouteMock({params: {phoneId: 1}})}, + ], + }).compileComponents(); })); // #enddocregion activatedroute diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts index adff31edda4..7f703d0cd98 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts @@ -1,24 +1,23 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; -import { Phone, PhoneData } from '../core/phone/phone.service'; +import {Phone, PhoneData} from '../core/phone/phone.service'; @Component({ selector: 'phone-detail', - templateUrl: './phone-detail.template.html' + templateUrl: './phone-detail.template.html', }) export class PhoneDetailComponent { phone: PhoneData; mainImageUrl: string; constructor(activatedRoute: ActivatedRoute, phone: Phone) { - phone.get(activatedRoute.snapshot.paramMap.get('phoneId')) - .subscribe((p: PhoneData) => { - this.phone = p; - this.setImage(p.images[0]); - }); + phone.get(activatedRoute.snapshot.paramMap.get('phoneId')).subscribe((p: PhoneData) => { + this.phone = p; + this.setImage(p.images[0]); + }); } setImage(imageUrl: string) { diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts index ca8b7b821f6..efa97baaceb 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts @@ -18,7 +18,8 @@ class ActivatedRouteMock { class MockPhone { query(): Observable { return of([ - {name: 'Nexus S', snippet: '', images: []}, {name: 'Motorola DROID', snippet: '', images: []} + {name: 'Nexus S', snippet: '', images: []}, + {name: 'Motorola DROID', snippet: '', images: []}, ]); } } @@ -29,17 +30,15 @@ describe('PhoneList', () => { // #docregion routestuff beforeEach(waitForAsync(() => { - TestBed - .configureTestingModule({ - declarations: [PhoneListComponent], - providers: [ - {provide: ActivatedRoute, useValue: new ActivatedRouteMock({params: {phoneId: 1}})}, - {provide: Location, useClass: SpyLocation}, - {provide: Phone, useClass: MockPhone}, - ], - schemas: [NO_ERRORS_SCHEMA] - }) - .compileComponents(); + TestBed.configureTestingModule({ + declarations: [PhoneListComponent], + providers: [ + {provide: ActivatedRoute, useValue: new ActivatedRouteMock({params: {phoneId: 1}})}, + {provide: Location, useClass: SpyLocation}, + {provide: Phone, useClass: MockPhone}, + ], + schemas: [NO_ERRORS_SCHEMA], + }).compileComponents(); })); beforeEach(() => { @@ -51,10 +50,12 @@ describe('PhoneList', () => { fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelectorAll('.phone-list-item').length).toBe(2); - expect(compiled.querySelector('.phone-list-item:nth-child(1)').textContent) - .toContain('Motorola DROID'); - expect(compiled.querySelector('.phone-list-item:nth-child(2)').textContent) - .toContain('Nexus S'); + expect(compiled.querySelector('.phone-list-item:nth-child(1)').textContent).toContain( + 'Motorola DROID', + ); + expect(compiled.querySelector('.phone-list-item:nth-child(2)').textContent).toContain( + 'Nexus S', + ); }); xit('should set the default value of orderProp model', () => { diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts b/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts index a9268269ea1..bf7e7563b5e 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts @@ -1,7 +1,7 @@ // #docregion -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; -import { Phone, PhoneData } from '../core/phone/phone.service'; +import {Phone, PhoneData} from '../core/phone/phone.service'; @Component({ selector: 'phone-list', @@ -13,7 +13,7 @@ export class PhoneListComponent { orderProp: string; constructor(phone: Phone) { - phone.query().subscribe(phones => { + phone.query().subscribe((phones) => { this.phones = phones; }); this.orderProp = 'age'; @@ -25,7 +25,7 @@ export class PhoneListComponent { private filterPhones(phones: PhoneData[]) { if (phones && this.query) { - return phones.filter(phone => { + return phones.filter((phone) => { const name = phone.name.toLowerCase(); const snippet = phone.snippet.toLowerCase(); return name.indexOf(this.query) >= 0 || snippet.indexOf(this.query) >= 0; diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/e2e-spec.ts b/adev/src/content/examples/upgrade-phonecat-3-final/e2e-spec.ts index a9ba63978f9..82e8451f7be 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/e2e-spec.ts +++ b/adev/src/content/examples/upgrade-phonecat-3-final/e2e-spec.ts @@ -1,10 +1,9 @@ -import { browser, element, by } from 'protractor'; +import {browser, element, by} from 'protractor'; // Angular E2E Testing Guide: // https://docs.angularjs.org/guide/e2e-testing describe('PhoneCat Application', () => { - // #docregion redirect it('should redirect `index.html` to `index.html#!/phones', async () => { await browser.get('index.html'); @@ -15,7 +14,6 @@ describe('PhoneCat Application', () => { // #enddocregion redirect describe('View: Phone list', () => { - beforeEach(() => browser.get('index.html#!/phones')); it('should filter the phone list as a user types into the search box', async () => { @@ -42,19 +40,13 @@ describe('PhoneCat Application', () => { return phoneNameColumn.map((elem) => elem.getText()); } - await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter + await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - expect(await getNames()).toEqual([ - 'Motorola XOOM\u2122 with Wi-Fi', - 'MOTOROLA XOOM\u2122' - ]); + expect(await getNames()).toEqual(['Motorola XOOM\u2122 with Wi-Fi', 'MOTOROLA XOOM\u2122']); await nameOption.click(); - expect(await getNames()).toEqual([ - 'MOTOROLA XOOM\u2122', - 'Motorola XOOM\u2122 with Wi-Fi' - ]); + expect(await getNames()).toEqual(['MOTOROLA XOOM\u2122', 'Motorola XOOM\u2122 with Wi-Fi']); }); // #docregion links @@ -66,11 +58,9 @@ describe('PhoneCat Application', () => { expect(url.endsWith('/phones/nexus-s')).toBe(true); }); // #enddocregion links - }); describe('View: Phone detail', () => { - beforeEach(() => browser.get('index.html#!/phones/nexus-s')); it('should display the `nexus-s` page', async () => { @@ -93,7 +83,5 @@ describe('PhoneCat Application', () => { await thumbnails.get(0).click(); expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); - }); - }); diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/karma-test-shim.js b/adev/src/content/examples/upgrade-phonecat-3-final/karma-test-shim.js index 29bcae1482e..f17b5e0b304 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/karma-test-shim.js +++ b/adev/src/content/examples/upgrade-phonecat-3-final/karma-test-shim.js @@ -9,10 +9,11 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; // builtPaths: root paths for output ("built") files // get from karma.config.js, then prefix with '/src/' (default is 'app/') -var builtPaths = (__karma__.config.builtPaths || ['src/']) - .map(function(p) { return '/base/'+p;}); +var builtPaths = (__karma__.config.builtPaths || ['src/']).map(function (p) { + return '/base/' + p; +}); -__karma__.loaded = function () { }; +__karma__.loaded = function () {}; function isJsFile(path) { return path.slice(-3) == '.js'; @@ -24,20 +25,20 @@ function isSpecFile(path) { // Is a "built" file if is JavaScript file in one of the "built" folders function isBuiltFile(path) { - return isJsFile(path) && - builtPaths.reduce(function(keep, bp) { - return keep || (path.slice(0, bp.length) === bp); - }, false); + return ( + isJsFile(path) && + builtPaths.reduce(function (keep, bp) { + return keep || path.slice(0, bp.length) === bp; + }, false) + ); } -var allSpecFiles = Object.keys(window.__karma__.files) - .filter(isSpecFile) - .filter(isBuiltFile); +var allSpecFiles = Object.keys(window.__karma__.files).filter(isSpecFile).filter(isBuiltFile); System.config({ baseURL: 'base/src', // Extend usual application package list with testing folder - packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, + packages: {'testing': {main: 'index.js', defaultExtension: 'js'}}, // Assume npm: is set in `paths` in systemjs.config // Map the angular testing bundles @@ -47,50 +48,45 @@ System.config({ '@angular/common/http/testing': 'npm:@angular/common/fesm2022/http/testing.mjs', '@angular/compiler/testing': 'npm:@angular/compiler/fesm2022/testing.mjs', '@angular/platform-browser/testing': 'npm:@angular/platform-browser/fesm2022/testing.mjs', - '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/fesm2022/testing.mjs', + '@angular/platform-browser-dynamic/testing': + 'npm:@angular/platform-browser-dynamic/fesm2022/testing.mjs', '@angular/router/testing': 'npm:@angular/router/fesm2022/testing.mjs', '@angular/forms/testing': 'npm:@angular/forms/fesm2022/testing.mjs', }, }); -System.import('systemjs.config.js') - .then(importSystemJsExtras) - .then(initTestBed) - .then(initTesting); +System.import('systemjs.config.js').then(importSystemJsExtras).then(initTestBed).then(initTesting); /** Optional SystemJS configuration extras. Keep going w/o it */ -function importSystemJsExtras(){ - return System.import('systemjs.config.extras.js') - .catch(function(reason) { +function importSystemJsExtras() { + return System.import('systemjs.config.extras.js').catch(function (reason) { console.log( - 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' + 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.', ); console.log(reason); }); } -function initTestBed(){ +function initTestBed() { return Promise.all([ System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') - ]) - - .then(function (providers) { - var coreTesting = providers[0]; + System.import('@angular/platform-browser-dynamic/testing'), + ]).then(function (providers) { + var coreTesting = providers[0]; var browserTesting = providers[1]; coreTesting.TestBed.initTestEnvironment( browserTesting.BrowserDynamicTestingModule, - browserTesting.platformBrowserDynamicTesting()); - }) + browserTesting.platformBrowserDynamicTesting(), + ); + }); } // Import all spec files and start karma -function initTesting () { +function initTesting() { return Promise.all( allSpecFiles.map(function (moduleName) { return System.import(moduleName); - }) - ) - .then(__karma__.start, __karma__.error); + }), + ).then(__karma__.start, __karma__.error); } diff --git a/adev/src/content/examples/upgrade-phonecat-3-final/karma.conf.js b/adev/src/content/examples/upgrade-phonecat-3-final/karma.conf.js index dbbc0ca1fcd..e8d9f7bf5f1 100644 --- a/adev/src/content/examples/upgrade-phonecat-3-final/karma.conf.js +++ b/adev/src/content/examples/upgrade-phonecat-3-final/karma.conf.js @@ -1,11 +1,10 @@ // #docregion -module.exports = function(config) { - - var appBase = 'src/'; // transpiled app JS and map files - var appAssets = '/base/app/'; // component assets fetched by Angular's compiler +module.exports = function (config) { + var appBase = 'src/'; // transpiled app JS and map files + var appAssets = '/base/app/'; // component assets fetched by Angular's compiler // Testing helpers (optional) are conventionally in a folder called `testing` - var testingBase = 'src/testing/'; // transpiled test JS and map files + var testingBase = 'src/testing/'; // transpiled test JS and map files var testingSrcBase = 'src/testing/'; // test source TS files config.set({ @@ -15,12 +14,12 @@ module.exports = function(config) { plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter') + require('karma-jasmine-html-reporter'), ], client: { builtPaths: [appBase, testingBase], // add more spec base paths as needed - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, files: [ @@ -35,42 +34,41 @@ module.exports = function(config) { 'node_modules/zone.js/bundles/zone-testing.umd.js', // RxJs - { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, + {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false}, + {pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false}, // Paths loaded via module imports: // Angular itself - { pattern: 'node_modules/@angular/**/*.mjs', included: false, watched: false }, - { pattern: 'node_modules/@angular/**/*.mjs.map', included: false, watched: false }, + {pattern: 'node_modules/@angular/**/*.mjs', included: false, watched: false}, + {pattern: 'node_modules/@angular/**/*.mjs.map', included: false, watched: false}, - { pattern: 'node_modules/tslib/tslib.js', included: false, watched: false }, - { pattern: 'node_modules/systemjs-plugin-babel/**/*.js', included: false, watched: false }, + {pattern: 'node_modules/tslib/tslib.js', included: false, watched: false}, + {pattern: 'node_modules/systemjs-plugin-babel/**/*.js', included: false, watched: false}, - { pattern: appBase + '/systemjs.config.js', included: false, watched: false }, - { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false }, + {pattern: appBase + '/systemjs.config.js', included: false, watched: false}, + {pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false}, 'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels // transpiled application & spec code paths loaded via module imports - { pattern: appBase + '**/*.js', included: false, watched: true }, - { pattern: testingBase + '**/*.js', included: false, watched: true }, - + {pattern: appBase + '**/*.js', included: false, watched: true}, + {pattern: testingBase + '**/*.js', included: false, watched: true}, // Asset (HTML & CSS) paths loaded via Angular's component compiler // (these paths need to be rewritten, see proxies section) - { pattern: appBase + '**/*.html', included: false, watched: true }, - { pattern: appBase + '**/*.css', included: false, watched: true }, + {pattern: appBase + '**/*.html', included: false, watched: true}, + {pattern: appBase + '**/*.css', included: false, watched: true}, // Paths for debugging with source maps in dev tools - { pattern: appBase + '**/*.ts', included: false, watched: false }, - { pattern: appBase + '**/*.js.map', included: false, watched: false }, - { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, - { pattern: testingBase + '**/*.js.map', included: false, watched: false} + {pattern: appBase + '**/*.ts', included: false, watched: false}, + {pattern: appBase + '**/*.js.map', included: false, watched: false}, + {pattern: testingSrcBase + '**/*.ts', included: false, watched: false}, + {pattern: testingBase + '**/*.js.map', included: false, watched: false}, ], // Proxied base paths for loading assets proxies: { // required for modules fetched by SystemJS - '/base/src/node_modules/': '/base/node_modules/' + '/base/src/node_modules/': '/base/node_modules/', }, exclude: [], @@ -82,6 +80,6 @@ module.exports = function(config) { logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], - singleRun: false - }) -} + singleRun: false, + }); +}; diff --git a/adev/src/content/examples/user-input/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/user-input/e2e/src/app.e2e-spec.ts index 53f4e20c293..ae31830266f 100644 --- a/adev/src/content/examples/user-input/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/user-input/e2e/src/app.e2e-spec.ts @@ -1,7 +1,6 @@ -import { browser, element, by, protractor } from 'protractor'; +import {browser, element, by, protractor} from 'protractor'; describe('User Input Tests', () => { - beforeAll(() => browser.get('')); it('should support the click event', async () => { @@ -86,4 +85,3 @@ describe('User Input Tests', () => { expect(await heroEles.get(numHeroes).getText()).toContain('abc'); }); }); - diff --git a/adev/src/content/examples/view-encapsulation/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/view-encapsulation/e2e/src/app.e2e-spec.ts index 5a7bddf9a66..be5f237ebc6 100644 --- a/adev/src/content/examples/view-encapsulation/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/view-encapsulation/e2e/src/app.e2e-spec.ts @@ -1,8 +1,7 @@ /* eslint-disable max-len */ -import { browser, by, element, logging, WebElement } from 'protractor'; +import {browser, by, element, logging, WebElement} from 'protractor'; describe('View Encapsulation App', () => { - const RED = 'rgba(255, 0, 0, 1)'; const GREEN = 'rgba(0, 128, 0, 1)'; const BLUE = 'rgba(0, 0, 255, 1)'; @@ -15,7 +14,9 @@ describe('View Encapsulation App', () => { }); it('should color the `NoEncapsulationComponent` message red, when it is at the top level', async () => { - const noEncapsulationMessage = element(by.css('app-root > app-no-encapsulation > .none-message')); + const noEncapsulationMessage = element( + by.css('app-root > app-no-encapsulation > .none-message'), + ); expect(await noEncapsulationMessage.getCssValue('color')).toEqual(RED); }); @@ -25,71 +26,105 @@ describe('View Encapsulation App', () => { }); it('should color the `EmulatedEncapsulationComponent` message green, when it is at the top level', async () => { - const noEncapsulationMessage = element(by.css('app-root > app-emulated-encapsulation > .emulated-message')); + const noEncapsulationMessage = element( + by.css('app-root > app-emulated-encapsulation > .emulated-message'), + ); expect(await noEncapsulationMessage.getCssValue('color')).toEqual(GREEN); }); it('should color the `NoEncapsulationComponent` heading red, when it is a child of `EmulatedEncapsulationComponent`)', async () => { - const noEncapsulationHeading = element(by.css('app-root > app-emulated-encapsulation > app-no-encapsulation > h2')); + const noEncapsulationHeading = element( + by.css('app-root > app-emulated-encapsulation > app-no-encapsulation > h2'), + ); expect(await noEncapsulationHeading.getCssValue('color')).toEqual(RED); }); it('should color the `NoEncapsulationComponent` message red, when it is a child of `EmulatedEncapsulationComponent`)', async () => { - const noEncapsulationMessage = element(by.css('app-root > app-emulated-encapsulation > app-no-encapsulation > .none-message')); + const noEncapsulationMessage = element( + by.css('app-root > app-emulated-encapsulation > app-no-encapsulation > .none-message'), + ); expect(await noEncapsulationMessage.getCssValue('color')).toEqual(RED); }); it('should color the `ShadowDomEncapsulationComponent` heading blue', async () => { - const noEncapsulationHeading = await findShadowDomElement('app-root > app-shadow-dom-encapsulation', 'h2'); + const noEncapsulationHeading = await findShadowDomElement( + 'app-root > app-shadow-dom-encapsulation', + 'h2', + ); expect(await noEncapsulationHeading.getCssValue('color')).toEqual(BLUE); }); it('should color the `ShadowDomEncapsulationComponent` message blue', async () => { - const noEncapsulationHMessage = await findShadowDomElement('app-root > app-shadow-dom-encapsulation', '.shadow-message'); + const noEncapsulationHMessage = await findShadowDomElement( + 'app-root > app-shadow-dom-encapsulation', + '.shadow-message', + ); expect(await noEncapsulationHMessage.getCssValue('color')).toEqual(BLUE); }); it('should color the `EmulatedEncapsulationComponent` heading green, when it is a child of `ShadowDomEncapsulationComponent`', async () => { - const noEncapsulationHeading = await findShadowDomElement('app-root > app-shadow-dom-encapsulation', 'app-emulated-encapsulation > h2'); + const noEncapsulationHeading = await findShadowDomElement( + 'app-root > app-shadow-dom-encapsulation', + 'app-emulated-encapsulation > h2', + ); expect(await noEncapsulationHeading.getCssValue('color')).toEqual(GREEN); }); it('should color the `EmulatedEncapsulationComponent` message green, when it is a child of `ShadowDomEncapsulationComponent`', async () => { - const noEncapsulationMessage = await findShadowDomElement('app-root > app-shadow-dom-encapsulation', 'app-emulated-encapsulation > .emulated-message'); + const noEncapsulationMessage = await findShadowDomElement( + 'app-root > app-shadow-dom-encapsulation', + 'app-emulated-encapsulation > .emulated-message', + ); expect(await noEncapsulationMessage.getCssValue('color')).toEqual(GREEN); }); it('should color the `NoEncapsulationComponent` heading blue (not red!), when it is a child of the `ShadowDomEncapsulationComponent`', async () => { - const noEncapsulationHeading = await findShadowDomElement('app-root > app-shadow-dom-encapsulation', 'app-no-encapsulation > h2'); + const noEncapsulationHeading = await findShadowDomElement( + 'app-root > app-shadow-dom-encapsulation', + 'app-no-encapsulation > h2', + ); expect(await noEncapsulationHeading.getCssValue('color')).toEqual(BLUE); }); it('should color the `NoEncapsulationComponent` message red (not blue!), when it is a child of the `ShadowDomEncapsulationComponent`', async () => { - const noEncapsulationMessage = await findShadowDomElement('app-root > app-shadow-dom-encapsulation', 'app-no-encapsulation > .none-message'); + const noEncapsulationMessage = await findShadowDomElement( + 'app-root > app-shadow-dom-encapsulation', + 'app-no-encapsulation > .none-message', + ); expect(await noEncapsulationMessage.getCssValue('color')).toEqual(RED); }); it('should color the `NoEncapsulationComponent` heading blue (not red!), when it is a child of the `EmulatedEncapsulationComponent`, which is a child of the `ShadowDomEncapsulationComponent`', async () => { - const noEncapsulationHeading = await findShadowDomElement('app-root > app-shadow-dom-encapsulation', 'app-emulated-encapsulation > app-no-encapsulation > h2'); + const noEncapsulationHeading = await findShadowDomElement( + 'app-root > app-shadow-dom-encapsulation', + 'app-emulated-encapsulation > app-no-encapsulation > h2', + ); expect(await noEncapsulationHeading.getCssValue('color')).toEqual(BLUE); }); it('should color the `NoEncapsulationComponent` message red (not blue!), when it is a child of the `EmulatedEncapsulationComponent`, which is a child of the `ShadowDomEncapsulationComponent`', async () => { - const noEncapsulationMessage = await findShadowDomElement('app-root > app-shadow-dom-encapsulation', 'app-emulated-encapsulation > app-no-encapsulation > .none-message'); + const noEncapsulationMessage = await findShadowDomElement( + 'app-root > app-shadow-dom-encapsulation', + 'app-emulated-encapsulation > app-no-encapsulation > .none-message', + ); expect(await noEncapsulationMessage.getCssValue('color')).toEqual(RED); }); afterEach(async () => { // Assert that there are no errors emitted from the browser const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain(jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry)); + expect(logs).not.toContain( + jasmine.objectContaining({ + level: logging.Level.SEVERE, + } as logging.Entry), + ); }); }); - -async function findShadowDomElement(shadowHostSelector: string, shadowElementSelector: string): Promise { +async function findShadowDomElement( + shadowHostSelector: string, + shadowElementSelector: string, +): Promise { const shadowHost = browser.findElement(by.css(shadowHostSelector)); const shadowRoot: any = await browser.executeScript('return arguments[0].shadowRoot', shadowHost); // Using this solution to find the shadow element after Chrome 97: https://stackoverflow.com/a/70611425. diff --git a/adev/src/content/examples/view-encapsulation/src/app/app.component.ts b/adev/src/content/examples/view-encapsulation/src/app/app.component.ts index e705bfcc694..c6e93cf4469 100644 --- a/adev/src/content/examples/view-encapsulation/src/app/app.component.ts +++ b/adev/src/content/examples/view-encapsulation/src/app/app.component.ts @@ -24,7 +24,7 @@ import {EmulatedEncapsulationComponent} from './emulated-encapsulation.component app-no-encapsulation { border: solid 2px red; } app-emulated-encapsulation { border: solid 2px green; } app-shadow-dom-encapsulation { border: solid 2px blue; } - ` + `, ], encapsulation: ViewEncapsulation.None, imports: [ diff --git a/adev/src/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts b/adev/src/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts index ba6658c94a4..6cc1ca79fcd 100644 --- a/adev/src/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts +++ b/adev/src/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts @@ -1,8 +1,6 @@ -import { browser, element, by, logging } from 'protractor'; - +import {browser, element, by, logging} from 'protractor'; describe('What is Angular', () => { - const paragraphs = element.all(by.css('p')); const buttons = element.all(by.css('button')); const templateButton = buttons.get(1); @@ -18,7 +16,7 @@ describe('What is Angular', () => { // helper function to test what's logged to the console async function logChecker(contents: string) { const logs = await browser.manage().logs().get(logging.Type.BROWSER); - const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false); + const messages = logs.filter(({message}) => (message.indexOf(contents) !== -1 ? true : false)); expect(messages.length).toBeGreaterThan(0); } @@ -57,5 +55,4 @@ describe('What is Angular', () => { await diButton.click(); await logChecker('0'); }); - }); diff --git a/adev/src/content/examples/what-is-angular/src/app/logger.service.ts b/adev/src/content/examples/what-is-angular/src/app/logger.service.ts index 57e4b7eb357..5e8fb3e5520 100644 --- a/adev/src/content/examples/what-is-angular/src/app/logger.service.ts +++ b/adev/src/content/examples/what-is-angular/src/app/logger.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; @Injectable({providedIn: 'root'}) export class Logger { diff --git a/adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.component.ts b/adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.component.ts index b852acef0d1..6d50af053c4 100644 --- a/adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.component.ts +++ b/adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.component.ts @@ -42,8 +42,8 @@ export class HomeComponent { return; } - this.filteredLocationList = this.housingLocationList.filter((housingLocation) => - housingLocation?.city.toLowerCase().includes(text.toLowerCase()), + this.filteredLocationList = this.housingLocationList.filter( + (housingLocation) => housingLocation?.city.toLowerCase().includes(text.toLowerCase()), ); } } diff --git a/adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts b/adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts index 81c362936a0..2daea40a790 100644 --- a/adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts +++ b/adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts @@ -38,8 +38,8 @@ export class HomeComponent { return; } - this.filteredLocationList = this.housingLocationList.filter((housingLocation) => - housingLocation?.city.toLowerCase().includes(text.toLowerCase()), + this.filteredLocationList = this.housingLocationList.filter( + (housingLocation) => housingLocation?.city.toLowerCase().includes(text.toLowerCase()), ); } } diff --git a/adev/src/main.ts b/adev/src/main.ts index 1776ff24f1b..2f3cf797009 100644 --- a/adev/src/main.ts +++ b/adev/src/main.ts @@ -7,7 +7,7 @@ */ // TODO(josephperrott): Figure out why this is needed now. -import "@angular/compiler"; +import '@angular/compiler'; import {bootstrapApplication} from '@angular/platform-browser'; import {appConfig} from './app/app.config';