docs: move start tutorial alert for clarity (#42764)

The alert was placed in the middle of a set of steps, which
was causing some confusion. This has been moved to the
above the steps in the section and slightly reworded to
make it clearer.

Fixes #42752

PR Close #42764
This commit is contained in:
Pete Bacon Darwin 2021-07-04 11:23:30 +01:00 committed by Andrew Kushnir
parent b5ab7aff43
commit a524af15a5
1 changed files with 7 additions and 7 deletions

View File

@ -219,6 +219,13 @@ The Phone XL price is over $700, so the **Notify Me** button appears on that pro
To make the **Notify Me** button work, the child component needs to notify and pass the data to the parent component.
The `ProductAlertsComponent` needs to emit an event when the user clicks **Notify Me** and the `ProductListComponent` needs to respond to the event.
<div class="alert is-helpful">
In new components, the Angular Generator includes an empty `constructor()`, the `OnInit` interface, and the `ngOnInit()` method.
Since these steps don't use them, the following code examples omit them for brevity.
</div>
1. In `product-alerts.component.ts`, import `Output` and `EventEmitter` from `@angular/core`.
<code-example header="src/app/product-alerts/product-alerts.component.ts" path="getting-started/src/app/product-alerts/product-alerts.component.ts" region="imports"></code-example>
@ -228,13 +235,6 @@ The `ProductAlertsComponent` needs to emit an event when the user clicks **Notif
<code-example path="getting-started/src/app/product-alerts/product-alerts.component.ts" header="src/app/product-alerts/product-alerts.component.ts" region="input-output"></code-example>
<div class="alert is-helpful">
In new components, the Angular Generator includes an empty `constructor()`, the `OnInit` interface, and the `ngOnInit()` method.
Since these steps don't use them, the following code example omits them for brevity.
</div>
1. In `product-alerts.component.html`, update the **Notify Me** button with an event binding to call the `notify.emit()` method.
<code-example header="src/app/product-alerts/product-alerts.component.html" path="getting-started/src/app/product-alerts/product-alerts.component.html"></code-example>