Teri Glover
Dylan Hunn
parent
5fb23eccea
commit
b5f177939f
|
|
@ -13,7 +13,7 @@ See the <live-example></live-example> for a working example containing the code
|
|||
|
||||
It is recommended that you set an element property with a [property binding](guide/property-binding) whenever possible.
|
||||
However, sometimes you don't have an element property to bind.
|
||||
In those situations, you can use attribute binding.
|
||||
In those situations, use attribute binding.
|
||||
|
||||
For example, [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) and
|
||||
[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) are purely attributes.
|
||||
|
|
@ -58,7 +58,7 @@ To use attribute binding with the `<td>` attribute `colspan`:
|
|||
1. Specify the `colspan` attribute by using the following syntax: `[attr.colspan]`.
|
||||
1. Set `[attr.colspan]` equal to an expression.
|
||||
|
||||
In the following example, we bind the `colspan` attribute to the expression `1 + 1`.
|
||||
In the following example, you bind the `colspan` attribute to the expression `1 + 1`.
|
||||
|
||||
<code-example path="attribute-binding/src/app/app.component.html" region="colspan" header="src/app/app.component.html"></code-example>
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ For more information on how to bind to the `colSpan` property, see the [`colspan
|
|||
{@a class-binding}
|
||||
## Binding to the `class` attribute
|
||||
|
||||
You can use class binding to add and remove CSS class names from an element's `class` attribute.
|
||||
Use class binding to add and remove CSS class names from an element's `class` attribute.
|
||||
|
||||
### Binding to a single CSS `class`
|
||||
|
||||
|
|
@ -161,7 +161,7 @@ The following table summarizes class binding syntax.
|
|||
{@a style-binding}
|
||||
## Binding to the style attribute
|
||||
|
||||
You can use style binding to set styles dynamically.
|
||||
Use style binding to set styles dynamically.
|
||||
|
||||
### Binding to a single style
|
||||
|
||||
|
|
@ -263,7 +263,7 @@ The following table summarizes style binding syntax.
|
|||
<div class="alert is-helpful">
|
||||
|
||||
The [NgStyle](guide/built-in-directives/#ngstyle) directive can be used as an alternative to direct `[style]` bindings.
|
||||
However, using the above style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future.
|
||||
However, using the preceding style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -294,7 +294,7 @@ When there are multiple bindings to the same class name or style property, Angul
|
|||
|
||||
The more specific a class or style binding is, the higher its precedence.
|
||||
|
||||
A binding to a specific class (for example, `[class.foo]`) will take precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) will take precedence over a generic `[style]` binding.
|
||||
A binding to a specific class (for example, `[class.foo]`) takes precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) takes precedence over a generic `[style]` binding.
|
||||
|
||||
<code-example path="attribute-binding/src/app/app.component.html" region="basic-specificity" header="src/app/app.component.html"></code-example>
|
||||
|
||||
|
|
@ -311,7 +311,7 @@ Directives often augment component behavior, so host bindings from components ha
|
|||
|
||||
In addition, bindings take precedence over static attributes.
|
||||
|
||||
In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding will take precedence because it is dynamic.
|
||||
In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding takes precedence because it is dynamic.
|
||||
|
||||
<code-example path="attribute-binding/src/app/app.component.html" region="dynamic-priority" header="src/app/app.component.html"></code-example>
|
||||
|
||||
|
|
@ -319,14 +319,14 @@ In the following case, `class` and `[class]` have similar specificity, but the `
|
|||
### Delegating to styles with lower precedence
|
||||
|
||||
It is possible for higher precedence styles to "delegate" to lower precedence styles using `undefined` values.
|
||||
Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` will cause Angular to fall back to the next-highest precedence binding to that style.
|
||||
Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` causes Angular to fall back to the next-highest precedence binding to that style.
|
||||
|
||||
For example, consider the following template:
|
||||
|
||||
<code-example path="attribute-binding/src/app/app.component.html" region="style-delegation" header="src/app/app.component.html"></code-example>
|
||||
|
||||
Imagine that the `dirWithHostBinding` directive and the `comp-with-host-binding` component both have a `[style.width]` host binding.
|
||||
In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property will fall back to the value of the `comp-with-host-binding` host binding.
|
||||
In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property falls back to the value of the `comp-with-host-binding` host binding.
|
||||
However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Event binding
|
||||
|
||||
Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
|
||||
Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ The event binding listens for the button's click events and calls the component'
|
|||
|
||||
## Binding to passive events
|
||||
|
||||
Angular also supports passive event listeners. For example, you can use the following steps to make a scroll event passive.
|
||||
Angular also supports passive event listeners. For example, use the following steps to make a scroll event passive.
|
||||
|
||||
1. Create a file `zone-flags.ts` under `src` directory.
|
||||
2. Add the following line into this file.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Sharing data between child and parent directives and components
|
||||
|
||||
A common pattern in Angular is sharing data between a parent component and one or more child components.
|
||||
You can implement this pattern by using the `@Input()` and `@Output()` directives.
|
||||
To implement this pattern use the `@Input()` and `@Output()` directives.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
|
@ -21,8 +21,8 @@ Consider the following hierarchy:
|
|||
The `<parent-component>` serves as the context for the `<child-component>`.
|
||||
|
||||
`@Input()` and `@Output()` give a child component a way to communicate with its parent component.
|
||||
`@Input()` allows a parent component to update data in the child component.
|
||||
Conversely, `@Output()` allows the child to send data to a parent component.
|
||||
`@Input()` lets a parent component update data in the child component.
|
||||
Conversely, `@Output()` lets the child send data to a parent component.
|
||||
|
||||
|
||||
{@a input}
|
||||
|
|
@ -80,14 +80,14 @@ The binding source, the part to the right of the equal sign, is the data that th
|
|||
|
||||
### Watching for `@Input()` changes
|
||||
|
||||
To watch for changes on an `@Input()` property, you can use `OnChanges`, one of Angular's [lifecycle hooks](guide/lifecycle-hooks).
|
||||
To watch for changes on an `@Input()` property, use `OnChanges`, one of Angular's [lifecycle hooks](guide/lifecycle-hooks).
|
||||
See the [`OnChanges`](guide/lifecycle-hooks#onchanges) section of the [Lifecycle Hooks](guide/lifecycle-hooks) guide for more details and examples.
|
||||
|
||||
{@a output}
|
||||
|
||||
## Sending data to a parent component
|
||||
|
||||
The `@Output()` decorator in a child component or directive allows data to flow from the child to the parent.
|
||||
The `@Output()` decorator in a child component or directive lets data flow from the child to the parent.
|
||||
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/inputs-outputs/output.svg" alt="Output diagram of the data flow going from child to parent">
|
||||
|
|
@ -118,7 +118,7 @@ The following example features an `<input>` where a user can enter a value and c
|
|||
|
||||
<code-example path="inputs-outputs/src/app/item-output/item-output.component.ts" region="item-output" header="src/app/item-output/item-output.component.ts"></code-example>
|
||||
|
||||
The different parts of the above declaration are as follows:
|
||||
The different parts of the preceding declaration are as follows:
|
||||
|
||||
* `@Output()`—a decorator function marking the property as a way for data to go from the child to the parent
|
||||
* `newItemEvent`—the name of the `@Output()`
|
||||
|
|
@ -166,7 +166,7 @@ The `addItem()` method takes an argument in the form of a string and then adds t
|
|||
|
||||
The `$event` contains the data that the user types into the `<input>` in the child template UI.
|
||||
|
||||
To see the `@Output()` working, you can add the following to the parent's template:
|
||||
To see the `@Output()` working, add the following to the parent's template:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
|
|
@ -180,7 +180,7 @@ The `addItem()` method takes an argument in the form of a string and then adds t
|
|||
|
||||
## Using `@Input()` and `@Output()` together
|
||||
|
||||
You can use `@Input()` and `@Output()` on the same child component as follows:
|
||||
Use `@Input()` and `@Output()` on the same child component as follows:
|
||||
|
||||
<code-example path="inputs-outputs/src/app/app.component.html" region="together" header="src/app/app.component.html"></code-example>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Text interpolation
|
||||
|
||||
Text interpolation allows you to incorporate dynamic string values into your HTML templates.
|
||||
With interpolation, you can dynamically change what appears in an application view, such as displaying a custom greeting that includes the user's name.
|
||||
Text interpolation lets you incorporate dynamic string values into your HTML templates.
|
||||
Use interpolation to dynamically change what appears in an application view, such as displaying a custom greeting that includes the user's name.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ To illustrate how interpolation works, consider an Angular component that contai
|
|||
|
||||
<code-example path="interpolation/src/app/app.component.ts" region="customer" header="src/app/app.component.ts"></code-example>
|
||||
|
||||
You can use interpolation to display the value of this variable in the corresponding component template:
|
||||
Use interpolation to display the value of this variable in the corresponding component template:
|
||||
|
||||
<code-example path="interpolation/src/app/app.component.html" region="interpolation-example1" header="src/app/app.component.html"></code-example>
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ With interpolation, Angular performs the following tasks:
|
|||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
You can configure the interpolation delimiter with the [interpolation](api/core/Component#interpolation) option in the `@Component()` metadata.
|
||||
Configure the interpolation delimiter with the [interpolation](api/core/Component#interpolation) option in the `@Component()` metadata.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -131,7 +131,7 @@ When using template expressions, follow these best practices:
|
|||
* **Use short expressions**
|
||||
|
||||
Use property names or method calls whenever possible.
|
||||
Keep application and business logic in the component, where it is easier to develop and test.
|
||||
Keep application and business logic in the component, where it is accessible to develop and test.
|
||||
|
||||
* **Quick execution**
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Transforming Data Using Pipes
|
||||
|
||||
Use [pipes](guide/glossary#pipe "Definition of a pipe") to transform strings, currency amounts, dates, and other data for display.
|
||||
Pipes are simple functions you can use in [template expressions](/guide/glossary#template-expression "Definition of template expression") to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
|
||||
Pipes are simple functions to use in [template expressions](/guide/glossary#template-expression "Definition of template expression") to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
|
||||
For example, you would use a pipe to show a date as **April 15, 1988** rather than the raw string format.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
|
@ -27,7 +27,7 @@ The following are commonly used built-in pipes for data formatting:
|
|||
|
||||
</div>
|
||||
|
||||
You can also create pipes to encapsulate custom transformations and use your custom pipes in template expressions.
|
||||
Create pipes to encapsulate custom transformations and use your custom pipes in template expressions.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
|
@ -64,12 +64,12 @@ The component's `birthday` value flows through the pipe operator, `|` to the [`d
|
|||
## Transforming data with parameters and chained pipes
|
||||
|
||||
Use optional parameters to fine-tune a pipe's output.
|
||||
For example, you can use the [`CurrencyPipe`](api/common/CurrencyPipe "API reference") with a country code such as EUR as a parameter.
|
||||
For example, use the [`CurrencyPipe`](api/common/CurrencyPipe "API reference") with a country code such as EUR as a parameter.
|
||||
The template expression `{{ amount | currency:'EUR' }}` transforms the `amount` to currency in euros.
|
||||
Follow the pipe name (`currency`) with a colon (`:`) and the parameter value (`'EUR'`).
|
||||
|
||||
If the pipe accepts multiple parameters, separate the values with colons.
|
||||
For example, `{{ amount | currency:'EUR':'Euros '}}` adds the second parameter, the string literal `'Euros '`, to the output string. You can use any valid template expression as a parameter, such as a string literal or a component property.
|
||||
For example, `{{ amount | currency:'EUR':'Euros '}}` adds the second parameter, the string literal `'Euros '`, to the output string. Use any valid template expression as a parameter, such as a string literal or a component property.
|
||||
|
||||
Some pipes require at least one parameter and allow more optional parameters, such as [`SlicePipe`](/api/common/SlicePipe "API reference for SlicePipe"). For example, `{{ slice:1:5 }}` creates a new array or string containing a subset of the elements starting with element `1` and ending with element `5`.
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ For `date` pipe format options, see [DatePipe](api/common/DatePipe "DatePipe API
|
|||
|
||||
### Example: Applying two formats by chaining pipes
|
||||
|
||||
You can chain pipes so that the output of one pipe becomes the input to the next.
|
||||
Chain pipes so that the output of one pipe becomes the input to the next.
|
||||
|
||||
In the following example, chained pipes first apply a format to a date value, then convert the formatted date to uppercase characters.
|
||||
The first tab for the `src/app/app.component.html` template chains `DatePipe` and `UpperCasePipe` to display the birthday as **APR 15, 1988**.
|
||||
|
|
@ -134,7 +134,7 @@ The second tab for the `src/app/app.component.html` template passes the `fullDat
|
|||
## Creating pipes for custom data transformations
|
||||
|
||||
Create custom pipes to encapsulate transformations that are not provided with the built-in pipes.
|
||||
You can then use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display.
|
||||
Then, use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display.
|
||||
|
||||
### Marking a class as a pipe
|
||||
|
||||
|
|
@ -160,9 +160,9 @@ Angular invokes the `transform` method with the value of a binding as the first
|
|||
|
||||
### Example: Transforming a value exponentially
|
||||
|
||||
In a game, you may want to implement a transformation that raises a value exponentially to increase a hero's power.
|
||||
In a game, you might want to implement a transformation that raises a value exponentially to increase a hero's power.
|
||||
For example, if the hero's score is 2, boosting the hero's power exponentially by 10 produces a score of 1024.
|
||||
You can use a custom pipe for this transformation.
|
||||
Use a custom pipe for this transformation.
|
||||
|
||||
The following code example shows two component definitions:
|
||||
|
||||
|
|
@ -261,7 +261,7 @@ In other words, given the same input, a pure function should always return the s
|
|||
With a pure pipe, Angular ignores changes within composite objects, such as a newly added element of an existing array, because checking a primitive value or object reference is much faster than performing a deep check for differences within objects.
|
||||
Angular can quickly determine if it can skip executing the pipe and updating the view.
|
||||
|
||||
However, a pure pipe with an array as input may not work the way you want.
|
||||
However, a pure pipe with an array as input might not work the way you want.
|
||||
To demonstrate this issue, change the previous example to filter the list of heroes to just those heroes who can fly.
|
||||
Use the `FlyingHeroesPipe` in the `*ngFor` repeater as shown in the following code.
|
||||
The tabs for the example show the following:
|
||||
|
|
@ -290,16 +290,16 @@ This happens because the code that adds a hero does so by pushing it onto the `h
|
|||
The change detector ignores changes to elements of an array, so the pipe doesn't run.
|
||||
|
||||
The reason Angular ignores the changed array element is that the *reference* to the array hasn't changed.
|
||||
Since the array is the same, Angular does not update the display.
|
||||
Because the array is the same, Angular does not update the display.
|
||||
|
||||
One way to get the behavior you want is to change the object reference itself.
|
||||
You can replace the array with a new array containing the newly changed elements, and then input the new array to the pipe.
|
||||
In the above example, you can create an array with the new hero appended, and assign that to `heroes`. Angular detects the change in the array reference and executes the pipe.
|
||||
Replace the array with a new array containing the newly changed elements, and then input the new array to the pipe.
|
||||
In the preceding example, create an array with the new hero appended, and assign that to `heroes`. Angular detects the change in the array reference and executes the pipe.
|
||||
|
||||
To summarize, if you mutate the input array, the pure pipe doesn't execute.
|
||||
If you *replace* the input array, the pipe executes and the display is updated.
|
||||
|
||||
The above example demonstrates changing a component's code to accommodate a pipe.
|
||||
The preceding example demonstrates changing a component's code to accommodate a pipe.
|
||||
|
||||
To keep your component independent of HTML templates that use pipes, you can, as an alternative, use an *impure* pipe to detect changes within composite objects such as arrays, as described in the next section.
|
||||
|
||||
|
|
@ -341,7 +341,7 @@ The example shows that you don't have to change anything else—the only differe
|
|||
<code-example path="pipes/src/app/flying-heroes.pipe.ts" header="src/app/flying-heroes.pipe.ts (filter)" region="filter"></code-example>
|
||||
|
||||
You can derive a `FlyingHeroesImpureComponent` from `FlyingHeroesComponent`.
|
||||
As shown in the code below, only the pipe in the template changes.
|
||||
As shown in the following code, only the pipe in the template changes.
|
||||
|
||||
<code-example path="pipes/src/app/flying-heroes-impure.component.html" header="src/app/flying-heroes-impure.component.html (excerpt)" region="template-flying-heroes"></code-example>
|
||||
|
||||
|
|
@ -382,7 +382,7 @@ The following code example binds an observable of message strings
|
|||
To [communicate with backend services using HTTP](/guide/http "Communicating with backend services using HTTP"), the `HttpClient` service uses observables and offers the `HttpClient.get()` method to fetch data from a server.
|
||||
The asynchronous method sends an HTTP request, and returns an observable that emits the requested data for the response.
|
||||
|
||||
As shown in the previous section, you can use the impure `AsyncPipe` to accept an observable as input and subscribe to the input automatically.
|
||||
As shown in the previous section, use the impure `AsyncPipe` to accept an observable as input and subscribe to the input automatically.
|
||||
You can also create an impure pipe to make and cache an HTTP request.
|
||||
|
||||
Impure pipes are called whenever change detection runs for a component, which could be as often as every few milliseconds.
|
||||
|
|
@ -403,7 +403,7 @@ The tabs show the following:
|
|||
</code-pane>
|
||||
</code-tabs>
|
||||
|
||||
In the above example, a breakpoint on the pipe's request for data shows the following:
|
||||
In the preceding example, a breakpoint on the pipe's request for data shows the following:
|
||||
|
||||
* Each binding gets its own pipe instance.
|
||||
* Each pipe instance caches its own URL and data and calls the server only once.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
# Property binding
|
||||
|
||||
Property binding in Angular helps you set values for properties of HTML elements or directives.
|
||||
With property binding, you can do things such as toggle button functionality, set paths programmatically, and share values between components.
|
||||
Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ You'd get this error:
|
|||
|
||||
<code-example language="bash">
|
||||
Template parse errors:
|
||||
Can't bind to 'colspan' since it isn't a known native property
|
||||
Can't bind to 'colspan' because it isn't a known built-in property
|
||||
</code-example>
|
||||
|
||||
As the message says, the `<td>` element does not have a `colspan` property. This is true
|
||||
|
|
@ -191,7 +191,7 @@ The following binding pairs do the same thing.
|
|||
|
||||
<code-example path="property-binding/src/app/app.component.html" region="property-binding-interpolation" header="src/app/app.component.html"></code-example>
|
||||
|
||||
You can use either form when rendering data values as strings, though interpolation is preferable for readability.
|
||||
Use either form when rendering data values as strings, though interpolation is preferable for readability.
|
||||
However, when setting an element property to a non-string data value, you must use property binding.
|
||||
|
||||
## What's next
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# SVG as templates
|
||||
|
||||
You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. With these features, you can dynamically generate interactive graphics.
|
||||
You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. Use these features to dynamically generate interactive graphics.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Template variables
|
||||
|
||||
Template variables help you use data from one part of a template in another part of the template.
|
||||
With template variables, you can perform tasks such as respond to user input or finely tune your application's forms.
|
||||
Use template variables to perform tasks such as respond to user input or finely tune your application's forms.
|
||||
|
||||
A template variable can refer to the following:
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ The following template variable, `#phone`, declares a `phone` variable on an `<i
|
|||
|
||||
<code-example path="template-reference-variables/src/app/app.component.html" region="ref-var" header="src/app/app.component.html"></code-example>
|
||||
|
||||
You can refer to a template variable anywhere in the component's template.
|
||||
Refer to a template variable anywhere in the component's template.
|
||||
Here, a `<button>` further down the template refers to the `phone` variable.
|
||||
|
||||
<code-example path="template-reference-variables/src/app/app.component.html" region="ref-phone" header="src/app/app.component.html"></code-example>
|
||||
|
|
@ -59,12 +59,12 @@ There is, however, a difference between a `Component` and a `Directive` in that
|
|||
With `NgForm`, `itemForm` is a reference to the [NgForm](api/forms/NgForm "API: NgForm") directive with the ability to track the value and validity of every control in the form.
|
||||
|
||||
Unlike the native `<form>` element, the `NgForm` directive has a `form` property.
|
||||
The `NgForm` `form` property allows you to disable the submit button if the `itemForm.form.valid` is invalid.
|
||||
The `NgForm` `form` property lets you disable the submit button if the `itemForm.form.valid` is invalid.
|
||||
|
||||
|
||||
## Template variable scope
|
||||
|
||||
You can refer to a template variable anywhere within its surrounding template.
|
||||
Refer to a template variable anywhere within its surrounding template.
|
||||
[Structural directives](guide/built-in-directives), such as `*ngIf` and `*ngFor`, or `<ng-template>` act as a template boundary.
|
||||
You cannot access template variables outside of these boundaries.
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ In the following example, changing the text in the `<input>` changes the value i
|
|||
In this case, there is an implied `<ng-template>` around the `<span>` and the definition of the variable is outside of it.
|
||||
Accessing a template variable from the parent template works because the child template inherits the context from the parent template.
|
||||
|
||||
Rewriting the above code in a more verbose form explicitly shows the `<ng-template>`.
|
||||
Rewriting the preceding code in a more verbose form explicitly shows the `<ng-template>`.
|
||||
|
||||
```html
|
||||
|
||||
|
|
@ -93,7 +93,7 @@ Rewriting the above code in a more verbose form explicitly shows the `<ng-templa
|
|||
|
||||
<!-- New template -->
|
||||
<ng-template [ngIf]="true">
|
||||
<!-- Since the context is inherited, the value is available to the new template -->
|
||||
<!-- Because the context is inherited, the value is available to the new template -->
|
||||
<span>Value: {{ ref1.value }}</span>
|
||||
</ng-template>
|
||||
|
||||
|
|
@ -157,13 +157,13 @@ __proto__: Function
|
|||
{@a template-input-variables}
|
||||
## Template input variable
|
||||
|
||||
A _template input variable_ is a variable you can reference within a single instance of the template.
|
||||
A _template input variable_ is a variable to reference within a single instance of the template.
|
||||
You declare a template input variable using the `let` keyword as in `let hero`.
|
||||
|
||||
There are several such variables in this example: `hero`, `i`, and `odd`.
|
||||
|
||||
The variable's scope is limited to a single instance of the repeated template.
|
||||
You can use the same variable name again in the definition of other structural directives.
|
||||
Use the same variable name again in the definition of other structural directives.
|
||||
|
||||
In contrast, you declare a template variable by prefixing the variable name with `#`, as in `#var`.
|
||||
A template variable refers to its attached element, component, or directive.
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ In the following example, the template statement `deleteHero()` appears in quote
|
|||
|
||||
When the user clicks the **Delete hero** button, Angular calls the `deleteHero()` method in the component class.
|
||||
|
||||
You can use template statements with elements, components, or directives in response to events.
|
||||
Use template statements with elements, components, or directives in response to events.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ In the preceding `deleteHero(hero)`, the `hero` is the template input variable,
|
|||
|
||||
* **Conciseness**
|
||||
|
||||
Keep template statements minimal by using method calls or basic property assignments.
|
||||
Use method calls or basic property assignments to keep template statements minimal.
|
||||
|
||||
* **Work within the context**
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Template syntax
|
||||
|
||||
In Angular, a *template* is a chunk of HTML.
|
||||
Within a template, you can use special syntax to leverage many of Angular's features.
|
||||
Use special syntax within a template to build on many of Angular's features.
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
|
@ -20,12 +20,12 @@ In Angular, the component plays the part of the controller/viewmodel, and the te
|
|||
|
||||
<hr />
|
||||
|
||||
Each Angular template in your application is a section of HTML that you can include as a part of the page that the browser displays.
|
||||
Each Angular template in your application is a section of HTML to include as a part of the page that the browser displays.
|
||||
An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.
|
||||
|
||||
When you generate an Angular application with the Angular CLI, the `app.component.html` file is the default template containing placeholder HTML.
|
||||
|
||||
The template syntax guides show you how you can control the UX/UI by coordinating data between the class and the template.
|
||||
The template syntax guides show you how to control the UX/UI by coordinating data between the class and the template.
|
||||
|
||||
<div class="is-helpful alert">
|
||||
|
||||
|
|
@ -37,12 +37,11 @@ To see all of them working together in one application, see the comprehensive <l
|
|||
|
||||
## Empower your HTML
|
||||
|
||||
With special Angular syntax in your templates, you can extend the HTML vocabulary of your applications.
|
||||
Extend the HTML vocabulary of your applications With special Angular syntax in your templates.
|
||||
For example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding.
|
||||
|
||||
Almost all HTML syntax is valid template syntax.
|
||||
However, because an Angular template is part of an overall webpage, and not the entire page, you don't need to include elements such as `<html>`, `<body>`, or `<base>`.
|
||||
You can focus exclusively on the part of the page you are developing.
|
||||
However, because an Angular template is part of an overall webpage, and not the entire page, you don't need to include elements such as `<html>`, `<body>`, or `<base>`, and can focus exclusively on the part of the page you are developing.
|
||||
|
||||
|
||||
<div class="alert is-important">
|
||||
|
|
@ -56,7 +55,7 @@ For more information, see the [Security](guide/security) page.
|
|||
|
||||
## More on template syntax
|
||||
|
||||
You may also be interested in the following:
|
||||
You might also be interested in the following:
|
||||
|
||||
* [Interpolation](guide/interpolation)—learn how to use interpolation and expressions in HTML.
|
||||
* [Template statements](guide/template-statements)—respond to events in your templates.
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ For example, if the `@Input()` property is `size`, the `@Output()` property must
|
|||
|
||||
The following `sizerComponent` has a `size` value property and a `sizeChange` event.
|
||||
The `size` property is an `@Input()`, so data can flow into the `sizerComponent`.
|
||||
The `sizeChange` event is an `@Output()`, which allows data to flow out of the `sizerComponent` to the parent component.
|
||||
The `sizeChange` event is an `@Output()`, which lets data flow out of the `sizerComponent` to the parent component.
|
||||
|
||||
Next, there are two methods, `dec()` to decrease the font size and `inc()` to increase the font size.
|
||||
These two methods use `resize()` to change the value of the `size` property within min/max value constraints, and to emit an event that conveys the new `size` value.
|
||||
|
|
@ -75,7 +75,7 @@ Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the use
|
|||
|
||||
<header>Two-way binding in forms</header>
|
||||
|
||||
Because no native HTML element follows the `x` value and `xChange` event pattern, two-way binding with form elements requires `NgModel`.
|
||||
Because no built-in HTML element follows the `x` value and `xChange` event pattern, two-way binding with form elements requires `NgModel`.
|
||||
For more information on how to use two-way binding in forms, see Angular [NgModel](guide/built-in-directives#ngModel).
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue