docs: getting started guide use pipe before introduction

[ajitsinghkaler]

in getting started guide pipes are not intoduced anywhere but are used in guide added refrence to pipes for better consistency in the tutorial

Fixes #36375

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

What is the current behavior?

Pipes used before it were referenced

Issue Number: #36375

What is the new behavior?

Pipes referenced on the first tutorial when they are used

Does this PR introduce a breaking change?

• Yes
• No

Other information

[mary-poppins]

You can preview 18d35ef at https://pr36584-18d35ef.ngbuilds.io/.

[mary-poppins]

You can preview 18d35ef at https://pr36584-18d35ef.ngbuilds.io/.

[gkalpak]

Thx, @ajitsinghkaler!

Please use proper sentences in the commit message to make it more readable (i.e. use capitalization, punctuation, etc.):

In "Getting started" guide pipes are not intoduced anywhere but are used in the guide.
Added refrence to pipes for better consistency in the tutorial.

[gkalpak]

product.price --> `product.price`

Also, the sentence now makes it sound as if | is called a pipe (which it's not). We should re-phrase to make it clear that | is the "pipe operator" and currency is the pipe (which is not a great name, but that's what we gone with 🤷‍♂️).

[aikithoughts]

Thanks for this change! Here's a suggestion that I think might help. It puts more focus on the currency pipe than the operator, and provides a brief description of what a pipe is for.

Suggested change

	The operator `|` used for currency on product.price is called a pipe. For more information about Angular pipes, see [Pipes](guide/pipes "Pipes").
	The line, `<h4>{{ product.price | currency }}</h4>` uses the `currency` pipe to transform `product.price` from number to a currency string. A pipe is a way you can transform data in your HTML template. For more information about Angular pipes, see [Pipes](guide/pipes "Pipes").

[aikithoughts]

Thanks for pointing this out! I offered a suggestion. Let me know what you think.

[aikithoughts]

Thanks for this change! Here's a suggestion that I think might help. It puts more focus on the currency pipe than the operator, and provides a brief description of what a pipe is for.

Suggested change

	The operator `|` used for currency on product.price is called a pipe. For more information about Angular pipes, see [Pipes](guide/pipes "Pipes").
	The line, `<h4>{{ product.price | currency }}</h4>` uses the `currency` pipe to transform `product.price` from number to a currency string. A pipe is a way you can transform data in your HTML template. For more information about Angular pipes, see [Pipes](guide/pipes "Pipes").

[ajitsinghkaler]

@aikidave @gkalpak made the changes please have a look

[mary-poppins]

You can preview c8252e9 at https://pr36584-c8252e9.ngbuilds.io/.

[mary-poppins]

You can preview e678339 at https://pr36584-e678339.ngbuilds.io/.

[ajitsinghkaler]

@aikidave @gkalpak made the change please have a look

[ajitsinghkaler]

@aikidave can you please add the merge label

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}