docs: improve grammar at tutorial steps (#55414)

Fix the grammar issues at some of the tutorial pages making sure they sound correctly. PR Close #55414
2026-09-14 13:54:52 +08:00 · 2024-04-19 02:19:09 +02:00
parent 900b5e7dfd
commit bb673ff458
15 changed files with 17 additions and 17 deletions
@@ -6,7 +6,7 @@ Components are the foundational building blocks for any Angular application. Eac
 * HTML template
 * CSS styles

-In this activity you'll learn how to update the template and styles of a component.
+In this activity, you'll learn how to update the template and styles of a component.

 <hr />

@@ -4,7 +4,7 @@ Dependency injection (DI) in Angular is one of the framework's most powerful fea

 You can learn more about [dependency injection in the Angular docs](guide/di). For now, you will get practice creating `injectable` resources.

-In this activity you'll learn how to create an injectable service.
+In this activity, you'll learn how to create an injectable service.

 <hr>

@@ -2,7 +2,7 @@

 In Angular, the component's logic and behavior are defined in the component's TypeScript class.

-In this activity you'll learn how to update the component class and how to use [interpolation](guide/templates/interpolation).
+In this activity, you'll learn how to update the component class and how to use [interpolation](/guide/templates/interpolation).

 <hr />

@@ -4,7 +4,7 @@ Creating an injectable service is the first part of the dependency injection (DI

 Note: Injection contexts are beyond the scope of this tutorial, but you can find more information in the [Angular Docs](guide/di/dependency-injection-context) if you would like to learn more.

-In this activity you'll learn how to inject a service and use it in a component.
+In this activity, you'll learn how to inject a service and use it in a component.

 <hr>

@@ -4,7 +4,7 @@ In previous activities you used the `inject()` function to make resources availa

 You specify the resources as parameters to the `constructor` function of a component. Angular will make those resources available to your component.
 <br><br>
-In this activity you will learn to use constructor-based dependency injection.
+In this activity, you will learn how to use constructor-based dependency injection.

 <hr>

@@ -2,7 +2,7 @@

 Pipes are functions that are used to transform data in templates. In general, pipes are "pure" functions that don't cause side effects. Angular has a number of helpful built-in pipes you can import and use in your components. You can also create a custom pipe.

-In this activity you will import a pipe and use it in the template.
+In this activity, you will import a pipe and use it in the template.

 <hr>

@@ -2,7 +2,7 @@

 You can take your use of pipes even further by configuring them. Pipes can be configured by passing options to them.

-In this activity you will work with some pipes and pipe parameters.
+In this activity, you will work with some pipes and pipe parameters.

 <hr>

@@ -2,7 +2,7 @@

 You can create custom pipes in Angular to fit your data transformation needs.

-In this activity you will create a custom pipe and use it in your template.
+In this activity, you will create a custom pipe and use it in your template.

 <hr>

@@ -1,10 +1,10 @@
 # Composing Components

-You've learned to update the component template, component logic and components styles, but how do you use a component in your application?
+You've learned to update the component template, component logic, and component styles, but how do you use a component in your application?

-The `selector` property of the component configuration gives you a name to use when referencing the component in another template. You use the `selector` like an HTML tag, for example `app-user` would be `<app-user />` in the template
+The `selector` property of the component configuration gives you a name to use when referencing the component in another template. You use the `selector` like an HTML tag, for example `app-user` would be `<app-user />` in the template.

-In this activity you'll learn how to compose components.
+In this activity, you'll learn how to compose components.

 <hr/>

@@ -4,7 +4,7 @@ Deciding what to display on the screen for a user is a common task in applicatio

 To express conditional displays in templates, Angular uses the `@if` template syntax.

-In this activity you'll learn how to use conditionals in templates.
+In this activity, you'll learn how to use conditionals in templates.

 <hr/>

@@ -2,7 +2,7 @@

 Often when building web applications, you need to repeat some code a specific number of times - for example, given an array of names, you may want to display each name in a `<p>` tag.

-In this activity you'll learn how to use `@for` to repeat elements in a template.
+In this activity, you'll learn how to use `@for` to repeat elements in a template.
 <hr/>

 The syntax that enables repeating elements in a template is `@for`.
@@ -4,7 +4,7 @@ Property binding in Angular enables you to set values for properties of HTML ele

 Use property binding to dynamically set values for properties and attributes. You can do things such as toggle button features, set image paths programmatically, and share values between components.

-In this activity, you'll learn to use property binding in templates.
+In this activity, you'll learn how to use property binding in templates.

 <hr />

@@ -2,7 +2,7 @@

 Event handling enables interactive features on web apps. It gives you the ability as a developer to respond to user actions like button presses, form submissions and more.

-In this activity you'll learn how to add an event handler.
+In this activity, you'll learn how to add an event handler.

 <hr />

@@ -4,7 +4,7 @@ Sometimes app development requires you to send data into a component. This data

 Angular uses a concept called `Input`. This is similar to `props` in other frameworks. To create an `Input` property, use the `@Input` decorator.

-In this activity you'll learn how to use the `@Input` decorator to send information to components.
+In this activity, you'll learn how to use the `@Input` decorator to send information to components.

 <hr>

@@ -4,7 +4,7 @@ When working with components it may be required to notify other components that

 Angular uses the `@Output` decorator to enable this type of behavior.

-In this activity you'll learn how to use the `@Output` decorator and `EventEmitter` to communicate with components.
+In this activity, you'll learn how to use the `@Output` decorator and `EventEmitter` to communicate with components.

 <hr />