diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index b900fd0a78..2bc8f4531b 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -202,10 +202,10 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bootstrapping - +
- + Angular doesn't have a bootstrap directive. diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index b92e922066..e266c72f9f 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -37,7 +37,7 @@ To get started with adding Angular animations to your project, import the animat Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. - +
@@ -49,7 +49,7 @@ Import `BrowserAnimationsModule`, which introduces the animation capabilities in If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. - +
@@ -61,7 +61,7 @@ If you plan to use specific animation functions in component files, import those In the component file, add a metadata property called `animations:` within the `@Component()` decorator. You put the trigger that defines an animation within the `animations` metadata property. - + ## Animating a simple transition @@ -82,12 +82,12 @@ Use the `style()` function to define a set of styles to associate with a given s Let's see how Angular's `state()` function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a background color of yellow. - + In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green. - + ### Transitions and timing @@ -134,7 +134,7 @@ The third argument, `easing`, controls how the animation [accelerates and decele This example provides a state transition from `open` to `closed` with a one second transition between states. - @@ -142,7 +142,7 @@ In the code snippet above, the `=>` operator indicates unidirectional transition This example adds a state transition from the `closed` state to the `open` state with a 0.5 second transition animation arc. - @@ -180,7 +180,7 @@ In this example, we'll name the trigger `openClose`, and attach it to the `butto Animations are defined in the metadata of the component that controls the HTML element to be animated. Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. - @@ -194,7 +194,7 @@ The animation is executed or triggered when the expression value changes to a ne The following code snippet binds the trigger to the value of the `isOpen` property. - @@ -216,15 +216,15 @@ Here are the code files discussed in the transition example. - - - + diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md index e361c62cd6..75b1029fbd 100644 --- a/aio/content/guide/architecture-components.md +++ b/aio/content/guide/architecture-components.md @@ -15,7 +15,7 @@ Its `selectHero()` method sets a `selectedHero` property when the user clicks to The component acquires the heroes from a service, which is a TypeScript [parameter property](http://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties) on the constructor. The service is provided to the component through the dependency injection system. - + Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()`. @@ -31,7 +31,7 @@ In addition to containing or pointing to the template, the `@Component` metadata Here's an example of basic metadata for `HeroListComponent`. - + This example shows some of the most useful `@Component` configuration options: @@ -63,7 +63,7 @@ A template looks like regular HTML, except that it also contains Angular [templa For example, here is a template for the Tutorial's `HeroListComponent`. - + This template uses typical HTML elements like `

` and `

`, and also includes Angular template-syntax elements, `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and ``. The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data. @@ -87,7 +87,7 @@ The following diagram shows the four forms of data binding markup. Each form has This example from the `HeroListComponent` template uses three of these forms. - + * The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation) displays the component's `hero.name` property value within the `

  • ` element. @@ -101,7 +101,7 @@ Two-way data binding (used mainly in [template-driven forms](guide/forms)) combines property and event binding in a single notation. Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive. - + In two-way binding, a data property value flows to the input box from the component as with property binding. The user's changes also flow back to the component, resetting the property to the latest value, @@ -164,7 +164,7 @@ Just as for components, the metadata for a directive associates the decorated cl *Structural directives* alter layout by adding, removing, and replacing elements in the DOM. The example template uses two built-in structural directives to add application logic to how the view is rendered. - + * [`*ngFor`](guide/displaying-data#ngFor) is an iterative; it tells Angular to stamp out one `
  • ` per hero in the `heroes` list. * [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists. @@ -176,7 +176,7 @@ In templates they look like regular HTML attributes, hence the name. The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive. `ngModel` modifies the behavior of an existing element (typically ``) by setting its display value property and responding to change events. - + Angular has more pre-defined directives that either alter the layout structure (for example, [ngSwitch](guide/template-syntax#ngSwitch)) diff --git a/aio/content/guide/architecture-modules.md b/aio/content/guide/architecture-modules.md index 2566b687e4..241a9612da 100644 --- a/aio/content/guide/architecture-modules.md +++ b/aio/content/guide/architecture-modules.md @@ -23,7 +23,7 @@ An NgModule is defined by a class decorated with `@NgModule()`. The `@NgModule() Here's a simple root NgModule definition. - +
    diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md index d555f3577c..61250ca633 100644 --- a/aio/content/guide/architecture-services.md +++ b/aio/content/guide/architecture-services.md @@ -28,11 +28,11 @@ 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) @@ -62,7 +62,7 @@ A dependency doesn't have to be a service—it could be a function, for exam 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. @@ -111,6 +111,6 @@ or in the `@NgModule()` or `@Component()` metadata 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 e44c799621..80b6f26be3 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -37,7 +37,7 @@ 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} @@ -59,7 +59,7 @@ _Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same The generated `src/app/highlight.directive.ts` is as follows: - + The imported `Directive` symbol provides Angular the `@Directive` decorator. @@ -92,7 +92,7 @@ Exporting `HighlightDirective` makes the directive accessible. 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: @@ -111,7 +111,7 @@ This first implementation sets the background color of the host element to yello To use the new `HighlightDirective`, add a paragraph (`

    `) element to the template of the root `AppComponent` and apply the directive as an attribute. - + Now run the application to see the `HighlightDirective` in action. @@ -136,12 +136,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. @@ -162,11 +162,11 @@ 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: - + Run the app and confirm that the background color appears when the mouse hovers over the `p` and disappears as it moves out. @@ -183,11 +183,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} @@ -200,19 +200,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. @@ -221,7 +221,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. @@ -233,23 +233,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 @@ -259,11 +259,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. @@ -283,12 +283,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? @@ -296,7 +296,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. @@ -319,12 +319,12 @@ This page covered how to: The final source code follows: - - - - - - + + + + + + @@ -338,11 +338,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. @@ -374,7 +374,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 fe5addf879..939212086b 100644 --- a/aio/content/guide/bootstrapping.md +++ b/aio/content/guide/bootstrapping.md @@ -106,18 +106,18 @@ 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: - + diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md index fea8cd245a..8d8b7b3302 100644 --- a/aio/content/guide/browser-support.md +++ b/aio/content/guide/browser-support.md @@ -140,7 +140,7 @@ For example, [if you need the web animations polyfill](http://caniuse.com/#feat= Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example: - + /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation @@ -553,7 +553,7 @@ computed with the closure com If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this. - + <!-- 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/complex-animation-sequences.md b/aio/content/guide/complex-animation-sequences.md index 929030d432..54eaee3fd9 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 @@ -70,11 +70,11 @@ The filter works in real time as you type. Elements leave the page as you type e The HTML template contains a trigger called `filterAnimation`. - + The component file contains three transitions. - + The animation does the following: diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md index fd0ef1c53e..16ba17cdbd 100644 --- a/aio/content/guide/component-interaction.md +++ b/aio/content/guide/component-interaction.md @@ -28,7 +28,7 @@ in which two or more components share information. typically adorned with [@Input decorations](guide/template-syntax#inputs-outputs). - + @@ -41,7 +41,7 @@ binding its `master` string property to the child's `master` alias, and each iteration's `hero` instance to the child's `hero` property. - + @@ -61,7 +61,7 @@ The running application displays three heroes: E2E test that all children were instantiated and displayed as expected: - + @@ -79,7 +79,7 @@ The setter of the `name` input property in the child `NameChildComponent` trims the whitespace from a name and replaces an empty value with default text. - + @@ -88,7 +88,7 @@ trims the whitespace from a name and replaces an empty value with default text. Here's the `NameParentComponent` demonstrating name variations including a name with all spaces: - + @@ -105,7 +105,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name E2E tests of input property setter with empty and non-empty names: - + @@ -134,7 +134,7 @@ Learn about `ngOnChanges()` in the [LifeCycle Hooks](guide/lifecycle-hooks) chap This `VersionChildComponent` detects changes to the `major` and `minor` input properties and composes a log message reporting these changes: - + @@ -143,7 +143,7 @@ This `VersionChildComponent` detects changes to the `major` and `minor` input pr The `VersionParentComponent` supplies the `minor` and `major` values and binds buttons to methods that change them. - + @@ -164,7 +164,7 @@ Test that ***both*** input properties are set initially and that button clicks t the expected `ngOnChanges` calls and values: - + @@ -184,7 +184,7 @@ The child's `EventEmitter` property is an ***output property***, as seen in this `VoterComponent`: - + @@ -196,7 +196,7 @@ The parent `VoteTakerComponent` binds an event handler called `onVoted()` that r payload `$event` and updates a counter. - + @@ -217,7 +217,7 @@ and the method processes it: Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters: - + @@ -240,7 +240,7 @@ The following is a child `CountdownTimerComponent` that repeatedly counts down t It has `start` and `stop` methods that control the clock and it displays a countdown status message in its own template. - + @@ -249,7 +249,7 @@ countdown status message in its own template. The `CountdownLocalVarParentComponent` that hosts the timer component is as follows: - + @@ -284,7 +284,7 @@ match the seconds displayed in the child's status message. Test also that clicking the *Stop* button pauses the countdown timer: - + @@ -324,7 +324,7 @@ is solely for the purpose of demonstration. Here is the parent, `CountdownViewChildParentComponent`: - + @@ -374,7 +374,7 @@ Components outside this component subtree have no access to the service or their This `MissionService` connects the `MissionControlComponent` to multiple `AstronautComponent` children. - + @@ -384,7 +384,7 @@ The `MissionControlComponent` both provides the instance of the service that it (through the `providers` metadata array) and injects that instance into itself through its constructor: - + @@ -394,7 +394,7 @@ The `AstronautComponent` also injects the service in its constructor. Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance: - + @@ -433,7 +433,7 @@ Tests click buttons of both the parent `MissionControlComponent` and the `Astron and verify that the history meets expectations: - + diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index a5ae119cba..d59625e1fb 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -21,7 +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,7 +71,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 @@ -83,7 +83,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,7 +99,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` @@ -114,7 +114,7 @@ children and content children of the component. The following example targets all `

    ` elements, from the host element down through this component to all of its child elements in the DOM. - + @@ -154,7 +154,7 @@ You can add a `styles` array property to the `@Component` decorator. Each string in the array defines some CSS for this component. - +
    @@ -176,8 +176,8 @@ You can load styles from external CSS files by adding a `styleUrls` property to a component's `@Component` decorator: - - + +
    @@ -204,14 +204,14 @@ ng generate component hero-app You can embed CSS styles directly into the HTML template by putting them inside `