@@ -69,9 +69,9 @@ In JavaScript each *file* is a module and all objects defined in the file belong
The module declares some objects to be public by marking them with the `export` key word.
Other JavaScript modules use *import statements* to access public objects from other modules.
-
Learn more about the JavaScript module system on the web.
@@ -87,17 +87,17 @@ Angular loads as a collection of JavaScript modules. You can think of them as li
For example, import Angular's `Component` decorator from the `@angular/core` library like this.
-
+
You also import NgModules from Angular *libraries* using JavaScript import statements.
For example, the following code imports the `BrowserModule` NgModule from the `platform-browser` library.
-
+
In the example of the simple root module above, the application module needs material from within
`BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this.
-
+
In this way you're using the Angular and JavaScript module systems *together*. Although it's easy to confuse the two systems, which share the common vocabulary of "imports" and "exports", you will become familiar with the different contexts in which they are used.
diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md
index ebf44c1a17..27aaa1afe6 100644
--- a/aio/content/guide/architecture-services.md
+++ b/aio/content/guide/architecture-services.md
@@ -1,7 +1,7 @@
# Introduction to services and dependency injection
*Service* is a broad category encompassing any value, function, or feature that an app needs.
-A service is typically a class with a narrow, well-defined purpose.
+A service is typically a class with a narrow, well-defined purpose.
It should do something specific and do it well.
Angular distinguishes components from services to increase modularity and reusability.
@@ -14,9 +14,9 @@ in order to mediate between the view (rendered by the template)
and the application logic (which often includes some notion of a *model*).
A component can delegate certain tasks to services, such as fetching data from the server,
-validating user input, or logging directly to the console.
+validating user input, or logging directly to the console.
By defining such processing tasks in an *injectable service class*, you make those tasks
-available to any component.
+available to any component.
You can also make your app more adaptable by injecting different providers of the same kind of service,
as appropriate in different circumstances.
@@ -28,21 +28,21 @@ available to components through *dependency injection*.
Here's an example of a service class that logs to the browser console.
-
+
Services can depend on other services. For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server.
-
+
## Dependency injection (DI)
DI is wired into the Angular framework and used everywhere to provide new components with the services or other things they need.
-Components consume services; that is, you can *inject* a service into a component, giving the component access to that service class.
+Components consume services; that is, you can *inject* a service into a component, giving the component access to that service class.
-To define a class as a service in Angular, use the `@Injectable()` decorator to provide the metadata that allows Angular to inject it into a component as a *dependency*.
-Similarly, use the `@Injectable()` decorator to indicate that a component or other class (such as another service, a pipe, or an NgModule) *has* a dependency.
+To define a class as a service in Angular, use the `@Injectable()` decorator to provide the metadata that allows Angular to inject it into a component as a *dependency*.
+Similarly, use the `@Injectable()` decorator to indicate that a component or other class (such as another service, a pipe, or an NgModule) *has* a dependency.
* The *injector* is the main mechanism. Angular creates an application-wide injector for you during the bootstrap process, and additional injectors as needed. You don't have to create injectors.
@@ -50,19 +50,19 @@ Similarly, use the `@Injectable()` decorator to indicate that a component or oth
* A *provider* is an object that tells an injector how to obtain or create a dependency.
-For any dependency that you need in your app, you must register a provider with the app's injector,
-so that the injector can use the provider to create new instances.
+For any dependency that you need in your app, you must register a provider with the app's injector,
+so that the injector can use the provider to create new instances.
For a service, the provider is typically the service class itself.
-A dependency doesn't have to be a service—it could be a function, for example, or a value.
+A dependency doesn't have to be a service—it could be a function, for example, or a value.
When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types. For example, the constructor of `HeroListComponent` needs `HeroService`.
-
+
When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn't yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular.
@@ -78,26 +78,26 @@ The process of `HeroService` injection looks something like this.
You must register at least one *provider* of any service you are going to use.
The provider can be part of the service's own metadata, making that service available everywhere,
-or you can register providers with specific modules or components.
+or you can register providers with specific modules or components.
You register providers in the metadata of the service (in the `@Injectable()` decorator),
-or in the `@NgModule()` or `@Component()` metadata
+or in the `@NgModule()` or `@Component()` metadata
* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of HeroService class definition.
- ```
+ ```
@Injectable({
providedIn: 'root',
})
- ```
+ ```
When you provide the service at the root level, Angular creates a single, shared instance of `HeroService`
- and injects it into any class that asks for it.
+ and injects it into any class that asks for it.
Registering the provider in the `@Injectable()` metadata also allows Angular to optimize an app
- by removing the service from the compiled app if it isn't used.
+ by removing the service from the compiled app if it isn't used.
* When you register a provider with a [specific NgModule](guide/architecture-modules), the same instance of a service is available to all components in that NgModule. To register at this level, use the `providers` property of the `@NgModule()` decorator,
- ```
+ ```
@NgModule({
providers: [
BackendService,
@@ -105,12 +105,12 @@ or in the `@NgModule()` or `@Component()` metadata
],
...
})
- ```
+ ```
* When you register a provider at the component level, you get a new instance of the
-service with each new instance of that component.
+service with each new instance of that component.
At the component level, register a service provider in the `providers` property of the `@Component()` metadata.
-
+
For more detailed information, see the [Dependency Injection](guide/dependency-injection) section.
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index 3cfcfada88..51168afcda 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -37,13 +37,13 @@ This page demonstrates building a simple _appHighlight_ attribute
directive to set an element's background color
when the user hovers over that element. You can apply it like this:
-
+
{@a write-directive}
Please note that directives _do not_ support namespaces.
-
+
### Write the directive code
@@ -101,7 +101,7 @@ Now edit the generated `src/app/highlight.directive.ts` to look as follows:
The `import` statement specifies an additional `ElementRef` symbol from the Angular `core` library:
You use the `ElementRef` in the directive's constructor
-to [inject](guide/dependency-injection) a reference to the host DOM element,
+to [inject](guide/dependency-injection) a reference to the host DOM element,
the element to which you applied `appHighlight`.
`ElementRef` grants direct access to the host DOM element
@@ -140,12 +140,12 @@ and respond by setting or clearing the highlight color.
Begin by adding `HostListener` to the list of imported symbols.
-
+
Then add two eventhandlers that respond when the mouse enters or leaves,
each adorned by the `HostListener` decorator.
-
+
The `@HostListener` decorator lets you subscribe to events of the DOM
element that hosts an attribute directive, the `
` in this case.
@@ -166,7 +166,7 @@ The handlers delegate to a helper method that sets the color on the host DOM ele
The helper method, `highlight`, was extracted from the constructor.
The revised constructor simply declares the injected `el: ElementRef`.
-
+
Here's the updated directive in full:
@@ -187,11 +187,11 @@ Currently the highlight color is hard-coded _within_ the directive. That's infle
In this section, you give the developer the power to set the highlight color while applying the directive.
Begin by adding `Input` to the list of symbols imported from `@angular/core`.
-
+
Add a `highlightColor` property to the directive class like this:
-
+
{@a input}
@@ -204,19 +204,19 @@ Without that input metadata, Angular rejects the binding; see [below](guide/attr
Try it by adding the following directive binding variations to the `AppComponent` template:
-
+
Add a `color` property to the `AppComponent`.
-
+
Let it control the highlight color with a property binding.
-
+
That's good, but it would be nice to _simultaneously_ apply the directive and set the color _in the same attribute_ like this.
-
+
The `[appHighlight]` attribute binding both applies the highlighting directive to the `
` element
and sets the directive's highlight color with a property binding.
@@ -225,7 +225,7 @@ That's a crisp, compact syntax.
You'll have to rename the directive's `highlightColor` property to `appHighlight` because that's now the color property binding name.
-
+
This is disagreeable. The word, `appHighlight`, is a terrible property name and it doesn't convey the property's intent.
@@ -237,23 +237,23 @@ Fortunately you can name the directive property whatever you want _and_ **_alias
Restore the original property name and specify the selector as the alias in the argument to `@Input`.
-
+
_Inside_ the directive the property is known as `highlightColor`.
_Outside_ the directive, where you bind to it, it's known as `appHighlight`.
You get the best of both worlds: the property name you want and the binding syntax you want:
-
+
Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property.
If someone neglects to bind to `appHighlightColor`, highlight the host element in red:
-
+
Here's the latest version of the directive class.
-
+
## Write a harness to try it
@@ -263,11 +263,11 @@ lets you pick the highlight color with a radio button and bind your color choice
Update app.component.html as follows:
-
+
Revise the `AppComponent.color` so that it has no initial value.
-
+
Here are the harness and directive in action.
@@ -287,12 +287,12 @@ Let the template developer set the default color.
Add a second **input** property to `HighlightDirective` called `defaultColor`:
-
+
Revise the directive's `onMouseEnter` so that it first tries to highlight with the `highlightColor`,
then with the `defaultColor`, and falls back to "red" if both properties are undefined.
-
+
How do you bind to a second property when you're already binding to the `appHighlight` attribute name?
@@ -300,7 +300,7 @@ As with components, you can add as many directive property bindings as you need
The developer should be able to write the following template HTML to both bind to the `AppComponent.color`
and fall back to "violet" as the default color.
-
+
Angular knows that the `defaultColor` binding belongs to the `HighlightDirective`
because you made it _public_ with the `@Input` decorator.
@@ -342,11 +342,11 @@ You can also experience and download the
+
You've seen it with an alias:
-
+
Either way, the `@Input` decorator tells Angular that this property is
_public_ and available for binding by a parent component.
@@ -378,7 +378,7 @@ You can tell if `@Input` is needed by the position of the property name in a bin
Now apply that reasoning to the following example:
-
+
* The `color` property in the expression on the right belongs to the template's component.
The template and its component trust each other.
diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md
index 70c590f662..7dc9b0adc6 100644
--- a/aio/content/guide/bootstrapping.md
+++ b/aio/content/guide/bootstrapping.md
@@ -106,19 +106,16 @@ To use a directive, component, or pipe in a module, you must do a few things:
Those three steps look like the following. In the file where you create your directive, export it.
The following example, named `ItemDirective` is the default directive structure that the CLI generates in its own file, `item.directive.ts`:
-
-
+
The key point here is that you have to export it so you can import it elsewhere. Next, import it
into the NgModule, in this example `app.module.ts`, with a JavaScript import statement:
-
-
+
And in the same file, add it to the `@NgModule` `declarations` array:
-
-
+
Now you could use your `ItemDirective` in a component. This example uses `AppModule`, but you'd do it the same way for a feature module. For more about directives, see [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives). You'd also use the same technique for [pipes](guide/pipes) and components.
diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md
index a9f355ae4a..3f6d15c901 100644
--- a/aio/content/guide/browser-support.md
+++ b/aio/content/guide/browser-support.md
@@ -527,7 +527,7 @@ If you are not using the CLI, add your polyfill scripts directly to the host web
For example:
-
+
<!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
diff --git a/aio/content/guide/cli-builder.md b/aio/content/guide/cli-builder.md
index d78cfa4720..f7f18e3b3c 100644
--- a/aio/content/guide/cli-builder.md
+++ b/aio/content/guide/cli-builder.md
@@ -191,7 +191,7 @@ For our example builder, we expect the `options` value to be a `JsonObject` with
We can provide the following schema for type validation of these values.
-
+
{
"$schema": "http://json-schema.org/schema",
@@ -222,7 +222,7 @@ To link our builder implementation with its schema and name, we need to create a
Create a file named `builders.json` file that looks like this.
-
+
{
"builders": {
@@ -238,7 +238,7 @@ Create a file named `builders.json` file that looks like this.
In the `package.json` file, add a `builders` key that tells the Architect tool where to find our builder definition file.
-
+
{
"name": "@example/command-runner",
@@ -257,7 +257,7 @@ The first part of this is the package name (resolved using node resolution), an
Using one of our `options` is very straightforward, we did this in the previous section when we accessed `options.command`.
-
+
context.reportStatus(`Executing "${options.command}"...`);
const child = childProcess.spawn(options.command, options.args, { stdio: 'pipe' });
@@ -274,7 +274,7 @@ The Architect tool uses the target definition to resolve input options for a giv
The `angular.json` file has a section for each project, and the "architect" section of each project configures targets for builders used by CLI commands such as 'build', 'test', and 'lint'.
By default, for example, the `build` command runs the builder `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in `angular.json`.
-
+
{
"myApp": {
...
@@ -361,7 +361,7 @@ npm install @example/command-runner
If we create a new project with `ng new builder-test`, the generated `angular.json` file looks something like this, with only default builder configurations.
-
+
{
// ...
@@ -413,7 +413,7 @@ We need to update the `angular.json` file to add a target for this builder to th
* The configurations key is optional, we'll leave it out for now.
-
+
{
"projects": {
@@ -495,7 +495,7 @@ Use integration testing for your builder, so that you can use the Architect sche
Here’s an example of a test that runs the command builder.
The test uses the builder to run the `ls` command, then validates that it ran successfully and listed the proper files.
-
+
import { Architect, ArchitectHost } from '@angular-devkit/architect';
import { TestingArchitectHost } from '@angular-devkit/architect/testing';
@@ -592,4 +592,4 @@ The CLI Builder API provides a new way of changing the behavior of the Angular C
* We recommend that you use integration tests to test Architect builders. You can use unit tests to validate the logic that the builder executes.
-* If your builder returns an Observable, it should clean up in the teardown logic of that Observable.
\ No newline at end of file
+* If your builder returns an Observable, it should clean up in the teardown logic of that Observable.
diff --git a/aio/content/guide/complex-animation-sequences.md b/aio/content/guide/complex-animation-sequences.md
index 5d6e5cdf1d..ed052f34ec 100644
--- a/aio/content/guide/complex-animation-sequences.md
+++ b/aio/content/guide/complex-animation-sequences.md
@@ -38,7 +38,7 @@ The following example demonstrates how to use `query()` and `stagger()` function
* Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it.
-
+
## Parallel animation using group() function
@@ -51,7 +51,7 @@ You've seen how to add a delay between each successive animation. But you may al
In the following example, using groups on both `:enter` and `:leave` allow for two different timing configurations. They're applied to the same element in parallel, but run independently.
-
+
## Sequential vs. parallel animations
@@ -74,7 +74,7 @@ The HTML template contains a trigger called `filterAnimation`.
The component file contains three transitions.
-
+
The animation does the following:
@@ -101,4 +101,4 @@ You may also be interested in the following:
* [Introduction to Angular animations](guide/animations)
* [Transition and triggers](guide/transition-and-triggers)
* [Reusable animations](guide/reusable-animations)
-* [Route transition animations](guide/route-animations)
\ No newline at end of file
+* [Route transition animations](guide/route-animations)
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index ab5704bb33..a139549eab 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -21,8 +21,7 @@ One way to do this is to set the `styles` property in the component metadata.
The `styles` property takes an array of strings that contain CSS code.
Usually you give it one string, as in the following example:
-
-
+
## Style scope
@@ -71,8 +70,7 @@ Use the `:host` pseudo-class selector to target styles in the element that *host
targeting elements *inside* the component's template).
-
-
+
The `:host` selector is the only way to target the host element. You can't reach
the host element from inside the component with other selectors because it's not part of the
@@ -83,8 +81,7 @@ including another selector inside parentheses after `:host`.
The next example targets the host element again, but only when it also has the `active` CSS class.
-
-
+
### :host-context
@@ -99,8 +96,7 @@ up to the document root. The `:host-context()` selector is useful when combined
The following example applies a `background-color` style to all `` elements *inside* the component, only
if some ancestor element has the CSS class `theme-light`.
-
-
+
### (deprecated) `/deep/`, `>>>`, and `::ng-deep`
@@ -115,9 +111,7 @@ can bleed into other components.
The following example targets all `` elements, from the host element down
through this component to all of its child elements in the DOM.
-
-
-
+
The `/deep/` combinator also has the aliases `>>>`, and `::ng-deep`.
@@ -304,8 +298,7 @@ Choose from the following modes:
To set the components encapsulation mode, use the `encapsulation` property in the component metadata:
-
-
+
`ShadowDom` view encapsulation only works on browsers that have native support
for shadow DOM (see [Shadow DOM v1](https://caniuse.com/#feat=shadowdomv1) on the
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md
index e9d91d8a3c..e8fd63fcfe 100644
--- a/aio/content/guide/dependency-injection-in-action.md
+++ b/aio/content/guide/dependency-injection-in-action.md
@@ -21,18 +21,14 @@ constructor, and lets the framework provide them.
The following example shows that `AppComponent` declares its dependence on `LoggerService` and `UserContext`.
-
-
-
+
`UserContext` in turn depends on both `LoggerService` and
`UserService`, another service that gathers information about a particular user.
-
-
-
+
When Angular creates `AppComponent`, the DI framework creates an instance of `LoggerService` and starts to create `UserContextService`.
@@ -185,17 +181,13 @@ This `HeroBiosAndContactsComponent` is a revision of `HeroBiosComponent` which y
Focus on the template:
-
-
-
+
Now there's a new `` element between the `` tags.
Angular *projects*, or *transcludes*, the corresponding `HeroContactComponent` into the `HeroBioComponent` view,
placing it in the `` slot of the `HeroBioComponent` template.
-
-
-
+
The result is shown below, with the hero's telephone number from `HeroContactComponent` projected above the hero description.
@@ -212,9 +204,7 @@ Here's `HeroContactComponent`, which demonstrates the qualifying decorators.
Focus on the constructor parameters.
-
-
-
+
The `@Host()` function decorating the `heroCache` constructor property ensures that
you get a reference to the cache service from the parent `HeroBioComponent`.
@@ -299,9 +289,7 @@ whose `nativeElement` property exposes the DOM element for the directive to mani
The sample code applies the directive's `myHighlight` attribute to two `` tags,
first without a value (yielding the default color) and then with an assigned color value.
-
-
-
+
The following image shows the effect of mousing over the `` tag.
@@ -325,9 +313,7 @@ Angular passes this token to the injector and assigns the result to the paramete
The following is a typical example.
-
-
-
+
Angular asks the injector for the service associated with `LoggerService`
@@ -386,9 +372,7 @@ You can also use a value provider in a unit test to provide mock data in place o
The `HeroOfTheMonthComponent` example has two value providers.
-
-
-
+
* The first provides an existing instance of the `Hero` class to use for the `Hero` token, rather than
requiring the injector to create a new instance with `new` or use its own cached instance.
@@ -427,9 +411,7 @@ extend the default class, or emulate the behavior of the real class in a test ca
The following code shows two examples in `HeroOfTheMonthComponent`.
-
-
-
+
The first provider is the *de-sugared*, expanded form of the most typical case in which the
class to be created (`HeroService`) is also the provider's dependency injection token.
@@ -448,9 +430,7 @@ Components outside the tree continue to receive the original `LoggerService` ins
`DateLoggerService` inherits from `LoggerService`; it appends the current date/time to each message:
-
-
-
+
{@a useexisting}
@@ -472,15 +452,11 @@ You might want to shrink that API surface to just the members you actually need.
In this example, the `MinimalLogger` [class-interface](#class-interface) reduces the API to two members:
-
-
-
+
The following example puts `MinimalLogger` to use in a simplified version of `HeroOfTheMonthComponent`.
-
-
-
+
The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger`, so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor.
@@ -532,9 +508,7 @@ The `runnersUpFactory()` returns the *provider factory function*, which can use
the passed-in state value and the injected services `Hero` and `HeroService`.
-
-
-
+
The provider factory function (returned by `runnersUpFactory()`) returns the actual dependency object,
the string of names.
@@ -578,9 +552,7 @@ as the token for a provider of `LoggerService`.
`MinimalLogger` is an abstract class.
-
-
-
+
An abstract class is usually a base class that you can extend.
In this app, however there is no class that inherits from `MinimalLogger`.
@@ -606,9 +578,7 @@ Using a class as an interface gives you the characteristics of an interface in a
To minimize memory cost, however, the class should have *no implementation*.
The `MinimalLogger` transpiles to this unoptimized, pre-minified JavaScript for a constructor function.
-
-
-
+
Notice that it doesn't have any members. It never grows no matter how many members you add to the class,
as long as those members are typed but not implemented.
@@ -635,15 +605,11 @@ another token that happens to have the same name.
You encountered them twice in the *Hero of the Month* example,
in the *title* value provider and in the *runnersUp* factory provider.
-
-
-
+
You created the `TITLE` token like this:
-
-
-
+
The type parameter, while optional, conveys the dependency's type to developers and tooling.
The token description is another developer aid.
@@ -733,9 +699,7 @@ appear *above* the class definition.
Break the circularity with `forwardRef`.
-
-
-
+
-
-
+
-
-
+
The context for terms in an expression is a blend of the _template variables_,
the directive's _context_ object (if it has one), and the component's _members_.
@@ -241,8 +234,7 @@ such as an element, component, or directive.
You'll see template statements in the [event binding](guide/template-syntax#event-binding) section,
appearing in quotes to the right of the `=` symbol as in `(event)="statement"`.
-
-
+
A template statement *has a side effect*.
That's the whole point of an event.
@@ -272,8 +264,7 @@ such as an event handling method of the component instance.
The *statement context* is typically the component instance.
The *deleteHero* in `(click)="deleteHero()"` is a method of the data-bound component.
-
-
+
The statement context may also refer to properties of the template's own context.
In the following examples, the template `$event` object,
@@ -281,8 +272,7 @@ a [template input variable](guide/template-syntax#template-input-variable) (`let
and a [template reference variable](guide/template-syntax#ref-vars) (`#heroForm`)
are passed to an event handling method of the component.
-
-
+
Template context names take precedence over component context names.
In `deleteHero(hero)` above, the `hero` is the template input variable,
@@ -419,8 +409,7 @@ you modify those elements by setting element attributes with string constants.
With data-binding, you can control things like the state of a button:
-
-
+
Notice that the binding is to the `disabled` property of the button's DOM element,
**not** the attribute. This applies to data-binding in general. Data-binding works with *properties* of DOM elements, components, and directives, not HTML *attributes*.
@@ -564,8 +553,7 @@ The following table summarizes:
src, hero, and ngClass in the following:
-
-
+
|
@@ -580,8 +568,7 @@ The following table summarizes:
click, deleteRequest, and myClick in the following:
-
-
+
|
@@ -594,8 +581,7 @@ The following table summarizes:
Event and property
-
-
+
|
@@ -607,8 +593,7 @@ The following table summarizes:
(the exception)
|
-
-
+
|
@@ -619,8 +604,7 @@ The following table summarizes:
class property
-
-
+
|
@@ -631,8 +615,7 @@ The following table summarizes:
style property
-
-
+
|
@@ -670,14 +653,12 @@ The most common property binding sets an element property to a component
property value. An example is
binding the `src` property of an image element to a component's `itemImageUrl` property:
-
-
+
Here's an example of binding to the `colSpan` property. Notice that it's not `colspan`,
which is the attribute, spelled with a lowercase `s`.
-
-
+
For more details, see the [MDN HTMLTableCellElment](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement) documentation.
@@ -686,19 +667,16 @@ For more about `colSpan` and `colspan`, see (Attribute Binding)[guide/template-s
Another example is disabling a button when the component says that it `isUnchanged`:
-
-
+
Another is setting a property of a directive:
-
-
+
Yet another is setting the model property of a custom component—a great way
for parent and child components to communicate:
-
-
+
### Binding target
@@ -706,13 +684,11 @@ An element property between enclosing square brackets identifies
the target property.
The target property in the following code is the image element's `src` property.
-
-
+
There's also the `bind-` prefix alternative:
-
-
+
In most cases, the target name is the name of a property, even
@@ -723,8 +699,7 @@ Element properties may be the more common targets,
but Angular looks first to see if the name is a property of a known directive,
as it is in the following example:
-
-
+
Technically, Angular is matching the name to a directive `@Input()`,
one of the property names listed in the directive's `inputs` array
@@ -769,16 +744,13 @@ expects a number, an object if it expects an object, and so on.
In the following example, the `childItem` property of the `ItemDetailComponent` expects a string, which is exactly what you're sending in the property binding:
-
-
+
You can confirm this by looking in the `ItemDetailComponent` where the `@Input` type is set to a string:
-
-
+
As you can see here, the `parentItem` in `AppComponent` is a string, which the `ItemDetailComponent` expects:
-
-
+
#### Passing in an object
@@ -787,24 +759,20 @@ the syntax and thinking are the same.
In this scenario, `ListItemComponent` is nested within `AppComponent` and the `item` property expects an object.
-
-
+
The `item` property is declared in the `ListItemComponent` with a type of `Item` and decorated with `@Input()`:
-
-
+
In this sample app, an `Item` is an object that has two properties; an `id` and a `name`.
-
-
+
While a list of items exists in another file, `mock-items.ts`, you can
specify a different item in `app.component.ts` so that the new item will render:
-
-
+
You just have to make sure, in this case, that you're supplying an object because that's the type of `item` and is what the nested component, `ListItemComponent`, expects.
@@ -818,8 +786,7 @@ The brackets, `[]`, tell Angular to evaluate the template expression.
If you omit the brackets, Angular treats the string as a constant
and *initializes the target property* with that string:
-
-
+
Omitting the brackets will render the string
@@ -838,8 +805,7 @@ just as well for directive and component property initialization.
The following example initializes the `prefix` property of the `StringInitComponent` to a fixed string,
not a template expression. Angular sets it and forgets about it.
-
-
+
The `[item]` binding, on the other hand, remains a live binding to the component's `currentItem` property.
@@ -848,8 +814,7 @@ The `[item]` binding, on the other hand, remains a live binding to the component
You often have a choice between interpolation and property binding.
The following binding pairs do the same thing:
-
-
+
Interpolation is a convenient alternative to property binding in
many cases. When rendering data values as strings, there is no
@@ -861,13 +826,11 @@ property to a non-string data value, you must use property binding*.
Imagine the following malicious content.
-
-
+
In the component template, the content might be used with interpolation:
-
-
+
Fortunately, Angular data binding is on alert for dangerous HTML. In the above case,
the HTML displays as is, and the Javascript does not execute. Angular **does not**
@@ -877,8 +840,7 @@ nor property binding.
In the following example, however, Angular [sanitizes](guide/security#sanitization-and-security-contexts)
the values before displaying them.
-
-
+
Interpolation handles the `