diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index df8f9ff7fb..be57cf40d4 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -69,11 +69,9 @@ 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 @@ -168,11 +166,9 @@ 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 f9092fa796..bbffd9ae34 100644 --- a/aio/content/guide/architecture-components.md +++ b/aio/content/guide/architecture-components.md @@ -51,11 +51,9 @@ 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. @@ -83,11 +81,9 @@ 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. @@ -114,19 +110,15 @@ 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 10dadb65ed..f43c5d71c1 100644 --- a/aio/content/guide/architecture-modules.md +++ b/aio/content/guide/architecture-modules.md @@ -35,21 +35,17 @@ 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 56e7c82b7f..f55e255fea 100644 --- a/aio/content/guide/architecture-services.md +++ b/aio/content/guide/architecture-services.md @@ -70,11 +70,9 @@ 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 345aaeef16..427583c50f 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -113,11 +113,9 @@ 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. * A decorator on a component class adds the metadata, including a pointer to the associated template. diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index c82d790760..570eb94863 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -175,11 +175,9 @@ 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} @@ -273,11 +271,9 @@ 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} @@ -311,11 +307,9 @@ 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 47c0dec2ae..1750b86891 100644 --- a/aio/content/guide/component-interaction.md +++ b/aio/content/guide/component-interaction.md @@ -50,11 +50,9 @@ and each iteration's `hero` instance to the child's `hero` property. The running application displays three heroes: -
-
- Parent-to-child -
-
+
+ Parent-to-child +
@@ -96,11 +94,9 @@ Here's the `NameParentComponent` demonstrating name variations including a name -
-
- Parent-to-child-setter -
-
+
+ Parent-to-child-setter +
@@ -156,11 +152,9 @@ 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 +
@@ -212,11 +206,9 @@ The framework passes the event argument—represented by `$event`—to t and the method processes it: -
-
- Child-to-parent -
-
+
+ Child-to-parent +
@@ -276,11 +268,9 @@ uses interpolation to display the child's `seconds` property. Here we see the parent and child working together. -
-
- countdown timer -
-
+
+ countdown timer +
@@ -431,11 +421,9 @@ 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 dddfd59964..b01b9270ba 100644 --- a/aio/content/guide/dependency-injection-in-action.md +++ b/aio/content/guide/dependency-injection-in-action.md @@ -40,11 +40,9 @@ 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} @@ -133,11 +131,9 @@ 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} @@ -195,11 +191,9 @@ 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 +
Here's `HeroContactComponent`, which demonstrates the qualifying decorators. @@ -227,11 +221,9 @@ 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 +
@@ -240,11 +232,9 @@ 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 +
If you restore the `@Host()` decorator and comment out `@Optional`, @@ -304,11 +294,9 @@ 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} @@ -359,11 +347,9 @@ 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. The use cases illustrate different ways to use the [*provide* object literal](guide/dependency-injection-providers#provide) to associate a definition object with a DI token. @@ -474,11 +460,9 @@ 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 +
Behind the scenes, Angular sets the `logger` parameter to the full service registered under the `LoggingService` token, which happens to be the `DateLoggerService` instance that was [provided above](guide/dependency-injection-in-action#useclass). @@ -488,11 +472,9 @@ 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 +
@@ -645,11 +627,9 @@ 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. It demands its own instance of `HeroService` to get heroes diff --git a/aio/content/guide/dependency-injection-navtree.md b/aio/content/guide/dependency-injection-navtree.md index 12f9042cf7..52f7a8e54a 100644 --- a/aio/content/guide/dependency-injection-navtree.md +++ b/aio/content/guide/dependency-injection-navtree.md @@ -145,11 +145,9 @@ the same way you've done it before. Here's *Alex* and family in action. -
-
- Alex in action -
-
+
+ Alex in action +
@@ -203,13 +201,9 @@ which *is* what parent means. Here's *Alice*, *Barry*, and family in action. -
-
- Alice in action -
-
- - +
+ Alice in action +
{@a parent-token} diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index e3fcfb46e7..3ae811f7ee 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -434,11 +434,9 @@ 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 7791b1c703..832ab23aa3 100644 --- a/aio/content/guide/displaying-data.md +++ b/aio/content/guide/displaying-data.md @@ -8,12 +8,9 @@ conditionally show a message below the list. The final UI looks like this: - -
-
- Final UI -
-
+
+ Final UI +
@@ -105,13 +102,9 @@ inside the `` tag. Now run the app. It should display the title and hero name: -
-
- Title and Hero -
-
- - +
+ Title and Hero +
The next few sections review some of the coding choices in the app. @@ -215,14 +208,9 @@ 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 +
## Creating a class for the data diff --git a/aio/content/guide/docs-style-guide.md b/aio/content/guide/docs-style-guide.md index a6fb2319b2..a3a57fdc2c 100644 --- a/aio/content/guide/docs-style-guide.md +++ b/aio/content/guide/docs-style-guide.md @@ -1244,19 +1244,20 @@ Images should be specified in an `` tag. For accessibility, always set the `alt` attribute with a meaningful description of the image. -You should nest the `` tag within a `
` tag, which styles the image within a drop-shadow frame. You'll need the editor's permission to skip the `
` tag. +You should nest the `` tag within a `
` tag, which styles the image within a drop-shadow frame. You'll need the editor's permission to skip the `lightbox` class on its `div` encapsulation. Here's a conforming example -
- flying hero -
+
+ flying hero +
```html -
+
flying hero -
+ alt="flying hero"> +
``` _Note that the HTML image element does not have a closing tag._ @@ -1267,17 +1268,19 @@ The doc generator reads the image dimensions from the file and adds width and he Here's the "flying hero" at a more reasonable scale. -
- flying Angular hero -
+
+ flying Angular hero +
```html -
- flying Angular hero -
+
+ flying Angular hero +
``` Wide images can be a problem. Most browsers try to rescale the image but wide images may overflow the document in certain viewports. @@ -1285,9 +1288,9 @@ Wide images can be a problem. Most browsers try to rescale the image but wide im **Do not set a width greater than 700px**. If you wish to display a larger image, provide a link to the actual image that the user can click on to see the full size image separately as in this example of `source-map-explorer` output from the "Ahead-of-time Compilation" guide: -
+
toh-pt6-bundle -
+

Image compression

diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md index ac500049ec..3e2a339faa 100644 --- a/aio/content/guide/dynamic-component-loader.md +++ b/aio/content/guide/dynamic-component-loader.md @@ -183,12 +183,8 @@ Here are two sample components and the `AdComponent` interface for reference: ## Final ad banner The final ad banner looks like this: -
-
- Ads -
-
- - +
+ Ads +
See the . diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md index e44236ee32..863619af03 100644 --- a/aio/content/guide/dynamic-form.md +++ b/aio/content/guide/dynamic-form.md @@ -197,12 +197,9 @@ Saving and retrieving the data is an exercise for another time. The final form looks like this: -
-
- Dynamic-Form -
-
- +
+ Dynamic-Form +
[Back to top](guide/dynamic-form#top) diff --git a/aio/content/guide/elements.md b/aio/content/guide/elements.md index 7a2467c54a..5ae8abb2cd 100644 --- a/aio/content/guide/elements.md +++ b/aio/content/guide/elements.md @@ -42,11 +42,9 @@ 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,11 +62,9 @@ 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 164443e073..553a51ff11 100644 --- a/aio/content/guide/feature-modules.md +++ b/aio/content/guide/feature-modules.md @@ -102,12 +102,9 @@ 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 46b5d4361d..57e36c7c06 100644 --- a/aio/content/guide/forms-overview.md +++ b/aio/content/guide/forms-overview.md @@ -67,11 +67,9 @@ 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). @@ -84,11 +82,9 @@ 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. @@ -102,11 +98,9 @@ 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. @@ -116,11 +110,9 @@ 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. @@ -133,11 +125,9 @@ 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*. @@ -150,11 +140,9 @@ 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 d7a5e82739..5eaed4460c 100644 --- a/aio/content/guide/forms.md +++ b/aio/content/guide/forms.md @@ -45,11 +45,9 @@ 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. Every hero needs a job. It's the company mission to match the right hero with the right crisis. @@ -58,11 +56,9 @@ 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. @@ -276,11 +272,9 @@ 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 +
You don't see hero data because you're not binding to the `Hero` yet. @@ -341,11 +335,9 @@ 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 back again. @@ -391,11 +383,9 @@ 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 confirms that all of your changes are reflected in the model. @@ -493,19 +483,15 @@ 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 strong visual signal when the values are invalid. You also want to mark required fields. @@ -518,11 +504,9 @@ 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 that you add to the project as a sibling to `index.html`: @@ -541,11 +525,9 @@ 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 31e5f089b1..90fd20af7a 100644 --- a/aio/content/guide/frequent-ngmodules.md +++ b/aio/content/guide/frequent-ngmodules.md @@ -111,11 +111,9 @@ 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 43ab195586..d40a8b39f0 100644 --- a/aio/content/guide/hierarchical-dependency-injection.md +++ b/aio/content/guide/hierarchical-dependency-injection.md @@ -108,11 +108,9 @@ 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 don't have aliases. You have the option to create `ModuleInjector`s @@ -1098,12 +1096,9 @@ Each tax return component has the following characteristics: * Can change a tax return without affecting a return in another component. * 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. That would be a pretty easy task for a simple hero tax return. @@ -1172,11 +1167,9 @@ 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. @@ -1185,11 +1178,9 @@ 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 145da83500..1a5e7fd65c 100644 --- a/aio/content/guide/language-service.md +++ b/aio/content/guide/language-service.md @@ -25,11 +25,9 @@ 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 show up in the completion list. @@ -39,22 +37,18 @@ 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 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 +
## Angular Language Service in your editor diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index 00835a464d..abc8a2213d 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -91,11 +91,9 @@ 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`. @@ -137,30 +135,24 @@ 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 +
Then reload with `Cmd+r` or `Ctrl+r`, depending on your platform. diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md index 2f38216b20..e6cbb1fadb 100644 --- a/aio/content/guide/lifecycle-hooks.md +++ b/aio/content/guide/lifecycle-hooks.md @@ -291,11 +291,9 @@ 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: `OnChanges`, `OnInit`, `DoCheck` (3x), `AfterContentInit`, `AfterContentChecked` (3x), @@ -351,11 +349,9 @@ 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. @@ -444,11 +440,9 @@ 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. But the `ngOnChanges` does not catch changes to `hero.name` @@ -479,11 +473,9 @@ 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. This hook is called with enormous frequency—after _every_ @@ -535,11 +527,9 @@ 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. Write lean hook methods to avoid performance problems. @@ -582,11 +572,9 @@ 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 4fc2ab13f8..780d687210 100644 --- a/aio/content/guide/pipes.md +++ b/aio/content/guide/pipes.md @@ -106,13 +106,9 @@ As you click the button, the displayed date alternates between "**04/15/1988**" and "**Friday, April 15, 1988**". - -
-
- Date Format Toggle -
-
- +
+ Date Format Toggle +
@@ -188,11 +184,9 @@ Now you need a component to demonstrate the pipe. -
-
- Power Booster -
-
+
+ Power Booster +
@@ -234,11 +228,9 @@ your pipe and two-way data binding with `ngModel`. -
-
- Power Boost Calculator -
-
+
+ Power Boost Calculator +
@@ -313,11 +305,9 @@ The Flying Heroes application extends the code with checkbox switches and additional displays to help you experience these effects. -
-
- Flying Heroes -
-
+
+ Flying Heroes +
@@ -494,11 +484,9 @@ 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 efa1fe16c8..19c4f44536 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -64,11 +64,9 @@ The form control assigned to `name` is displayed when the component is added to -
-
- Name Editor -
-
+
+ Name Editor +
## Managing control values @@ -110,11 +108,9 @@ 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 +
@@ -192,11 +188,9 @@ 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 @@ -220,11 +214,9 @@ 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 +
@@ -354,11 +346,9 @@ 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. @@ -422,11 +412,9 @@ 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 04f0b48e31..ad61899d68 100644 --- a/aio/content/guide/route-animations.md +++ b/aio/content/guide/route-animations.md @@ -25,11 +25,9 @@ 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 12abc7cd74..ad01c4e4ac 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -765,21 +765,17 @@ 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 +
@@ -794,11 +790,9 @@ 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 +
@@ -809,11 +803,9 @@ Alter the name of a crisis. Notice that the corresponding name in the crisis list does _not_ change. -
-
- Crisis Center Detail -
-
+
+ Crisis Center Detail +
@@ -827,11 +819,9 @@ Click the browser back button or the "Heroes" link instead. Up pops a dialog box. -
-
- Confirm Dialog -
-
+
+ Confirm Dialog +
@@ -852,11 +842,9 @@ 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} @@ -940,11 +928,9 @@ 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. @@ -1377,11 +1363,9 @@ from the -
- App in action -
- +
+ App in action +
@@ -1960,11 +1944,9 @@ 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 +
@@ -2147,11 +2129,9 @@ 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 +
@@ -2543,11 +2523,9 @@ 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 +
@@ -2811,11 +2789,9 @@ 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 3d23bf96b9..7d26e1b610 100644 --- a/aio/content/guide/schematics-authoring.md +++ b/aio/content/guide/schematics-authoring.md @@ -359,11 +359,9 @@ 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 8a0ba14985..19aeeb39bf 100644 --- a/aio/content/guide/security.md +++ b/aio/content/guide/security.md @@ -118,11 +118,9 @@ 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 +
### Direct use of the DOM APIs and explicit sanitization calls @@ -211,11 +209,9 @@ 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 ed583f1fdc..cd33299dc5 100644 --- a/aio/content/guide/service-worker-getting-started.md +++ b/aio/content/guide/service-worker-getting-started.md @@ -74,11 +74,9 @@ 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 is checked +
Now the app has no access to network interaction. @@ -88,11 +86,9 @@ 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. @@ -146,11 +142,9 @@ 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. @@ -158,11 +152,9 @@ 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 6761c5fffa..d7f763a73e 100644 --- a/aio/content/guide/set-document-title.md +++ b/aio/content/guide/set-document-title.md @@ -47,11 +47,9 @@ 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 37920af933..be0602ea6e 100644 --- a/aio/content/guide/setup-local.md +++ b/aio/content/guide/setup-local.md @@ -104,11 +104,9 @@ to `http://localhost:4200/`. Your app greets you with a message: -
-
- Welcome to my-app! -
-
+
+ Welcome to my-app! +
## Next steps diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md index 81d5a3df30..39396da1cd 100644 --- a/aio/content/guide/structural-directives.md +++ b/aio/content/guide/structural-directives.md @@ -125,11 +125,9 @@ 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 +
@@ -153,11 +151,9 @@ 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 +
@@ -215,11 +211,9 @@ 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 +
@@ -565,11 +559,9 @@ 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 +
@@ -625,11 +617,9 @@ 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 +
@@ -649,11 +639,9 @@ When you try this, the drop down is empty. -
-
- spanned options don't work -
-
+
+ spanned options don't work +
@@ -674,11 +662,9 @@ Here's the conditional paragraph again, this time using ``. It renders properly. -
-
- ngcontainer paragraph with proper style -
-
+
+ ngcontainer paragraph with proper style +
@@ -692,11 +678,9 @@ Now conditionally exclude a _select_ `
The generator creates starter files for all three parts of the component: * `product-alerts.component.ts` @@ -295,11 +279,9 @@ The next step is to create a new alert feature that takes a product as an input. The new product alert component takes a product as input from the product list. With that input, it shows or hides the "Notify Me" button, based on the price of the product. The Phone XL price is over $700, so the "Notify Me" button appears on that product. -
-
+
Product alert button added to products over $700 -
-
+
@@ -342,11 +324,9 @@ To make the "Notify Me" button work, you need to configure two things: 1. Try the "Notify Me" button: -
-
+
Product alert notification confirmation dialog -
-
+
diff --git a/aio/content/start/routing.md b/aio/content/start/routing.md index c34602821b..3d958d2399 100644 --- a/aio/content/start/routing.md +++ b/aio/content/start/routing.md @@ -54,11 +54,9 @@ The app is already set up to use the Angular router and to use routing to naviga Notice that the URL in the preview window changes. The final segment is `products/1`. -
-
- Product details page with updated URL -
-
+
+ Product details page with updated URL +
@@ -110,11 +108,9 @@ The product details component handles the display of each product. The Angular R Now, when the user clicks on a name in the product list, the router navigates you to the distinct URL for the product, swaps out the product list component for the product details component, and displays the product details. -
-
- Product details page with updated URL and full details displayed -
-
+
+ Product details page with updated URL and full details displayed +
diff --git a/aio/content/tutorial/index.md b/aio/content/tutorial/index.md index f2d690a22e..9ddf21ddde 100644 --- a/aio/content/tutorial/index.md +++ b/aio/content/tutorial/index.md @@ -49,11 +49,9 @@ After completing all tutorial steps, the final app will look like this: -
- Output of heroes dashboard -
- +
+ Output of heroes dashboard +
You can click the two links above the dashboard ("Dashboard" and "Heroes") to navigate between this Dashboard view and a Heroes view. @@ -61,22 +59,18 @@ to navigate between this Dashboard view and a Heroes view. If you click the dashboard hero "Magneta," the router opens a "Hero Details" view where you can change the hero's name. -
-
- Details of hero in app -
-
+
+ Details of hero in app +
Clicking the "Back" button returns you to the Dashboard. Links at the top take you to either of the main views. If you click "Heroes," the app displays the "Heroes" master list view. -
-
- Output of heroes list app -
-
+
+ Output of heroes list app +
When you click a different hero name, the read-only mini detail beneath the list reflects the new choice. @@ -85,16 +79,12 @@ editable details of the selected hero. The following diagram captures all of the navigation options. -
-
- View navigations -
-
+
+ View navigations +
Here's the app in action: -
-
- Tour of Heroes in Action -
-
+
+ Tour of Heroes in Action +
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md index 3ef8ab3245..ad18e1aa8b 100644 --- a/aio/content/tutorial/toh-pt2.md +++ b/aio/content/tutorial/toh-pt2.md @@ -196,11 +196,9 @@ It's difficult to identify the _selected hero_ in the list when all `
  • ` eleme If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this: -
    -
    - Selected hero -
    -
    +
    + Selected hero +
    That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles). You just have to apply the `.selected` class to the `
  • ` when the user clicks it. diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md index b9c48efb2a..21bb1b6911 100644 --- a/aio/content/tutorial/toh-pt5.md +++ b/aio/content/tutorial/toh-pt5.md @@ -9,11 +9,9 @@ There are new requirements for the Tour of Heroes app: When you’re done, users will be able to navigate the app like this: -
    -
    - View navigations -
    -
    +
    + View navigations +
    ## Add the `AppRoutingModule` diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md index 6ea68f6da0..985997aaea 100644 --- a/aio/content/tutorial/toh-pt6.md +++ b/aio/content/tutorial/toh-pt6.md @@ -513,11 +513,9 @@ That's the job of the [`AsyncPipe`](#asyncpipe) in the template. Run the app again. In the *Dashboard*, enter some text in the search box. If you enter characters that match any existing hero names, you'll see something like this. -
    -
    - Hero Search Component -
    -
    +
    + Hero Search Component +
    ## Final code review diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/_images.scss index be47eb6705..5846a8a994 100644 --- a/aio/src/styles/2-modules/_images.scss +++ b/aio/src/styles/2-modules/_images.scss @@ -32,7 +32,7 @@ } } - figure { + .lightbox { margin: 0; margin-top: 14px; margin-bottom: 14px; @@ -45,24 +45,19 @@ justify-content: center; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2); margin: 16px 0; + background-color: $lightboxgray; + width: 100%; + display: flex; + justify-content: center; - &.lightbox { - background-color: $lightboxgray; - width: 100%; - display: flex; - justify-content: center; - } - - div.card { + img { + max-width: 100%; + height: auto; + padding: 8px; + margin: auto; box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12); border-radius: 4px; - padding: 8px; background-color: $white; - - img { - max-width: 100%; - height: auto; - } } } }