diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index fc143bee6e..df8f9ff7fb 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -69,8 +69,10 @@ Let's animate a simple transition that changes a single HTML element from one st In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`. -
-open and closed states +
+
+ open and closed states +
### Animation state and styles @@ -166,8 +168,10 @@ The `trigger()` function describes the property name to watch for changes. When In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions. -
-triggering the animation +
+
+ triggering the animation +
diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md index 638e04a15a..c710e7a091 100644 --- a/aio/content/guide/architecture-components.md +++ b/aio/content/guide/architecture-components.md @@ -51,8 +51,10 @@ You define a component's view with its companion template. A template is a form Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's *host view*. The component can also define a *view hierarchy*, which contains *embedded views*, hosted by other components. -
-Component tree +
+
+ Component tree +
A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules. @@ -81,8 +83,10 @@ Angular supports *two-way data binding*, a mechanism for coordinating the parts The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both. -
-Data Binding +
+
+ Data Binding +
This example from the `HeroListComponent` template uses three of these forms. @@ -110,14 +114,18 @@ as with event binding. Angular processes *all* data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components. -
- Data Binding +
+
+ Data Binding +
Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components. -
- Parent/Child binding +
+
+ Parent/Child binding +
### Pipes diff --git a/aio/content/guide/architecture-modules.md b/aio/content/guide/architecture-modules.md index cc07ae4011..10dadb65ed 100644 --- a/aio/content/guide/architecture-modules.md +++ b/aio/content/guide/architecture-modules.md @@ -35,20 +35,20 @@ Here's a simple root NgModule definition. NgModules provide a *compilation context* for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context. -
- -Component compilation context - +
+
+ Component compilation context +

A component and its template together define a *view*. A component can contain a *view hierarchy*, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries. -
- -View hierarchy - +
+
+ View hierarchy +

diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md index 27aaa1afe6..5d0989e639 100644 --- a/aio/content/guide/architecture-services.md +++ b/aio/content/guide/architecture-services.md @@ -70,8 +70,10 @@ When all requested services have been resolved and returned, Angular can call th The process of `HeroService` injection looks something like this. -
- Service +
+
+ Service +
### Providing services diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index 97774b74ef..345aaeef16 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -113,8 +113,10 @@ To define navigation rules, you associate *navigation paths* with your component You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related. -
- overview +
+
+ overview +
* Together, a component and template define an Angular view. diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index 93b4c3636b..c82d790760 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -175,8 +175,10 @@ Here's the updated directive in full: Run the app and confirm that the background color appears when the mouse hovers over the `p` and disappears as it moves out. -
- Second Highlight +
+
+ Second Highlight +
{@a bindings} @@ -271,8 +273,10 @@ Revise the `AppComponent.color` so that it has no initial value. Here are the harness and directive in action. -
- Highlight v.2 +
+
+ Highlight v.2 +
{@a second-property} @@ -307,8 +311,10 @@ because you made it _public_ with the `@Input` decorator. Here's how the harness should work when you're done coding. -
- Final Highlight +
+
+ Final Highlight +
## Summary diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md index 16ba17cdbd..722c01f50d 100644 --- a/aio/content/guide/component-interaction.md +++ b/aio/content/guide/component-interaction.md @@ -50,8 +50,10 @@ and each iteration's `hero` instance to the child's `hero` property. The running application displays three heroes: -
- Parent-to-child +
+
+ Parent-to-child +
@@ -94,8 +96,10 @@ Here's the `NameParentComponent` demonstrating name variations including a name -
- Parent-to-child-setter +
+
+ Parent-to-child-setter +
@@ -152,8 +156,10 @@ The `VersionParentComponent` supplies the `minor` and `major` values and binds b Here's the output of a button-pushing sequence: -
- Parent-to-child-onchanges +
+
+ Parent-to-child-onchanges +
@@ -206,8 +212,10 @@ The framework passes the event argument—represented by `$event`—to t and the method processes it: -
- Child-to-parent +
+
+ Child-to-parent +
@@ -268,8 +276,10 @@ uses interpolation to display the child's `seconds` property. Here we see the parent and child working together. -
- countdown timer +
+
+ countdown timer +
@@ -421,8 +431,10 @@ the parent `MissionControlComponent` and the `AstronautComponent` children, facilitated by the service: -
- bidirectional-service +
+
+ bidirectional-service +
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md index b39c8c8a10..635f3bcf37 100644 --- a/aio/content/guide/dependency-injection-in-action.md +++ b/aio/content/guide/dependency-injection-in-action.md @@ -40,8 +40,10 @@ and the framework resolves the nested dependencies. When all dependencies are in place, `AppComponent` displays the user information. -
- Logged In User +
+
+ Logged In User +
{@a service-scope} @@ -131,8 +133,10 @@ The template displays this data-bound property. Find this example in live code and confirm that the three `HeroBioComponent` instances have their own cached hero data. -
- Bios +
+
+ Bios +
{@a qualify-dependency-lookup} @@ -191,8 +195,10 @@ 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. -
- bio and contact +
+
+ bio and contact +
@@ -221,8 +227,10 @@ When the property is marked as optional, Angular sets `loggerService` to null an Here's `HeroBiosAndContactsComponent` in action. -
- Bios with contact into +
+
+ Bios with contact into +
@@ -232,8 +240,10 @@ until it finds the logger at the `AppComponent` level. The logger logic kicks in and the hero display updates with the "!!!" marker to indicate that the logger was found. -
- Without @Host +
+
+ Without @Host +
@@ -294,8 +304,10 @@ first without a value (yielding the default color) and then with an assigned col The following image shows the effect of mousing over the `` tag. -
- Highlighted bios +
+
+ Highlighted bios +
{@a providers} @@ -347,8 +359,10 @@ You learned about some other methods in [Dependency Providers](guide/dependency- The following `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why you need them. It's visually simple: a few properties and the logs produced by a logger. -
- Hero of the month +
+
+ Hero of the month +
The code behind it customizes how and where the DI framework provides dependencies. @@ -460,8 +474,10 @@ The following example puts `MinimalLogger` to use in a simplified version of `He The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger`, so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor. -
- MinimalLogger restricted API +
+
+ MinimalLogger restricted API +
@@ -472,8 +488,10 @@ Behind the scenes, Angular sets the `logger` parameter to the full service regis This is illustrated in the following image, which displays the logging date. -
- DateLoggerService entry +
+
+ DateLoggerService entry +
@@ -627,8 +645,10 @@ and then pass them down to the base class through the constructor. In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComponent` to display a *sorted* list of heroes. -
- Sorted Heroes +
+
+ Sorted Heroes +
The `HeroesBaseComponent` can stand on its own. diff --git a/aio/content/guide/dependency-injection-navtree.md b/aio/content/guide/dependency-injection-navtree.md index 3cb4e5be21..f590ddc9ff 100644 --- a/aio/content/guide/dependency-injection-navtree.md +++ b/aio/content/guide/dependency-injection-navtree.md @@ -145,8 +145,10 @@ the same way you've done it before. Here's *Alex* and family in action. -
- Alex in action +
+
+ Alex in action +
@@ -201,8 +203,10 @@ which *is* what parent means. Here's *Alice*, *Barry*, and family in action. -
- Alice in action +
+
+ Alice in action +
diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index b90dfd2682..4faa85fc95 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -386,8 +386,10 @@ showing exactly which classes are included in the bundle. Here's the output for the _main_ bundle of an example app called `cli-quickstart`. -
- quickstart sourcemap explorer +
+
+ quickstart sourcemap explorer +
{@a base-tag} diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md index 4e6e6320ae..7791b1c703 100644 --- a/aio/content/guide/displaying-data.md +++ b/aio/content/guide/displaying-data.md @@ -9,8 +9,10 @@ conditionally show a message below the list. The final UI looks like this: -
- Final UI +
+
+ Final UI +
@@ -103,8 +105,10 @@ inside the `` tag. Now run the app. It should display the title and hero name: -
- Title and Hero +
+
+ Title and Hero +
@@ -212,8 +216,10 @@ repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/Jav Now the heroes appear in an unordered list. -
- After ngfor +
+
+ After ngfor +
diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md index da6c470dc5..ac500049ec 100644 --- a/aio/content/guide/dynamic-component-loader.md +++ b/aio/content/guide/dynamic-component-loader.md @@ -183,8 +183,10 @@ Here are two sample components and the `AdComponent` interface for reference: ## Final ad banner The final ad banner looks like this: -
- Ads +
+
+ Ads +
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md index 3f3894243d..2bf0d4ab26 100644 --- a/aio/content/guide/dynamic-form.md +++ b/aio/content/guide/dynamic-form.md @@ -197,8 +197,10 @@ Saving and retrieving the data is an exercise for another time. The final form looks like this: -
- Dynamic-Form +
+
+ Dynamic-Form +
diff --git a/aio/content/guide/elements.md b/aio/content/guide/elements.md index d50079bce6..0b6a9f64c8 100644 --- a/aio/content/guide/elements.md +++ b/aio/content/guide/elements.md @@ -42,10 +42,10 @@ After you register your configured class with the browser's custom-element regis When your custom element is placed on a page, the browser creates an instance of the registered class and adds it to the DOM. The content is provided by the component's template, which uses Angular template syntax, and is rendered using the component and DOM data. Input properties in the component correspond to input attributes for the element. -
- -Custom element in browser - +
+
+ Custom element in browser +
@@ -64,10 +64,10 @@ Use a JavaScript function, `customElements.define()`, to register the configure and its associated custom-element tag with the browser's `CustomElementRegistry`. When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance. -
- -Transform a component to a custom element - +
+
+ Transform a component to a custom element +
### Mapping diff --git a/aio/content/guide/feature-modules.md b/aio/content/guide/feature-modules.md index 4e6719c402..164443e073 100644 --- a/aio/content/guide/feature-modules.md +++ b/aio/content/guide/feature-modules.md @@ -103,8 +103,10 @@ Next, in the `AppComponent`, `app.component.html`, add the tag ` - feature module component +
+
+ feature module component +
diff --git a/aio/content/guide/forms-overview.md b/aio/content/guide/forms-overview.md index cef34ada46..fe20358535 100644 --- a/aio/content/guide/forms-overview.md +++ b/aio/content/guide/forms-overview.md @@ -67,8 +67,10 @@ Here's a component with an input field for a single control implemented using re The source of truth provides the value and status of the form element at a given point in time. In reactive forms, the form model is the source of truth. In the example above, the form model is the `FormControl` instance. -
- Reactive forms key differences +
+
+ Reactive forms key differences +
With reactive forms, the form model is explicitly defined in the component class. The reactive form directive (in this case, `FormControlDirective`) then links the existing `FormControl` instance to a specific form element in the view using a value accessor (`ControlValueAccessor` instance). @@ -82,8 +84,10 @@ Here's the same component with an input field for a single control implemented u In template-driven forms, the source of truth is the template. -
- Template-driven forms key differences +
+
+ Template-driven forms key differences +
The abstraction of the form model promotes simplicity over structure. The template-driven form directive `NgModel` is responsible for creating and managing the `FormControl` instance for a given form element. It's less explicit, but you no longer have direct control over the form model. @@ -98,8 +102,10 @@ When building forms in Angular, it's important to understand how the framework h As described above, in reactive forms each form element in the view is directly linked to a form model (`FormControl` instance). Updates from the view to the model and from the model to the view are synchronous and aren't dependent on the UI rendered. The diagrams below use the same favorite color example to demonstrate how data flows when an input field's value is changed from the view and then from the model. -
- Reactive forms data flow - view to model +
+
+ Reactive forms data flow - view to model +
The steps below outline the data flow from view to model. @@ -110,8 +116,10 @@ The steps below outline the data flow from view to model. 1. The `FormControl` instance emits the new value through the `valueChanges` observable. 1. Any subscribers to the `valueChanges` observable receive the new value. -
- Reactive forms data flow - model to view +
+
+ Reactive forms data flow - model to view +
The steps below outline the data flow from model to view. @@ -125,8 +133,10 @@ The steps below outline the data flow from model to view. In template-driven forms, each form element is linked to a directive that manages the form model internally. The diagrams below use the same favorite color example to demonstrate how data flows when an input field's value is changed from the view and then from the model. -
- Template-driven forms data flow - view to model +
+
+ Template-driven forms data flow - view to model +
The steps below outline the data flow from view to model when the input value changes from *Red* to *Blue*. @@ -140,8 +150,10 @@ The steps below outline the data flow from view to model when the input value ch 1. Because the component template uses two-way data binding for the `favoriteColor` property, the `favoriteColor` property in the component is updated to the value emitted by the `ngModelChange` event (*Blue*). -
- Template-driven forms data flow - model to view +
+
+ Template-driven forms data flow - model to view +
The steps below outline the data flow from model to view when the `favoriteColor` changes from *Blue* to *Red*. diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md index f9848fc1fa..d7a5e82739 100644 --- a/aio/content/guide/forms.md +++ b/aio/content/guide/forms.md @@ -45,8 +45,10 @@ otherwise wrestle with yourself. You'll learn to build a template-driven form that looks like this: -
- Clean Form +
+
+ Clean Form +
The *Hero Employment Agency* uses this form to maintain personal information about heroes. @@ -56,8 +58,10 @@ Two of the three fields on this form are required. Required fields have a green If you delete the hero name, the form displays a validation error in an attention-grabbing style: -
- Invalid, Name Required +
+
+ Invalid, Name Required +
Note that the *Submit* button is disabled, and the "required" bar to the left of the input control changes from green to red. @@ -272,8 +276,10 @@ you display its name using the interpolation syntax. Running the app right now would be disappointing. -
- Early form with no binding +
+
+ Early form with no binding +
@@ -335,8 +341,10 @@ adding and deleting characters, you'd see them appear and disappear from the interpolated text. At some point it might look like this: -
- ngModel in action +
+
+ ngModel in action +
The diagnostic is evidence that values really are flowing from the input box to the model and @@ -383,8 +391,10 @@ After revision, the core of the form should look like this: If you run the app now and change every hero model property, the form might display like this: -
- ngModel in action +
+
+ ngModel in action +
The diagnostic near the top of the form @@ -483,14 +493,18 @@ Follow these steps *precisely*: The actions and effects are as follows: -
- Control State Transition +
+
+ Control State Transition +
You should see the following transitions and class names: -
- Control state transitions +
+
+ Control state transitions +
The `ng-valid`/`ng-invalid` pair is the most interesting, because you want to send a @@ -504,8 +518,10 @@ To create such visual feedback, add definitions for the `ng-*` CSS classes. You can mark required fields and invalid data at the same time with a colored bar on the left of the input box: -
- Invalid Form +
+
+ Invalid Form +
You achieve this effect by adding these class definitions to a new `forms.css` file @@ -525,8 +541,10 @@ Leverage the control's state to reveal a helpful message. When the user deletes the name, the form should look like this: -
- Name required +
+
+ Name required +
To achieve this effect, extend the `` tag with the following: diff --git a/aio/content/guide/frequent-ngmodules.md b/aio/content/guide/frequent-ngmodules.md index 43c275c76f..31e5f089b1 100644 --- a/aio/content/guide/frequent-ngmodules.md +++ b/aio/content/guide/frequent-ngmodules.md @@ -111,8 +111,10 @@ directives in `CommonModule`; they don’t need to re-install app-wide providers If you do import `BrowserModule` into a lazy loaded feature module, Angular returns an error telling you to use `CommonModule` instead. -
- BrowserModule error +
+
+ BrowserModule error +
diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md index 746ca3ee04..aaabc1027b 100644 --- a/aio/content/guide/hierarchical-dependency-injection.md +++ b/aio/content/guide/hierarchical-dependency-injection.md @@ -108,8 +108,10 @@ The following diagram represents the relationship between the `root` `ModuleInjector` and its parent injectors as the previous paragraphs describe. -
- NullInjector, ModuleInjector, root injector +
+
+ NullInjector, ModuleInjector, root injector +
While the name `root` is a special alias, other `ModuleInjector`s @@ -1097,8 +1099,10 @@ Each tax return component has the following characteristics: * Has the ability to save the changes to its tax return or cancel them. -
- Heroes in action +
+
+ Heroes in action +
Suppose that the `HeroTaxReturnComponent` had logic to manage and restore changes. @@ -1168,8 +1172,10 @@ that have special capabilities suitable for whatever is going on in component (B Component (B) is the parent of another component (C) that defines its own, even _more specialized_ provider for `CarService`. -
- car components +
+
+ car components +
Behind the scenes, each component sets up its own injector with zero, one, or more providers defined for that component itself. @@ -1179,8 +1185,10 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng `Tires` resolved by the root injector (A). -
- car injector tree +
+
+ car injector tree +
diff --git a/aio/content/guide/language-service.md b/aio/content/guide/language-service.md index 498e0a88aa..145da83500 100644 --- a/aio/content/guide/language-service.md +++ b/aio/content/guide/language-service.md @@ -25,8 +25,10 @@ contextual possibilities and hints as you type. This example shows autocomplete in an interpolation. As you type it out, you can hit tab to complete. -
- autocompletion +
+
+ autocompletion +
There are also completions within elements. Any elements you have as a component selector will @@ -37,8 +39,10 @@ show up in the completion list. The Angular Language Service can forewarn you of mistakes in your code. In this example, Angular doesn't know what `orders` is or where it comes from. -
- error checking +
+
+ error checking +
### Quick info and navigation @@ -46,8 +50,10 @@ In this example, Angular doesn't know what `orders` is or where it comes from. The quick-info feature allows you to hover to see where components, directives, modules, and so on come from. You can then click "Go to definition" or press F12 to go directly to the definition. -
- navigation +
+
+ navigation +
diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index b4a3761054..00835a464d 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -91,8 +91,10 @@ ng serve Then go to `localhost:4200` where you should see “customer-app” and three buttons. -
- three buttons in the browser +
+
+ three buttons in the browser +
These buttons work, because the CLI automatically added the routes to the feature modules to the `routes` array in `app.module.ts`. @@ -135,23 +137,29 @@ The other feature module's routing module is configured similarly. You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing `Cmd+Option+i` on a Mac or `Ctrl+Shift+j` on a PC and go to the Network Tab. -
- lazy loaded modules diagram +
+
+ lazy loaded modules diagram +
Click on the Orders or Customers button. If you see a chunk appear, everything is wired up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each. -
- lazy loaded modules diagram +
+
+ lazy loaded modules diagram +
To see it again, or to test after working in the project, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab: -
- lazy loaded modules diagram +
+
+ lazy loaded modules diagram +
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md index 463f77e59c..2f38216b20 100644 --- a/aio/content/guide/lifecycle-hooks.md +++ b/aio/content/guide/lifecycle-hooks.md @@ -291,8 +291,10 @@ The peek-a-boo exists to show how Angular calls the hooks in the expected order. This snapshot reflects the state of the log after the user clicked the *Create...* button and then the *Destroy...* button. -
- Peek-a-boo +
+
+ Peek-a-boo +
The sequence of log messages follows the prescribed hook calling order: @@ -349,8 +351,10 @@ Here it is attached to the repeated hero `
`: Each spy's birth and death marks the birth and death of the attached hero `
` with an entry in the *Hook Log* as seen here: -
- Spy Directive +
+
+ Spy Directive +
Adding a hero results in a new hero `
`. The spy's `ngOnInit()` logs that event. @@ -440,8 +444,10 @@ The host `OnChangesParentComponent` binds to them like this: Here's the sample in action as the user makes changes. -
- OnChanges +
+
+ OnChanges +
The log entries appear as the string value of the *power* property changes. @@ -473,8 +479,10 @@ This code inspects certain _values of interest_, capturing and comparing their c It writes a special message to the log when there are no substantive changes to the `hero` or the `power` so you can see how often `DoCheck` is called. The results are illuminating: -
- DoCheck +
+
+ DoCheck +
While the `ngDoCheck()` hook can detect when the hero's `name` has changed, it has a frightful cost. @@ -527,8 +535,10 @@ for one turn of the browser's JavaScript cycle and that's just long enough. Here's *AfterView* in action: -
- AfterView +
+
+ AfterView +
Notice that Angular frequently calls `AfterViewChecked()`, often when there are no changes of interest. @@ -572,8 +582,10 @@ The `` tag is a *placeholder* for the external content. It tells Angular where to insert that content. In this case, the projected content is the `` from the parent. -
- Projected Content +
+
+ Projected Content +
diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md index 25edc69131..92107fda55 100644 --- a/aio/content/guide/pipes.md +++ b/aio/content/guide/pipes.md @@ -107,8 +107,10 @@ As you click the button, the displayed date alternates between "**Friday, April 15, 1988**". -
- Date Format Toggle +
+
+ Date Format Toggle +
@@ -186,8 +188,10 @@ Now you need a component to demonstrate the pipe. -
- Power Booster +
+
+ Power Booster +
@@ -230,8 +234,10 @@ your pipe and two-way data binding with `ngModel`. -
- Power Boost Calculator +
+
+ Power Boost Calculator +
@@ -307,8 +313,10 @@ The Flying Heroes application extends the code with checkbox switches and additional displays to help you experience these effects. -
- Flying Heroes +
+
+ Flying Heroes +
@@ -486,8 +494,10 @@ both requesting the heroes from the `heroes.json` file. The component renders as the following: -
- Hero List +
+
+ Hero List +
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md index 923971d110..43b0b7820a 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -64,8 +64,10 @@ The form control assigned to `name` is displayed when the component is added to -
- Name Editor +
+
+ Name Editor +
## Managing control values @@ -108,8 +110,10 @@ Update the template with a button to simulate a name update. When you click the The form model is the source of truth for the control, so when you click the button, the value of the input is changed within the component class, overriding its current value. -
- Name Editor Update +
+
+ Name Editor Update +
@@ -188,8 +192,10 @@ To display the `ProfileEditor` component that contains the form, add it to a com `ProfileEditor` allows you to manage the form control instances for the `firstName` and `lastName` controls within the form group instance. -
- Profile Editor +
+
+ Profile Editor +
## Creating nested form groups @@ -214,8 +220,10 @@ Add the `address` form group containing the `street`, `city`, `state`, and `zip` The `ProfileEditor` form is displayed as one group, but the model is broken down further to represent the logical grouping areas. -
- Profile Editor Update +
+
+ Profile Editor Update +
@@ -346,8 +354,10 @@ Display the current status of `profileForm` using interpolation. -
- Profile Editor Validation +
+
+ Profile Editor Validation +
The **Submit** button is disabled because `profileForm` is invalid due to the required `firstName` form control. After you fill out the `firstName` input, the form becomes valid and the **Submit** button is enabled. @@ -412,8 +422,10 @@ Add the template HTML below after the `
` closing the `formGroupName` elemen The `*ngFor` directive iterates over each form control instance provided by the aliases form array instance. Because form array elements are unnamed, you assign the index to the `i` variable and pass it to each control to bind it to the `formControlName` input. -
- Profile Editor Aliases +
+
+ Profile Editor Aliases +
Each time a new alias instance is added, the new form array instance is provided its control based on the index. This allows you to track each individual control when calculating the status and value of the root control. diff --git a/aio/content/guide/route-animations.md b/aio/content/guide/route-animations.md index 0ba2fd00b7..59b898ce87 100644 --- a/aio/content/guide/route-animations.md +++ b/aio/content/guide/route-animations.md @@ -25,8 +25,10 @@ Let's illustrate a router transition animation by navigating between two routes,
-
-Animations in action +
+
+ Animations in action +
## Route configuration diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index 6986662897..0e9fe8d460 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -765,16 +765,20 @@ Once the app warms up, you'll see a row of navigation buttons and the *Heroes* view with its list of heroes. -
- Hero List +
+
+ Hero List +
Select one hero and the app takes you to a hero editing screen. -
- Crisis Center Detail +
+
+ Crisis Center Detail +
@@ -790,8 +794,10 @@ Angular app navigation updates the browser history as normal web navigation does Now click the *Crisis Center* link for a list of ongoing crises. -
- Crisis Center List +
+
+ Crisis Center List +
@@ -803,8 +809,10 @@ Alter the name of a crisis. Notice that the corresponding name in the crisis list does _not_ change. -
- Crisis Center Detail +
+
+ Crisis Center Detail +
@@ -819,8 +827,10 @@ Click the browser back button or the "Heroes" link instead. Up pops a dialog box. -
- Confirm Dialog +
+
+ Confirm Dialog +
@@ -842,8 +852,10 @@ Proceed to the first application milestone. Begin with a simple version of the app that navigates between two empty views. -
- App in action +
+
+ App in action +
{@a import} @@ -928,8 +940,10 @@ Registering the `RouterModule.forRoot()` in the `AppModule` imports makes the `R The root `AppComponent` is the application shell. It has a title, a navigation bar with two links, and a router outlet where the router swaps components on and off the page. Here's what you get: -
- Shell +
+
+ Shell +
The router outlet serves as a placeholder when the routed components will be rendered below it. @@ -1363,8 +1377,10 @@ from the +
+
+ App in action +
@@ -1944,8 +1960,10 @@ For example, when returning to the hero-detail.component.ts list from the hero d it would be nice if the viewed hero was preselected in the list. -
- Selected hero +
+
+ Selected hero +
@@ -2129,8 +2147,10 @@ Add some styles to apply when the list item is selected. When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected: -
- Selected List +
+
+ Selected List +
@@ -2523,8 +2543,10 @@ to conform to the following recommended pattern for Angular applications: If your app had many feature areas, the app component trees might look like this: -
- Component Tree +
+
+ Component Tree +
@@ -2789,8 +2811,10 @@ It displays a simple form with a header, an input box for the message, and two buttons, "Send" and "Cancel". -
- Contact popup +
+
+ Contact popup +
diff --git a/aio/content/guide/schematics-authoring.md b/aio/content/guide/schematics-authoring.md index 644c5bf93b..66817faccc 100644 --- a/aio/content/guide/schematics-authoring.md +++ b/aio/content/guide/schematics-authoring.md @@ -359,8 +359,10 @@ When you add a new named schematic to this collection, it is automatically added In addition to the name and description, each schematic has a `factory` property that identifies the schematic’s entry point. In the example, you invoke the schematic's defined functionality by calling the `helloWorld()` function in the main file, `hello-world/index.ts`. -
- overview +
+
+ overview +
Each named schematic in the collection has the following main parts. diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md index 21cd7b589e..8a0ba14985 100644 --- a/aio/content/guide/security.md +++ b/aio/content/guide/security.md @@ -118,8 +118,10 @@ Angular recognizes the value as unsafe and automatically sanitizes it, which rem tag but keeps safe content such as the `` element. -
- A screenshot showing interpolated and bound HTML values +
+
+ A screenshot showing interpolated and bound HTML values +
@@ -209,8 +211,10 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal -
- A screenshot showing an alert box created from a trusted URL +
+
+ A screenshot showing an alert box created from a trusted URL +
diff --git a/aio/content/guide/service-worker-getting-started.md b/aio/content/guide/service-worker-getting-started.md index 241bd5caea..d4ef831e55 100644 --- a/aio/content/guide/service-worker-getting-started.md +++ b/aio/content/guide/service-worker-getting-started.md @@ -74,8 +74,10 @@ To simulate a network issue, disable network interaction for your application. I 2. Go to the **Network tab**. 3. Check the **Offline box**. -
- The offline checkbox in the Network tab is checked +
+
+ The offline checkbox in the Network tab pis checked +
Now the app has no access to network interaction. @@ -86,8 +88,10 @@ With the addition of an Angular service worker, the application behavior changes If you look at the Network tab, you can verify that the service worker is active. -
- Requests are marked as from ServiceWorker +
+
+ Requests are marked as from ServiceWorker +
Notice that under the "Size" column, the requests state is `(from ServiceWorker)`. This means that the resources are not being loaded from the network. Instead, they are being loaded from the service worker's cache. @@ -142,8 +146,10 @@ Now look at how the browser and service worker handle the updated application. 1. Open http://localhost:8080 again in the same window. What happens? -
- It still says Welcome to Service Workers! +
+
+ It still says Welcome to Service Workers! +
What went wrong? Nothing, actually. The Angular service worker is doing its job and serving the version of the application that it has **installed**, even though there is an update available. In the interest of speed, the service worker doesn't wait to check for updates before it serves the application that it has cached. @@ -152,8 +158,10 @@ If you look at the `http-server` logs, you can see the service worker requesting 2. Refresh the page. -
- The text has changed to say Bienvenue à app! +
+
+ The text has changed to say Bienvenue à app! +
The service worker installed the updated version of your app *in the background*, and the next time the page is loaded or reloaded, the service worker switches to the latest version. diff --git a/aio/content/guide/set-document-title.md b/aio/content/guide/set-document-title.md index b9cd3c91d9..25f56035d7 100644 --- a/aio/content/guide/set-document-title.md +++ b/aio/content/guide/set-document-title.md @@ -47,8 +47,10 @@ You can inject the `Title` service into the root `AppComponent` and expose a bin Bind that method to three anchor tags and voilà! -
- Set title +
+
+ Set title +
Here's the complete solution: diff --git a/aio/content/guide/setup-local.md b/aio/content/guide/setup-local.md index bb494c6d77..37920af933 100644 --- a/aio/content/guide/setup-local.md +++ b/aio/content/guide/setup-local.md @@ -104,8 +104,10 @@ to `http://localhost:4200/`. Your app greets you with a message: -
- Welcome to my-app! +
+
+ Welcome to my-app! +
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md index 1354748f09..81d5a3df30 100644 --- a/aio/content/guide/structural-directives.md +++ b/aio/content/guide/structural-directives.md @@ -125,8 +125,10 @@ The `ngIf` directive doesn't hide elements with CSS. It adds and removes them ph Confirm that fact using browser developer tools to inspect the DOM. -
- ngIf=false element not in DOM +
+
+ ngIf=false element not in DOM +
@@ -151,8 +153,10 @@ A directive could hide the unwanted paragraph instead by setting its `display` s While invisible, the element remains in the DOM. -
- hidden element still in DOM +
+
+ hidden element still in DOM +
@@ -211,8 +215,10 @@ Internally, Angular translates the `*ngIf` _attribute_ into a `` _e The first form is not actually rendered, only the finished product ends up in the DOM. -
- hero div in DOM +
+
+ hero div in DOM +
@@ -559,8 +565,10 @@ That's the fate of the middle "Hip!" in the phrase "Hip! Hip! Hooray!". Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic. -
- template tag rendering +
+
+ template tag rendering +
@@ -617,8 +625,10 @@ You also have a CSS style rule that happens to apply to a `` within a `

The constructed paragraph renders strangely. -

- spanned paragraph with bad style +
+
+ spanned paragraph with bad style +
@@ -639,8 +649,10 @@ When you try this, the drop down is empty. -
- spanned options don't work +
+
+ spanned options don't work +
@@ -662,8 +674,10 @@ Here's the conditional paragraph again, this time using ``. It renders properly. -
- ngcontainer paragraph with proper style +
+
+ ngcontainer paragraph with proper style +
@@ -678,8 +692,10 @@ Now conditionally exclude a _select_ `