mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Compare commits
151 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e726a63cdd | |||
| c02e5e15b6 | |||
| 01d2f03d3d | |||
| e5f9d2d046 | |||
| 68a7cc12e4 | |||
| 0bfb5b1f00 | |||
| 1bc1971d15 | |||
| 4e11347a25 | |||
| 3b4f121caf | |||
| d8f9e6131f | |||
| aa1782cee6 | |||
| 4e4a198b3f | |||
| 5af952491a | |||
| d7711d0510 | |||
| f5d0c889ab | |||
| dc46cc4b37 | |||
| 39c50b577e | |||
| 8e1c309e52 | |||
| a6e22c4b8e | |||
| a0bd6e90f9 | |||
| caecd1889b | |||
| d8f637ab43 | |||
| 46bd8f2495 | |||
| d84a4eb90f | |||
| 692e8ab21e | |||
| 5d64d17a52 | |||
| 9c6399926a | |||
| 75fc846745 | |||
| debe517d4f | |||
| e29f1d9cf8 | |||
| 553eb2cc9f | |||
| 30d959a48a | |||
| fdcb420bd7 | |||
| 524b4d5a1f | |||
| fb64f711f8 | |||
| e7e78e6709 | |||
| 8233906be2 | |||
| b8183614f5 | |||
| b46ce7d42f | |||
| 36bf0ae985 | |||
| 3b317dcf87 | |||
| 3ad527d86e | |||
| b6ff762e36 | |||
| e196311e5c | |||
| 3cf8f66f3a | |||
| d7b6416fcf | |||
| fc7f92159d | |||
| cb8e51f8cf | |||
| e6b2bedd70 | |||
| 58a19a3021 | |||
| f70d2a2981 | |||
| 3bbf00fdd4 | |||
| 19fa033f79 | |||
| 513b17043e | |||
| c501e86fd2 | |||
| e849e57059 | |||
| e31ed3d0dc | |||
| 545972e5e9 | |||
| 38d51e4926 | |||
| 535837e617 | |||
| bb6555979d | |||
| 738b23347e | |||
| cd8b1a5087 | |||
| c9def401f8 | |||
| dfd6337bc9 | |||
| fe6a5acd17 | |||
| 768a6698a0 | |||
| cd10a4cc13 | |||
| 1e811df79f | |||
| a701c10b77 | |||
| 510931a7ab | |||
| 92fa1a6cc0 | |||
| 616133c704 | |||
| c792dd739a | |||
| 83fa3ee581 | |||
| 304c85edd0 | |||
| 1e39e11ba0 | |||
| e0a8ca7eee | |||
| 6449590ec8 | |||
| 1939613f71 | |||
| 6d6638c1e9 | |||
| cda9d16838 | |||
| 19fd2f4125 | |||
| 7a67597d01 | |||
| ec0a3007c6 | |||
| 67ae442edc | |||
| 9136dbd65c | |||
| 4a1d9a78fa | |||
| 0f8ae8bf7f | |||
| c42b50cfbe | |||
| a3bc29bbb2 | |||
| 387dcc6621 | |||
| 029060f2d6 | |||
| a53d26847c | |||
| 21e2b93046 | |||
| 92012ec4fd | |||
| 6ca81a706c | |||
| 0baabcb7da | |||
| dc6cb5a3d4 | |||
| 7da3570be8 | |||
| ec192b2b71 | |||
| 55fe2c667d | |||
| 8a3d2aad30 | |||
| dd3abdb9d9 | |||
| d93427b806 | |||
| 032e65c895 | |||
| ee05a285f9 | |||
| 4371ff9092 | |||
| a26b0dcc72 | |||
| 30c5b9c144 | |||
| 673f7a7954 | |||
| cdc8c7cad0 | |||
| bd7f0d8b70 | |||
| 3a9ce61ea4 | |||
| ae98b24eb7 | |||
| 4997a3f692 | |||
| 6a59e6b009 | |||
| 6f80c55dbd | |||
| 07846e550c | |||
| f18131f372 | |||
| f24b94f5d9 | |||
| 6caafc2062 | |||
| f883aaeb89 | |||
| 2215af252c | |||
| db4147b4d2 | |||
| 2dc6efed4e | |||
| 1d307bc5bf | |||
| aace1e71d8 | |||
| fbfec946a7 | |||
| 0e47334db8 | |||
| e4f62c12f5 | |||
| ea3a14805e | |||
| a96f9c91a2 | |||
| a8c0f4f1ba | |||
| 11ef03b36f | |||
| 8e798effe4 | |||
| 54f73530a8 | |||
| 61080ea4bc | |||
| 4116d5d18f | |||
| 5572278826 | |||
| b442c4991d | |||
| 014763e42c | |||
| 86cfbf8c8a | |||
| 3b92b4abd3 | |||
| dd6e80aac5 | |||
| da50b9b5e7 | |||
| 86e4b3cdf9 | |||
| 3fddcb5364 | |||
| d5cc87dc88 | |||
| b075721a49 | |||
| 3346cb6e4e |
@@ -114,11 +114,11 @@ build:remote --cpu=k8
|
||||
build:remote --host_cpu=k8
|
||||
|
||||
# Toolchain and platform related flags
|
||||
build:remote --crosstool_top=//dev-infra/bazel/remote-execution/cpp:cc_toolchain_suite
|
||||
build:remote --extra_toolchains=//dev-infra/bazel/remote-execution/cpp:cc_toolchain
|
||||
build:remote --extra_execution_platforms=//dev-infra/bazel/remote-execution:platform
|
||||
build:remote --host_platform=//dev-infra/bazel/remote-execution:platform
|
||||
build:remote --platforms=//dev-infra/bazel/remote-execution:platform
|
||||
build:remote --crosstool_top=@npm//@angular/dev-infra-private/bazel/remote-execution/cpp:cc_toolchain_suite
|
||||
build:remote --extra_toolchains=@npm//@angular/dev-infra-private/bazel/remote-execution/cpp:cc_toolchain
|
||||
build:remote --extra_execution_platforms=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
|
||||
build:remote --host_platform=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
|
||||
build:remote --platforms=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
|
||||
|
||||
# Remote instance and caching
|
||||
build:remote --remote_instance_name=projects/internal-200822/instances/primary_instance
|
||||
|
||||
+13
-8
@@ -24,15 +24,15 @@ version: 2.1
|
||||
# **NOTE 2 **: If you change the cache key prefix, also sync the cache_key_fallback to match.
|
||||
# **NOTE 3 **: Keep the static part of the cache key as prefix to enable correct fallbacks.
|
||||
# See https://circleci.com/docs/2.0/caching/#restoring-cache for how prefixes work in CircleCI.
|
||||
var_3: &cache_key v4-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
|
||||
var_3: &cache_key v1-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
|
||||
# We invalidate the cache if the Bazel version changes because otherwise the `bazelisk` cache
|
||||
# folder will contain all previously used versions and ultimately cause the cache restoring to
|
||||
# be slower due to its growing size.
|
||||
var_4: &cache_key_fallback v4-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
|
||||
var_4: &cache_key_fallback v1-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
|
||||
|
||||
# Windows needs its own cache key because binaries in node_modules are different.
|
||||
var_3_win: &cache_key_win v4-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
|
||||
var_4_win: &cache_key_win_fallback v4-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
|
||||
var_3_win: &cache_key_win v1-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
|
||||
var_4_win: &cache_key_win_fallback v1-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
|
||||
|
||||
# Cache key for the `components-repo-unit-tests` job. **Note** when updating the SHA in the
|
||||
# cache keys also update the SHA for the "COMPONENTS_REPO_COMMIT" environment variable.
|
||||
@@ -213,6 +213,10 @@ commands:
|
||||
keys:
|
||||
- *cache_key_win
|
||||
- *cache_key_win_fallback
|
||||
# Install @bazel/bazelisk globally and use that for the first run.
|
||||
# Workaround for https://github.com/bazelbuild/rules_nodejs/issues/894
|
||||
# NB: the issue was for @bazel/bazel but the same problem applies to @bazel/bazelisk
|
||||
- run: yarn global add @bazel/bazelisk@$env:BAZELISK_VERSION
|
||||
# On Windows `~/` is not resolved when using as a CLI value. `../` results in the same path.
|
||||
- run: yarn install --frozen-lockfile --non-interactive --cache-folder ../.cache/yarn
|
||||
|
||||
@@ -291,6 +295,7 @@ jobs:
|
||||
- run: yarn -s ng-dev pullapprove verify
|
||||
- run: yarn -s ng-dev ngbot verify
|
||||
- run: yarn -s ng-dev commit-message validate-range $CI_GIT_BASE_REVISION $CI_GIT_REVISION
|
||||
- run: yarn -s check-tooling-setup
|
||||
|
||||
test:
|
||||
executor:
|
||||
@@ -798,11 +803,11 @@ jobs:
|
||||
- setup_win
|
||||
- run:
|
||||
name: Build all windows CI targets
|
||||
command: yarn bazel build --build_tag_filters=-ivy-only //packages/compiler-cli/...
|
||||
command: bazel build --build_tag_filters=-ivy-only //packages/compiler-cli/...
|
||||
no_output_timeout: 15m
|
||||
- run:
|
||||
name: Test all windows CI targets
|
||||
command: yarn bazel test --test_tag_filters="-ivy-only,-browser:chromium-local" //packages/compiler-cli/...
|
||||
command: bazel test --test_tag_filters="-ivy-only,-browser:chromium-local" //packages/compiler-cli/...
|
||||
no_output_timeout: 15m
|
||||
|
||||
test_ivy_aot_win:
|
||||
@@ -811,11 +816,11 @@ jobs:
|
||||
- setup_win
|
||||
- run:
|
||||
name: Build all windows CI targets
|
||||
command: yarn bazel build --config=ivy --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot //packages/compiler-cli/...
|
||||
command: bazel build --config=ivy --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot //packages/compiler-cli/...
|
||||
no_output_timeout: 15m
|
||||
- run:
|
||||
name: Test all windows CI targets
|
||||
command: yarn bazel test --config=ivy --test_tag_filters="-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //packages/localize/...
|
||||
command: bazel test --config=ivy --test_tag_filters="-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //packages/localize/...
|
||||
no_output_timeout: 15m
|
||||
# Save dependencies to use on subsequent runs.
|
||||
- save_cache:
|
||||
|
||||
@@ -12,6 +12,7 @@ body:
|
||||
- common
|
||||
- compiler-cli
|
||||
- compiler
|
||||
- core
|
||||
- elements
|
||||
- forms
|
||||
- language-service
|
||||
|
||||
@@ -12,6 +12,7 @@ body:
|
||||
- common
|
||||
- compiler-cli
|
||||
- compiler
|
||||
- core
|
||||
- elements
|
||||
- forms
|
||||
- language-service
|
||||
|
||||
@@ -38,7 +38,6 @@ merge:
|
||||
- 'modules/benchmarks/**'
|
||||
- 'modules/system.d.ts'
|
||||
- 'packages/**'
|
||||
- 'dev-infra/benchmark/driver-utilities/**'
|
||||
# list of patterns to ignore for the files changed by the PR
|
||||
exclude:
|
||||
- 'packages/*'
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
name: DevInfra
|
||||
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [opened, synchronize, reopened]
|
||||
|
||||
jobs:
|
||||
breaking-changes-label:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: angular/dev-infra/github-actions/breaking-changes-label@861dc90572784e714aeaa9dfb20ceebeb57cdb07
|
||||
with:
|
||||
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
|
||||
+1
-2
@@ -106,8 +106,7 @@ Fixes #<issue number>
|
||||
# │ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
|
||||
# │ elements|forms|http|language-service|localize|platform-browser|
|
||||
# │ platform-browser-dynamic|platform-server|router|service-worker|
|
||||
# │ upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
|
||||
# │ ngcc|ve
|
||||
# │ upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve
|
||||
# │ https://github.com/angular/angular/blob/master/CONTRIBUTING.md#scope
|
||||
# │
|
||||
# └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {CaretakerConfig} from '../dev-infra/caretaker/config';
|
||||
import {CaretakerConfig} from '@angular/dev-infra-private/ng-dev/caretaker/config';
|
||||
|
||||
/** The configuration for `ng-dev caretaker` commands. */
|
||||
export const caretaker: CaretakerConfig = {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {CommitMessageConfig} from '../dev-infra/commit-message/config';
|
||||
import {CommitMessageConfig} from '@angular/dev-infra-private/ng-dev/commit-message/config';
|
||||
|
||||
/**
|
||||
* The configuration for `ng-dev commit-message` commands.
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import {FormatConfig} from '../dev-infra/format/config';
|
||||
import {FormatConfig} from '@angular/dev-infra-private/ng-dev/format/config';
|
||||
|
||||
/**
|
||||
* Configuration for the `ng-dev format` command.
|
||||
|
||||
+3
-3
@@ -1,11 +1,11 @@
|
||||
import {GithubConfig} from '../dev-infra/utils/config';
|
||||
import {GithubConfig} from '@angular/dev-infra-private/ng-dev/utils/config';
|
||||
|
||||
/**
|
||||
* Github configuration for the `ng-dev` command. This repository is used as
|
||||
* remote for the merge script and other utilities like `ng-dev pr rebase`.
|
||||
*/
|
||||
|
||||
export const github: GithubConfig = {
|
||||
owner: 'angular',
|
||||
name: 'angular'
|
||||
name: 'angular',
|
||||
mainBranchName: 'master',
|
||||
};
|
||||
|
||||
+18
-27
@@ -1,33 +1,24 @@
|
||||
import {DevInfraMergeConfig} from '../dev-infra/pr/merge/config';
|
||||
import {getDefaultTargetLabelConfiguration} from '../dev-infra/pr/merge/defaults';
|
||||
import {github} from './github';
|
||||
import {release} from './release';
|
||||
import {MergeConfig} from '@angular/dev-infra-private/ng-dev/pr/merge/config';
|
||||
|
||||
/**
|
||||
* Configuration for the merge tool in `ng-dev`. This sets up the labels which
|
||||
* are respected by the merge script (e.g. the target labels).
|
||||
*/
|
||||
export const merge: DevInfraMergeConfig['merge'] = async api => {
|
||||
return {
|
||||
githubApiMerge: false,
|
||||
claSignedLabel: 'cla: yes',
|
||||
mergeReadyLabel: /^action: merge(-assistance)?/,
|
||||
caretakerNoteLabel: /^(action: merge-assistance)|(PullApprove: disable)/,
|
||||
commitMessageFixupLabel: 'commit message fixup',
|
||||
breakingChangeLabel: 'flag: breaking change',
|
||||
// We can pick any of the NPM packages as we are in a monorepo where all packages are
|
||||
// published together with the same version and branching.
|
||||
labels: await getDefaultTargetLabelConfiguration(api, github, release),
|
||||
requiredBaseCommits: {
|
||||
// PRs that target either `master` or the patch branch, need to be rebased
|
||||
// on top of the latest commit message validation fix.
|
||||
// These SHAs are the commits that update the required license text in the header.
|
||||
'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
|
||||
'10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
|
||||
},
|
||||
// `dev-infra` and `docs-infra` are not affecting the public NPM packages. Similarly,
|
||||
// the `bazel` package is not considered part of the public API so that features
|
||||
// can land in patch branches.
|
||||
targetLabelExemptScopes: ['dev-infra', 'docs-infra', 'bazel']
|
||||
};
|
||||
export const merge: MergeConfig = {
|
||||
githubApiMerge: false,
|
||||
claSignedLabel: 'cla: yes',
|
||||
mergeReadyLabel: /^action: merge(-assistance)?/,
|
||||
caretakerNoteLabel: /^(action: merge-assistance)|(PullApprove: disable)/,
|
||||
commitMessageFixupLabel: 'commit message fixup',
|
||||
requiredBaseCommits: {
|
||||
// PRs that target either `master` or the patch branch, need to be rebased
|
||||
// on top of the latest commit message validation fix.
|
||||
// These SHAs are the commits that update the required license text in the header.
|
||||
'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
|
||||
'10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
|
||||
},
|
||||
// `dev-infra` and `docs-infra` are not affecting the public NPM packages. Similarly,
|
||||
// the `bazel` package is not considered part of the public API so that features
|
||||
// can land in patch branches.
|
||||
targetLabelExemptScopes: ['dev-infra', 'docs-infra', 'bazel']
|
||||
};
|
||||
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
import {ReleaseConfig} from '@angular/dev-infra-private/ng-dev/release/config';
|
||||
import {join} from 'path';
|
||||
import {ReleaseConfig} from '../dev-infra/release/config';
|
||||
|
||||
/** Configuration for the `ng-dev release` command. */
|
||||
export const release: ReleaseConfig = {
|
||||
@@ -22,7 +22,7 @@ export const release: ReleaseConfig = {
|
||||
'@angular/service-worker',
|
||||
'@angular/upgrade',
|
||||
],
|
||||
buildPackages: async (stampForRelease: boolean) => {
|
||||
buildPackages: async (stampForRelease: boolean|undefined) => {
|
||||
// The buildTargetPackages function is loaded at runtime as the loading the script causes an
|
||||
// invocation of bazel.
|
||||
const {buildTargetPackages} = require(join(__dirname, '../scripts/build/package-builder'));
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"target": "es2015",
|
||||
"module": "commonjs",
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true,
|
||||
"types": []
|
||||
},
|
||||
}
|
||||
+1
-6
@@ -190,7 +190,6 @@ groups:
|
||||
- JiaLiPassion # Jia Li
|
||||
- JoostK # Joost Koehoorn
|
||||
- josephperrott # Joey Perrott
|
||||
- kyliau # Keen Yee Liau
|
||||
- manughub # Manu Murthy
|
||||
- mgechev # Minko Gechev
|
||||
- mmalerba # Miles Malerba
|
||||
@@ -570,7 +569,6 @@ groups:
|
||||
users:
|
||||
- alan-agius4
|
||||
- alxhub
|
||||
- kyliau
|
||||
|
||||
# =========================================================
|
||||
# Framework: Router
|
||||
@@ -763,7 +761,6 @@ groups:
|
||||
users:
|
||||
- IgorMinar
|
||||
- josephperrott
|
||||
- kyliau
|
||||
|
||||
# =========================================================
|
||||
# Language Service
|
||||
@@ -781,7 +778,6 @@ groups:
|
||||
])
|
||||
reviewers:
|
||||
users:
|
||||
- kyliau
|
||||
- atscott
|
||||
- zarend
|
||||
|
||||
@@ -1021,7 +1017,7 @@ groups:
|
||||
users:
|
||||
- alan-agius4
|
||||
- clydin
|
||||
- kyliau
|
||||
- dgp1130
|
||||
- IgorMinar
|
||||
reviews:
|
||||
request: -1 # request reviews from everyone
|
||||
@@ -1155,7 +1151,6 @@ groups:
|
||||
'.ng-dev/**',
|
||||
'.vscode/**',
|
||||
'.yarn/**',
|
||||
'dev-infra/**',
|
||||
'docs/*.md',
|
||||
'docs/images/**',
|
||||
'goldens/*',
|
||||
|
||||
+105
@@ -1,3 +1,108 @@
|
||||
<a name="12.2.5"></a>
|
||||
# 12.2.5 (2021-09-08)
|
||||
### router
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [a0bd6e90f9](https://github.com/angular/angular/commit/a0bd6e90f987377320b3b337d8c3a33235658e9a) | fix: add more context to `Unhandled Navigation Error` ([#43291](https://github.com/angular/angular/pull/43291)) |
|
||||
## Special Thanks:
|
||||
Alan Agius, Charles Barnes, Enea Jahollari, George Kalpakas, Ikko Ashimine, Paul Gschwendtner, Pete Bacon Darwin, William Sedlacek and dario-piotrowicz
|
||||
|
||||
|
||||
<a name="12.2.4"></a>
|
||||
# 12.2.4 (2021-09-01)
|
||||
### compiler-cli
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [8233906be2](https://github.com/angular/angular/commit/8233906be25e19da6d8115094616d3e4b5e36fea) | fix: Emit type annotations for synthesized decorator fields ([#43021](https://github.com/angular/angular/pull/43021)) |
|
||||
## Special Thanks:
|
||||
Andrew Scott, Daniel Trevino, George Kalpakas, Joey Perrott, Kristiyan Kostadinov, nickreid and segunb
|
||||
|
||||
|
||||
<a name="12.2.3"></a>
|
||||
# 12.2.3 (2021-08-25)
|
||||
### service-worker
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [fc7f92159d](https://github.com/angular/angular/commit/fc7f92159df16e894d9909cfc8969ed4b7d9924a) | fix: NPE if onActionClick is undefined ([#43210](https://github.com/angular/angular/pull/43210)) |
|
||||
## Special Thanks:
|
||||
Daniel Trevino, Erik Slack, George Kalpakas, dario-piotrowicz and shlasouski
|
||||
|
||||
|
||||
<a name="12.2.2"></a>
|
||||
# 12.2.2 (2021-08-18)
|
||||
### animations
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [bb6555979d](https://github.com/angular/angular/commit/bb6555979dd02e706f7e98022b9c37a4f54db1ba) | fix: add pure annotations to static property initializers ([#43064](https://github.com/angular/angular/pull/43064)) |
|
||||
### core
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [738b23347e](https://github.com/angular/angular/commit/738b23347e5eeadfa0321d1429537837dba5e4c1) | fix: add pure annotations to static property initializers ([#43064](https://github.com/angular/angular/pull/43064)) |
|
||||
### platform-browser
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [535837e617](https://github.com/angular/angular/commit/535837e617a0434f8e7bd9071cc4d8c27fd9f373) | perf: avoid intermediate arrays in server transition ([#43145](https://github.com/angular/angular/pull/43145)) |
|
||||
### router
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [6449590ec8](https://github.com/angular/angular/commit/6449590ec81eff0873af911fb65679b5a77db27b) | fix: eagerly update internal state on browser-triggered navigations ([#43102](https://github.com/angular/angular/pull/43102)) |
|
||||
## Special Thanks:
|
||||
Andrew Scott, Aristeidis Bampakos, Charles Lyding, Edoardo Dusi, George Kalpakas, Joe Martin (Crowdstaffing), Joey Perrott, Kirk Larkin, Kristiyan Kostadinov, Pete Bacon Darwin, TIffany Davis, Theoklitos Bampouris, ali, dario-piotrowicz and pichuser
|
||||
|
||||
|
||||
<a name="12.2.1"></a>
|
||||
# 12.2.1 (2021-08-11)
|
||||
### router
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [dd3abdb9d9](https://github.com/angular/angular/commit/dd3abdb9d9b2c4363fb1f468a05bf449b55f55a5) | fix(router): ensure check for match options is compatible with property renaming ([#43086](https://github.com/angular/angular/pull/43086)) |
|
||||
## Special Thanks:
|
||||
Amadou Sall, Andrew Kushnir, Andrew Scott, Daniel Trevino, Erik Slack, Fabien BERNARD, George Kalpakas, Jeroen van Warmerdam, Joey Perrott, Tim Gates and Vugar_Abdullayev
|
||||
|
||||
|
||||
<a name="12.2.0"></a>
|
||||
# 12.2.0 (2021-08-04)
|
||||
### core
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [bd7f0d8b70](https://github.com/angular/angular/commit/bd7f0d8b70150a7e4e7550f4380a2e731cf2b942) | fix(core): incorrect error reported when trying to re-create view which had an error during creation ([#43005](https://github.com/angular/angular/pull/43005)) |
|
||||
### language-service
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [aace1e71d8](https://github.com/angular/angular/commit/aace1e71d8fb5e1e52fcd86e2a26892d1016c43e) | fix(language-service): global autocomplete doesn't work when the user tries to modify the symbol ([#42923](https://github.com/angular/angular/pull/42923)) |
|
||||
## Special Thanks:
|
||||
Alex Rickabaugh, Joe Martin, Joey Perrott, Kristiyan Kostadinov, Nichola Alkhouri, Paul Gschwendtner, Pete Bacon Darwin, atscott, dario-piotrowicz and ivanwonder
|
||||
|
||||
|
||||
<a name="12.2.0-rc.0"></a>
|
||||
# 12.2.0-rc.0 (2021-07-28)
|
||||
### compiler-cli
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [ed9cfb674f](https://github.com/angular/angular/commit/ed9cfb674f8e52b416ccdaf9aa9c46955b8448f5) | fix(compiler-cli): use correct module resolution context for absolute imports in .d.ts files ([#42879](https://github.com/angular/angular/pull/42879)) |
|
||||
| [5fb23eccea](https://github.com/angular/angular/commit/5fb23ecceaccf0629308dd50210b65f67d51f024) | perf(compiler-cli): skip analysis in incremental builds for files without Angular behavior ([#42562](https://github.com/angular/angular/pull/42562)) |
|
||||
### core
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [eefe1682e8](https://github.com/angular/angular/commit/eefe1682e8099b73b6e50bb227b5a7f63105c63d) | fix(core): correctly handle `null` or `undefined` in `ErrorHandler#handleError()` ([#42881](https://github.com/angular/angular/pull/42881)) |
|
||||
### forms
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [1d9d02696e](https://github.com/angular/angular/commit/1d9d02696eadbee2c2f719e432efca22f1e494e9) | feat(forms): add hasValidators, addValidators, and removeValidators methods (for both sync and async) ([#42838](https://github.com/angular/angular/pull/42838)) |
|
||||
| [a502279592](https://github.com/angular/angular/commit/a50227959222f39884aac284544d1626aee5ca64) | feat(forms): allow minLength/maxLength validator to be bound to `null` ([#42565](https://github.com/angular/angular/pull/42565)) |
|
||||
### language-service
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [7c35ca0e00](https://github.com/angular/angular/commit/7c35ca0e0030f2ded12ddca9092e31f510cebeb1) | feat(language-service): support autocomplete string literal union types in templates ([#42729](https://github.com/angular/angular/pull/42729)) |
|
||||
### router
|
||||
| Commit | Description |
|
||||
| -- | -- |
|
||||
| [0d81b007e4](https://github.com/angular/angular/commit/0d81b007e48a0ac801d2614601fb8180a3517865) | fix(router): add missing outlet events to RouterOutletContract ([#42431](https://github.com/angular/angular/pull/42431)) |
|
||||
| [dbae00195e](https://github.com/angular/angular/commit/dbae00195e114ac8b967201283962a7e2c0581b4) | feat(router): ability to provide custom route reuse strategy via DI for `RouterTestingModule` ([#42434](https://github.com/angular/angular/pull/42434)) |
|
||||
## Special Thanks:
|
||||
Andrew Scott, Daniel Trevino, Dmitrij Kuba, Dylan Hunn, George Kalpakas, Joey Perrott, JoostK, Paul Gschwendtner, Pete Bacon Darwin, Steven Masala, Teri Glover, Vladyslav, Yuvaraj, codebriefcase, iRealNirmal and ivanwonder
|
||||
|
||||
|
||||
<a name="12.1.4"></a>
|
||||
# 12.1.4 (2021-07-28)
|
||||
### compiler-cli
|
||||
|
||||
+2
-3
@@ -248,8 +248,7 @@ Any line of the commit message cannot be longer than 100 characters.
|
||||
│ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
|
||||
│ elements|forms|http|language-service|localize|platform-browser|
|
||||
│ platform-browser-dynamic|platform-server|router|service-worker|
|
||||
│ upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
|
||||
│ ngcc|ve
|
||||
│ upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve
|
||||
│
|
||||
└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
|
||||
```
|
||||
@@ -302,7 +301,7 @@ There are currently a few exceptions to the "use package name" rule:
|
||||
|
||||
* `changelog`: used for updating the release notes in CHANGELOG.md
|
||||
|
||||
* `dev-infra`: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra
|
||||
* `dev-infra`: used for dev-infra related changes within the directories /scripts and /tools
|
||||
|
||||
* `docs-infra`: used for docs-app (angular.io) related changes within the /aio directory of the repo
|
||||
|
||||
|
||||
@@ -8,8 +8,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
|
||||
# Fetch rules_nodejs so we can install our npm dependencies
|
||||
http_archive(
|
||||
name = "build_bazel_rules_nodejs",
|
||||
sha256 = "4681ca88d512d57196d064d1441549080d8d17d119174a1229d1717a16a4a489",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.0.0-beta.1/rules_nodejs-4.0.0-beta.1.tar.gz"],
|
||||
sha256 = "8a7c981217239085f78acc9898a1f7ba99af887c1996ceb3b4504655383a2c3c",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.0.0/rules_nodejs-4.0.0.tar.gz"],
|
||||
)
|
||||
|
||||
# Check the rules_nodejs version and download npm dependencies
|
||||
@@ -44,7 +44,7 @@ load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories"
|
||||
|
||||
web_test_repositories()
|
||||
|
||||
load("//dev-infra/bazel/browsers:browser_repositories.bzl", "browser_repositories")
|
||||
load("@npm//@angular/dev-infra-private/bazel/browsers:browser_repositories.bzl", "browser_repositories")
|
||||
|
||||
browser_repositories()
|
||||
|
||||
|
||||
@@ -13,11 +13,11 @@ import { CountdownTimerComponent } from './countdown-timer.component';
|
||||
@Component({
|
||||
selector: 'app-countdown-parent-lv',
|
||||
template: `
|
||||
<h3>Countdown to Liftoff (via local variable)</h3>
|
||||
<button (click)="timer.start()">Start</button>
|
||||
<button (click)="timer.stop()">Stop</button>
|
||||
<div class="seconds">{{timer.seconds}}</div>
|
||||
<app-countdown-timer #timer></app-countdown-timer>
|
||||
<h3>Countdown to Liftoff (via local variable)</h3>
|
||||
<button (click)="timer.start()">Start</button>
|
||||
<button (click)="timer.stop()">Stop</button>
|
||||
<div class="seconds">{{timer.seconds}}</div>
|
||||
<app-countdown-timer #timer></app-countdown-timer>
|
||||
`,
|
||||
styleUrls: ['../assets/demo.css']
|
||||
})
|
||||
@@ -29,11 +29,11 @@ export class CountdownLocalVarParentComponent { }
|
||||
@Component({
|
||||
selector: 'app-countdown-parent-vc',
|
||||
template: `
|
||||
<h3>Countdown to Liftoff (via ViewChild)</h3>
|
||||
<button (click)="start()">Start</button>
|
||||
<button (click)="stop()">Stop</button>
|
||||
<div class="seconds">{{ seconds() }}</div>
|
||||
<app-countdown-timer></app-countdown-timer>
|
||||
<h3>Countdown to Liftoff (via ViewChild)</h3>
|
||||
<button (click)="start()">Start</button>
|
||||
<button (click)="stop()">Stop</button>
|
||||
<div class="seconds">{{ seconds() }}</div>
|
||||
<app-countdown-timer></app-countdown-timer>
|
||||
`,
|
||||
styleUrls: ['../assets/demo.css']
|
||||
})
|
||||
|
||||
@@ -7,7 +7,9 @@ import { HEROES } from './hero';
|
||||
selector: 'app-hero-parent',
|
||||
template: `
|
||||
<h2>{{master}} controls {{heroes.length}} heroes</h2>
|
||||
<app-hero-child *ngFor="let hero of heroes"
|
||||
|
||||
<app-hero-child
|
||||
*ngFor="let hero of heroes"
|
||||
[hero]="hero"
|
||||
[master]="master">
|
||||
</app-hero-child>
|
||||
|
||||
@@ -8,9 +8,12 @@ import { MissionService } from './mission.service';
|
||||
template: `
|
||||
<h2>Mission Control</h2>
|
||||
<button (click)="announce()">Announce mission</button>
|
||||
<app-astronaut *ngFor="let astronaut of astronauts"
|
||||
|
||||
<app-astronaut
|
||||
*ngFor="let astronaut of astronauts"
|
||||
[astronaut]="astronaut">
|
||||
</app-astronaut>
|
||||
|
||||
<h3>History</h3>
|
||||
<ul>
|
||||
<li *ngFor="let event of history">{{event}}</li>
|
||||
|
||||
@@ -4,8 +4,9 @@ import { Component } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'app-name-parent',
|
||||
template: `
|
||||
<h2>Master controls {{names.length}} names</h2>
|
||||
<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
|
||||
<h2>Master controls {{names.length}} names</h2>
|
||||
|
||||
<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
|
||||
`
|
||||
})
|
||||
export class NameParentComponent {
|
||||
|
||||
@@ -6,7 +6,9 @@ import { Component } from '@angular/core';
|
||||
template: `
|
||||
<h2>Should mankind colonize the Universe?</h2>
|
||||
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
|
||||
<app-voter *ngFor="let voter of voters"
|
||||
|
||||
<app-voter
|
||||
*ngFor="let voter of voters"
|
||||
[name]="voter"
|
||||
(voted)="onVoted($event)">
|
||||
</app-voter>
|
||||
|
||||
@@ -25,7 +25,7 @@ describe('AppComponent', () => {
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain('component-overview app is running!');
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('component-overview app is running!');
|
||||
});
|
||||
});
|
||||
|
||||
+4
-4
@@ -4,12 +4,12 @@ import { Component } from '@angular/core';
|
||||
// #docregion templatebacktick
|
||||
@Component({
|
||||
selector: 'app-component-overview',
|
||||
template: `<h1>Hello World!</h1>
|
||||
<p>This template definition spans
|
||||
multiple lines.</p>`
|
||||
template: `
|
||||
<h1>Hello World!</h1>
|
||||
<p>This template definition spans multiple lines.</p>
|
||||
`
|
||||
})
|
||||
// #enddocregion templatebacktick
|
||||
|
||||
export class ComponentOverviewComponent {
|
||||
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<!-- #docregion ngif -->
|
||||
<div *ngIf="expanded" [id]="contentId">
|
||||
<!-- #docregion ng-container -->
|
||||
<ng-container [ngTemplateOutlet]="content.templateRef"> </ng-container>
|
||||
<ng-container [ngTemplateOutlet]="content.templateRef"></ng-container>
|
||||
<!-- #enddocregion ng-container-->
|
||||
</div>
|
||||
<!-- #enddocregion ngif -->
|
||||
<!-- #enddocregion ngif -->
|
||||
|
||||
+3
-3
@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'app-zippy-basic',
|
||||
template: `
|
||||
<h2>Single-slot content projection</h2>
|
||||
<ng-content></ng-content>
|
||||
`
|
||||
<h2>Single-slot content projection</h2>
|
||||
<ng-content></ng-content>
|
||||
`
|
||||
})
|
||||
export class ZippyBasicComponent {}
|
||||
|
||||
+8
-6
@@ -3,11 +3,13 @@ import { Component } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'app-zippy-multislot',
|
||||
template: `
|
||||
<h2>Multi-slot content projection</h2>
|
||||
Default:
|
||||
<ng-content></ng-content>
|
||||
Question:
|
||||
<ng-content select="[question]"></ng-content>
|
||||
`
|
||||
<h2>Multi-slot content projection</h2>
|
||||
|
||||
Default:
|
||||
<ng-content></ng-content>
|
||||
|
||||
Question:
|
||||
<ng-content select="[question]"></ng-content>
|
||||
`
|
||||
})
|
||||
export class ZippyMultislotComponent {}
|
||||
|
||||
+8
-6
@@ -3,11 +3,13 @@ import { Component } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'app-zippy-ngprojectas',
|
||||
template: `
|
||||
<h2>Content projection with ngProjectAs</h2>
|
||||
Default:
|
||||
<ng-content></ng-content>
|
||||
Question:
|
||||
<ng-content select="[question]"></ng-content>
|
||||
`
|
||||
<h2>Content projection with ngProjectAs</h2>
|
||||
|
||||
Default:
|
||||
<ng-content></ng-content>
|
||||
|
||||
Question:
|
||||
<ng-content select="[question]"></ng-content>
|
||||
`
|
||||
})
|
||||
export class ZippyNgprojectasComponent {}
|
||||
|
||||
@@ -9,19 +9,22 @@ import { AdComponent } from './ad.component';
|
||||
selector: 'app-ad-banner',
|
||||
// #docregion ad-host
|
||||
template: `
|
||||
<div class="ad-banner-example">
|
||||
<h3>Advertisements</h3>
|
||||
<ng-template adHost></ng-template>
|
||||
</div>
|
||||
`
|
||||
<div class="ad-banner-example">
|
||||
<h3>Advertisements</h3>
|
||||
<ng-template adHost></ng-template>
|
||||
</div>
|
||||
`
|
||||
// #enddocregion ad-host
|
||||
})
|
||||
// #docregion class
|
||||
export class AdBannerComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Input() ads: AdItem[] = [];
|
||||
|
||||
currentAdIndex = -1;
|
||||
|
||||
@ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
|
||||
interval: any;
|
||||
interval: number | undefined;
|
||||
|
||||
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
|
||||
|
||||
|
||||
@@ -9,15 +9,22 @@ import { AdItem } from './ad-item';
|
||||
export class AdService {
|
||||
getAds() {
|
||||
return [
|
||||
new AdItem(HeroProfileComponent, {name: 'Bombasto', bio: 'Brave as they come'}),
|
||||
|
||||
new AdItem(HeroProfileComponent, {name: 'Dr IQ', bio: 'Smart as they come'}),
|
||||
|
||||
new AdItem(HeroJobAdComponent, {headline: 'Hiring for several positions',
|
||||
body: 'Submit your resume today!'}),
|
||||
|
||||
new AdItem(HeroJobAdComponent, {headline: 'Openings in all departments',
|
||||
body: 'Apply today'}),
|
||||
new AdItem(
|
||||
HeroProfileComponent,
|
||||
{ name: 'Bombasto', bio: 'Brave as they come' }
|
||||
),
|
||||
new AdItem(
|
||||
HeroProfileComponent,
|
||||
{ name: 'Dr IQ', bio: 'Smart as they come' }
|
||||
),
|
||||
new AdItem(
|
||||
HeroJobAdComponent,
|
||||
{ headline: 'Hiring for several positions', body: 'Submit your resume today!' }
|
||||
),
|
||||
new AdItem(
|
||||
HeroJobAdComponent,
|
||||
{ headline: 'Openings in all departments', body: 'Apply today' }
|
||||
)
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,16 +9,19 @@ import { AdService } from './ad.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
providers: [AdService],
|
||||
declarations: [ AppComponent,
|
||||
AdBannerComponent,
|
||||
HeroJobAdComponent,
|
||||
HeroProfileComponent,
|
||||
AdDirective ],
|
||||
entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
|
||||
providers: [ AdService ],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AdBannerComponent,
|
||||
HeroJobAdComponent,
|
||||
HeroProfileComponent,
|
||||
AdDirective
|
||||
],
|
||||
entryComponents: [
|
||||
HeroJobAdComponent,
|
||||
HeroProfileComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {
|
||||
constructor() {}
|
||||
}
|
||||
export class AppModule { }
|
||||
|
||||
|
||||
@@ -7,13 +7,11 @@ import { AdComponent } from './ad.component';
|
||||
template: `
|
||||
<div class="job-ad">
|
||||
<h4>{{data.headline}}</h4>
|
||||
|
||||
{{data.body}}
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class HeroJobAdComponent implements AdComponent {
|
||||
@Input() data: any;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"tests": [
|
||||
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
|
||||
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ describe('AppComponent', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Forms Overview');
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Forms Overview');
|
||||
}));
|
||||
});
|
||||
|
||||
@@ -5,5 +5,4 @@ import { Component } from '@angular/core';
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
}
|
||||
export class AppComponent { }
|
||||
|
||||
@@ -10,14 +10,17 @@ import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { AppComponent } from './app.component';
|
||||
import { TopBarComponent } from './top-bar/top-bar.component';
|
||||
import { ProductListComponent } from './product-list/product-list.component';
|
||||
// #docregion declare-product-alerts
|
||||
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
|
||||
// #enddocregion declare-product-alerts
|
||||
import { ProductDetailsComponent } from './product-details/product-details.component';
|
||||
import { CartComponent } from './cart/cart.component';
|
||||
import { ShippingComponent } from './shipping/shipping.component';
|
||||
|
||||
// #docregion product-details-route, http-client-module, shipping-route, cart-route
|
||||
// #docregion product-details-route, http-client-module, shipping-route, cart-route, declare-product-alerts
|
||||
|
||||
@NgModule({
|
||||
// #enddocregion declare-product-alerts
|
||||
imports: [
|
||||
BrowserModule,
|
||||
// #enddocregion product-details-route, cart-route
|
||||
@@ -36,17 +39,20 @@ import { ShippingComponent } from './shipping/shipping.component';
|
||||
])
|
||||
],
|
||||
// #enddocregion product-details-route, cart-route
|
||||
// #docregion declare-product-alerts
|
||||
declarations: [
|
||||
AppComponent,
|
||||
TopBarComponent,
|
||||
ProductListComponent,
|
||||
ProductAlertsComponent,
|
||||
// #enddocregion declare-product-alerts
|
||||
ProductDetailsComponent,
|
||||
CartComponent,
|
||||
// #enddocregion http-client-module
|
||||
ShippingComponent
|
||||
// #docregion http-client-module
|
||||
// #docregion declare-product-alerts, http-client-module
|
||||
],
|
||||
// #enddocregion declare-product-alerts
|
||||
bootstrap: [
|
||||
AppComponent
|
||||
]
|
||||
|
||||
@@ -11,6 +11,7 @@ import { CartService } from '../cart.service';
|
||||
})
|
||||
// #docregion inject-cart, items
|
||||
export class CartComponent {
|
||||
|
||||
// #enddocregion inject-cart
|
||||
items = this.cartService.getItems();
|
||||
// #docregion inject-cart
|
||||
|
||||
@@ -7,6 +7,7 @@ import { CartService } from '../cart.service';
|
||||
styleUrls: ['./cart.component.css']
|
||||
})
|
||||
export class CartComponent implements OnInit {
|
||||
|
||||
items;
|
||||
|
||||
constructor(
|
||||
@@ -16,4 +17,5 @@ export class CartComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
this.items = this.cartService.getItems();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -13,17 +13,20 @@ import { CartService } from '../cart.service';
|
||||
})
|
||||
// #docregion inject-form-builder, checkout-form-group
|
||||
export class CartComponent {
|
||||
|
||||
// #enddocregion inject-form-builder
|
||||
items = this.cartService.getItems();
|
||||
|
||||
checkoutForm = this.formBuilder.group({
|
||||
name: '',
|
||||
address: ''
|
||||
});
|
||||
|
||||
// #docregion inject-form-builder
|
||||
constructor(
|
||||
private cartService: CartService,
|
||||
private formBuilder: FormBuilder,
|
||||
) {}
|
||||
) {}
|
||||
// #enddocregion inject-form-builder, checkout-form-group
|
||||
|
||||
onSubmit(): void {
|
||||
|
||||
+1
@@ -14,6 +14,7 @@ import { Product } from '../products';
|
||||
})
|
||||
// #docregion input-decorator
|
||||
export class ProductAlertsComponent implements OnInit {
|
||||
|
||||
// #enddocregion as-generated
|
||||
@Input() product!: Product;
|
||||
// #docregion as-generated
|
||||
|
||||
+1
-1
@@ -13,6 +13,6 @@ import { Product } from '../products';
|
||||
})
|
||||
// #docregion input-output
|
||||
export class ProductAlertsComponent {
|
||||
@Input() product: Product|undefined;
|
||||
@Input() product: Product | undefined;
|
||||
@Output() notify = new EventEmitter();
|
||||
}
|
||||
|
||||
+3
-4
@@ -13,12 +13,11 @@ import { Product, products } from '../products';
|
||||
})
|
||||
// #docregion props-methods, product-prop
|
||||
export class ProductDetailsComponent implements OnInit {
|
||||
product: Product|undefined;
|
||||
|
||||
product: Product | undefined;
|
||||
// #enddocregion product-prop
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
) { }
|
||||
constructor(private route: ActivatedRoute) { }
|
||||
|
||||
// #enddocregion props-methods
|
||||
// #docregion get-product
|
||||
|
||||
+1
-2
@@ -6,8 +6,7 @@
|
||||
<h3>{{ product.name }}</h3>
|
||||
<h4>{{ product.price | currency }}</h4>
|
||||
<p>{{ product.description }}</p>
|
||||
|
||||
<!-- #enddocregion details -->
|
||||
<button (click)="addToCart(product)">Buy</button>
|
||||
<!-- #docregion details -->
|
||||
<!-- #docregion details -->
|
||||
</div>
|
||||
|
||||
+2
-1
@@ -14,8 +14,9 @@ import { CartService } from '../cart.service';
|
||||
})
|
||||
// #docregion inject-cart-service, add-to-cart
|
||||
export class ProductDetailsComponent implements OnInit {
|
||||
|
||||
// #enddocregion add-to-cart, inject-cart-service
|
||||
product: Product|undefined;
|
||||
product: Product | undefined;
|
||||
|
||||
// #docregion inject-cart-service
|
||||
constructor(
|
||||
|
||||
@@ -7,6 +7,7 @@ import { products } from '../products';
|
||||
styleUrls: ['./product-list.component.css']
|
||||
})
|
||||
export class ProductListComponent {
|
||||
|
||||
products = products;
|
||||
|
||||
share() {
|
||||
|
||||
+3
-1
@@ -4,7 +4,9 @@
|
||||
<div *ngFor="let product of products">
|
||||
|
||||
<h3>
|
||||
<a [title]="product.name + ' details'" [routerLink]="['/products', product.id]">
|
||||
<a
|
||||
[title]="product.name + ' details'"
|
||||
[routerLink]="['/products', product.id]">
|
||||
{{ product.name }}
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
@@ -9,6 +9,7 @@ import { products } from '../products';
|
||||
})
|
||||
// #docregion on-notify
|
||||
export class ProductListComponent {
|
||||
|
||||
products = products;
|
||||
|
||||
share() {
|
||||
|
||||
@@ -12,14 +12,12 @@ import { CartService } from '../cart.service';
|
||||
})
|
||||
// #docregion props
|
||||
export class ShippingComponent {
|
||||
|
||||
shippingCosts = this.cartService.getShippingPrices();
|
||||
// #enddocregion props
|
||||
|
||||
|
||||
|
||||
// #docregion inject-cart-service
|
||||
constructor(private cartService: CartService) {
|
||||
}
|
||||
constructor(private cartService: CartService) { }
|
||||
// #enddocregion inject-cart-service
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<a [routerLink]="['/']">
|
||||
<a routerLink="/">
|
||||
<h1>My Store</h1>
|
||||
</a>
|
||||
|
||||
|
||||
@@ -5,6 +5,4 @@ import { Component } from '@angular/core';
|
||||
templateUrl: './top-bar.component.html',
|
||||
styleUrls: ['./top-bar.component.css']
|
||||
})
|
||||
export class TopBarComponent {
|
||||
|
||||
}
|
||||
export class TopBarComponent { }
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
"projectType": "testing",
|
||||
"tests": [
|
||||
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
|
||||
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<p>Save for later item: {{input1}}</p>
|
||||
<button (click)="saveIt()"> Save for later</button>
|
||||
|
||||
|
||||
<p>Item for wishlist: {{input2}}</p>
|
||||
<button (click)="wishForIt()"> Add to wishlist</button>
|
||||
<p>Item for wishlist: {{input2}}</p>
|
||||
<button (click)="wishForIt()"> Add to wishlist</button>
|
||||
|
||||
|
||||
@@ -21,12 +21,12 @@ export class AliasingComponent {
|
||||
|
||||
|
||||
saveIt() {
|
||||
console.warn('Child says: emiting outputEvent1 with', this.input1);
|
||||
console.warn('Child says: emitting outputEvent1 with', this.input1);
|
||||
this.outputEvent1.emit(this.input1);
|
||||
}
|
||||
|
||||
wishForIt() {
|
||||
console.warn('Child says: emiting outputEvent2', this.input2);
|
||||
console.warn('Child says: emitting outputEvent2', this.input2);
|
||||
this.outputEvent2.emit(this.input2);
|
||||
}
|
||||
|
||||
|
||||
@@ -20,7 +20,10 @@
|
||||
<p>Open the console to see the EventEmitter at work when you click Delete.</p>
|
||||
|
||||
<!-- #docregion together -->
|
||||
<app-input-output [item]="currentItem" (deleteRequest)="crossOffItem($event)"></app-input-output>
|
||||
<app-input-output
|
||||
[item]="currentItem"
|
||||
(deleteRequest)="crossOffItem($event)">
|
||||
</app-input-output>
|
||||
<!-- #enddocregion together -->
|
||||
|
||||
<hr>
|
||||
@@ -28,7 +31,10 @@
|
||||
<h2>Input and Output in the component class metadata</h2>
|
||||
<p>Open the console to see the EventEmitter at work when you click Buy.</p>
|
||||
|
||||
<app-in-the-metadata [clearanceItem]="lastChanceItem" (buyEvent)="buyClearanceItem($event)"></app-in-the-metadata>
|
||||
<app-in-the-metadata
|
||||
[clearanceItem]="lastChanceItem"
|
||||
(buyEvent)="buyClearanceItem($event)">
|
||||
</app-in-the-metadata>
|
||||
|
||||
|
||||
<hr>
|
||||
@@ -36,7 +42,12 @@
|
||||
<h2>Aliasing Inputs and Outputs</h2>
|
||||
<p>See aliasing.component.ts for aliases and the console for the EventEmitter console logs.</p>
|
||||
|
||||
<app-aliasing [saveForLaterItem]="currentItem" (saveForLaterEvent)="saveForLater($event)" [wishListItem]="currentItem" (wishEvent)="addToWishList($event)"></app-aliasing>
|
||||
<app-aliasing
|
||||
[saveForLaterItem]="currentItem"
|
||||
[wishListItem]="currentItem"
|
||||
(saveForLaterEvent)="saveForLater($event)"
|
||||
(wishEvent)="addToWishList($event)">
|
||||
</app-aliasing>
|
||||
|
||||
<h2>Wishlist:</h2>
|
||||
<ul>
|
||||
|
||||
+1
-1
@@ -20,7 +20,7 @@ export class InTheMetadataComponent {
|
||||
clearanceItem = '';
|
||||
|
||||
buyIt() {
|
||||
console.warn('Child says: emiting buyEvent with', this.clearanceItem);
|
||||
console.warn('Child says: emitting buyEvent with', this.clearanceItem);
|
||||
this.buyEvent.emit(this.clearanceItem);
|
||||
}
|
||||
|
||||
|
||||
@@ -6,13 +6,14 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
styleUrls: ['./input-output.component.css']
|
||||
})
|
||||
export class InputOutputComponent {
|
||||
|
||||
@Input() item = '';
|
||||
@Output() deleteRequest = new EventEmitter<string>();
|
||||
|
||||
lineThrough = '';
|
||||
|
||||
delete() {
|
||||
console.warn('Child says: emiting item deleteRequest with', this.item);
|
||||
console.warn('Child says: emitting item deleteRequest with', this.item);
|
||||
this.deleteRequest.emit(this.item);
|
||||
this.lineThrough = this.lineThrough ? '' : 'line-through';
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@ import { Component, Output, EventEmitter } from '@angular/core';
|
||||
templateUrl: './item-output.component.html',
|
||||
styleUrls: ['./item-output.component.css']
|
||||
})
|
||||
|
||||
// #docregion item-output-class
|
||||
export class ItemOutputComponent {
|
||||
// #docregion item-output
|
||||
|
||||
@@ -11,7 +11,8 @@ import { LoggerService } from './logger.service';
|
||||
template: `
|
||||
<div>projected content begins</div>
|
||||
<ng-content></ng-content>
|
||||
<div>projected content ends</div>`
|
||||
<div>projected content ends</div>
|
||||
`
|
||||
// #enddocregion template
|
||||
+ `
|
||||
<p *ngIf="comment" class="comment">
|
||||
|
||||
@@ -11,7 +11,8 @@ import { LoggerService } from './logger.service';
|
||||
template: `
|
||||
<div>child view begins</div>
|
||||
<app-child-view></app-child-view>
|
||||
<div>child view ends</div>`
|
||||
<div>child view ends</div>
|
||||
`
|
||||
// #enddocregion template
|
||||
+ `
|
||||
<p *ngIf="comment" class="comment">
|
||||
|
||||
@@ -3,8 +3,10 @@ import { Component } from '@angular/core';
|
||||
// #docregion child-view
|
||||
@Component({
|
||||
selector: 'app-child-view',
|
||||
template: `<label for="hero-name">Hero name: </label>
|
||||
<input type="text" id="hero-name" [(ngModel)]="hero">`
|
||||
template: `
|
||||
<label for="hero-name">Hero name: </label>
|
||||
<input type="text" id="hero-name" [(ngModel)]="hero">
|
||||
`
|
||||
})
|
||||
export class ChildViewComponent {
|
||||
hero = 'Magneta';
|
||||
|
||||
@@ -8,7 +8,7 @@ import { HeroService } from '../hero.service';
|
||||
import { Hero } from '../hero';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hero-detaill',
|
||||
selector: 'app-hero-detail',
|
||||
templateUrl: './hero-detail.component.html',
|
||||
styleUrls: ['./hero-detail.component.css']
|
||||
})
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"projectType": "service-worker",
|
||||
"tests": [
|
||||
{"cmd": "yarn", "args": ["e2e", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
|
||||
{"cmd": "yarn", "args": ["build", "--prod"]},
|
||||
{"cmd": "yarn", "args": ["build"]},
|
||||
{"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw.json'), 'ngsw.json is missing')"]},
|
||||
{"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw-worker.js'), 'ngsw-worker.js is missing')"]},
|
||||
{"cmd": "node", "args": ["--eval", "assert(require('./package.json').dependencies['@angular/service-worker'], '@angular/service-worker is missing')"]}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"tests": [
|
||||
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
|
||||
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
"projectType": "testing",
|
||||
"tests": [
|
||||
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
|
||||
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -32,8 +32,8 @@ describe('AppComponent (initial CLI version)', () => {
|
||||
it('should render title', waitForAsync(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!');
|
||||
}));
|
||||
});
|
||||
// #enddocregion
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"tests": [
|
||||
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
|
||||
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"projectType": "universal",
|
||||
"e2e": [
|
||||
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
|
||||
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
|
||||
{"cmd": "yarn", "args": ["run", "build:ssr"]}
|
||||
]
|
||||
}
|
||||
|
||||
+11
-3
@@ -1,7 +1,15 @@
|
||||
<!-- #docregion event-binding -->
|
||||
<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>
|
||||
<button
|
||||
[disabled]="canClick"
|
||||
(click)="sayMessage()">
|
||||
Trigger alert message
|
||||
</button>
|
||||
<!-- #enddocregion -->
|
||||
<!-- #docregion bindings -->
|
||||
<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>
|
||||
<p
|
||||
[id]="sayHelloId"
|
||||
[style.color]="fontColor">
|
||||
You can set my color in the component!
|
||||
</p>
|
||||
<!-- #enddocregion -->
|
||||
<p>My color is {{ fontColor }}</p>
|
||||
<p>My color is {{ fontColor }}</p>
|
||||
|
||||
+9
-7
@@ -5,13 +5,15 @@ import { Component } from '@angular/core';
|
||||
templateUrl: './hello-world-bindings.component.html'
|
||||
})
|
||||
export class HelloWorldBindingsComponent {
|
||||
fontColor = 'blue';
|
||||
sayHelloId = 1;
|
||||
canClick = false;
|
||||
message = 'Hello, World';
|
||||
fontColor = 'blue';
|
||||
sayHelloId = 1;
|
||||
canClick = false;
|
||||
message = 'Hello, World';
|
||||
|
||||
// #docregion method
|
||||
sayMessage() {
|
||||
alert(this.message);
|
||||
}
|
||||
sayMessage() {
|
||||
alert(this.message);
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
}
|
||||
|
||||
+3
-1
@@ -1,3 +1,5 @@
|
||||
<h2>Hello World: Dependency Injection</h2>
|
||||
|
||||
<button (click)="onLogMe()">Log me!</button>
|
||||
<p>Be sure to open the console to view the output!</p>
|
||||
|
||||
<p>Be sure to open the console to view the output!</p>
|
||||
|
||||
+1
-2
@@ -8,8 +8,7 @@ import { Logger } from '../logger.service';
|
||||
export class HelloWorldDependencyInjectionComponent {
|
||||
count = 0;
|
||||
|
||||
constructor(private logger: Logger) {
|
||||
}
|
||||
constructor(private logger: Logger) { }
|
||||
|
||||
onLogMe() {
|
||||
this.logger.writeCount(this.count);
|
||||
|
||||
+4
@@ -1,9 +1,13 @@
|
||||
<h2>Hello World: ngIf!</h2>
|
||||
|
||||
<button (click)="onEditClick()">Make text editable!</button>
|
||||
|
||||
<div *ngIf="canEdit; else noEdit">
|
||||
<p>You can edit the following paragraph.</p>
|
||||
</div>
|
||||
|
||||
<ng-template #noEdit>
|
||||
<p>The following paragraph is read only. Try clicking the button!</p>
|
||||
</ng-template>
|
||||
|
||||
<p [contentEditable]="canEdit">{{ message }}</p>
|
||||
|
||||
+3
-3
@@ -2,9 +2,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hello-world-ngif',
|
||||
templateUrl: './hello-world-ngif.component.html'
|
||||
})
|
||||
selector: 'hello-world-ngif',
|
||||
templateUrl: './hello-world-ngif.component.html'
|
||||
})
|
||||
export class HelloWorldNgIfComponent {
|
||||
message = 'I\'m read only!';
|
||||
canEdit = false;
|
||||
|
||||
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
|
||||
template: `
|
||||
<h2>Hello World</h2>
|
||||
<p>This is my first component!</p>
|
||||
`,
|
||||
`
|
||||
})
|
||||
export class HelloWorldComponent {
|
||||
// The code in this class drives the component's behavior.
|
||||
|
||||
@@ -21,7 +21,7 @@ The template options object, `angularCompilerOptions`, is a sibling to the `comp
|
||||
{@a tsconfig-extends}
|
||||
## Configuration inheritance with extends
|
||||
|
||||
Like the TypeScript compiler, The Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file.
|
||||
Like the TypeScript compiler, the Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file.
|
||||
The `extends` property is at the top level, parallel to `compilerOptions` and `angularCompilerOptions`.
|
||||
|
||||
A TypeScript configuration can inherit settings from another file using the `extends` property.
|
||||
|
||||
@@ -249,7 +249,7 @@ See the [Styles configuration guide](guide/workspace-config#styles-and-scripts-c
|
||||
### Non-CSS style files
|
||||
|
||||
If you're building with the CLI,
|
||||
you can write style files in [sass](https://sass-lang.com/), [less](http://lesscss.org/), or [stylus](https://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example:
|
||||
you can write style files in [sass](https://sass-lang.com/), or [less](http://lesscss.org/), and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`) as in the following example:
|
||||
|
||||
<code-example>
|
||||
@Component({
|
||||
|
||||
@@ -23,43 +23,43 @@ The most basic form of content projection is *single-slot content projection*. S
|
||||
|
||||
To create a component that uses single-slot content projection:
|
||||
|
||||
1. [Create](guide/component-overview) a component.
|
||||
1. [Create a component](guide/component-overview#creating-a-component).
|
||||
|
||||
1. In the template for your component, add an `ng-content` element where you want the projected content to appear.
|
||||
1. In the template for your component, add an `<ng-content>` element where you want the projected content to appear.
|
||||
|
||||
For example, the following component uses an `ng-content` element to display a message.
|
||||
For example, the following component uses an `<ng-content>` element to display a message.
|
||||
|
||||
<code-example path="content-projection/src/app/zippy-basic/zippy-basic.component.ts" header="content-projection/src/app/zippy-basic/zippy-basic.component.ts"></code-example>
|
||||
|
||||
With the `ng-content` element in place, users of this component can now project their own message into the component. For example:
|
||||
With the `<ng-content>` element in place, users of this component can now project their own message into the component. For example:
|
||||
|
||||
<code-example path="content-projection/src/app/app.component.html" header="content-projection/src/app/app.component.html"
|
||||
region="single-slot"></code-example>
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
The `ng-content` element is a placeholder that does not create a real DOM element. Custom attributes applied to `ng-content` are ignored.
|
||||
The `<ng-content>` element is a placeholder that does not create a real DOM element. Custom attributes applied to `<ng-content>` are ignored.
|
||||
|
||||
</div>
|
||||
|
||||
{@a multi-slot}
|
||||
## Multi-slot content projection
|
||||
|
||||
A component can have multiple slots. Each slot can specify a CSS selector that determines which content goes into that slot. This pattern is referred to as *multi-slot content projection*. With this pattern, you must specify where you want the projected content to appear. You accomplish this task by using the `select` attribute of `ng-content`.
|
||||
A component can have multiple slots. Each slot can specify a CSS selector that determines which content goes into that slot. This pattern is referred to as *multi-slot content projection*. With this pattern, you must specify where you want the projected content to appear. You accomplish this task by using the `select` attribute of `<ng-content>`.
|
||||
|
||||
To create a component that uses multi-slot content projection:
|
||||
|
||||
1. [Create](guide/component-overview) a component.
|
||||
1. [Create a component](guide/component-overview#creating-a-component).
|
||||
|
||||
1. In the template for your component, add an `ng-content` element where you want the projected content to appear.
|
||||
1. In the template for your component, add an `<ng-content>` element where you want the projected content to appear.
|
||||
|
||||
1. Add a `select` attribute to the `ng-content` elements. Angular supports [selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for any combination of tag name, attribute, CSS class, and the `:not` pseudo-class.
|
||||
1. Add a `select` attribute to the `<ng-content>` elements. Angular supports [selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for any combination of tag name, attribute, CSS class, and the `:not` pseudo-class.
|
||||
|
||||
For example, the following component uses two `ng-content` elements.
|
||||
For example, the following component uses two `<ng-content>` elements.
|
||||
|
||||
<code-example path="content-projection/src/app/zippy-multislot/zippy-multislot.component.ts" header="content-projection/src/app/zippy-multislot/zippy-multislot.component.ts"></code-example>
|
||||
|
||||
Content that uses the `question` attribute is projected into the `ng-content` element with the `select=[question]` attribute.
|
||||
Content that uses the `question` attribute is projected into the `<ng-content>` element with the `select=[question]` attribute.
|
||||
|
||||
<code-example path="content-projection/src/app/app.component.html" header="content-projection/src/app/app.component.html"
|
||||
region="multi-slot"></code-example>
|
||||
@@ -68,9 +68,9 @@ region="multi-slot"></code-example>
|
||||
|
||||
<header>ng-content without a select attribute</header>
|
||||
|
||||
If your component includes an `ng-content` element without a `select` attribute, that instance receives all projected components that do not match any of the other `ng-content` elements.
|
||||
If your component includes an `<ng-content>` element without a `select` attribute, that instance receives all projected components that do not match any of the other `<ng-content>` elements.
|
||||
|
||||
In the preceding example, only the second `ng-content` element defines a `select` attribute. As a result, the first `ng-content` element receives any other content projected into the component.
|
||||
In the preceding example, only the second `<ng-content>` element defines a `select` attribute. As a result, the first `<ng-content>` element receives any other content projected into the component.
|
||||
|
||||
</div>
|
||||
|
||||
@@ -78,41 +78,41 @@ In the preceding example, only the second `ng-content` element defines a `select
|
||||
|
||||
## Conditional content projection
|
||||
|
||||
If your component needs to _conditionally_ render content, or render content multiple times, you should configure that component to accept an `ng-template` element that contains the content you want to conditionally render.
|
||||
If your component needs to _conditionally_ render content, or render content multiple times, you should configure that component to accept an `<ng-template>` element that contains the content you want to conditionally render.
|
||||
|
||||
Using an `ng-content` element in these cases is not recommended, because when the consumer of a component supplies the content, that content is _always_ initialized, even if the component does not define an `ng-content` element or if that `ng-content` element is inside of an `ngIf` statement.
|
||||
Using an `<ng-content>` element in these cases is not recommended, because when the consumer of a component supplies the content, that content is _always_ initialized, even if the component does not define an `<ng-content>` element or if that `<ng-content>` element is inside of an `ngIf` statement.
|
||||
|
||||
With an `ng-template` element, you can have your component explicitly render content based on any condition you want, as many times as you want. Angular will not initialize the content of an `ng-template` element until that element is explicitly rendered.
|
||||
With an `<ng-template>` element, you can have your component explicitly render content based on any condition you want, as many times as you want. Angular will not initialize the content of an `<ng-template>` element until that element is explicitly rendered.
|
||||
|
||||
The following steps demonstrate a typical implementation of conditional content projection using `ng-template`.
|
||||
The following steps demonstrate a typical implementation of conditional content projection using `<ng-template>`.
|
||||
|
||||
1. [Create](guide/component-overview) a component.
|
||||
1. [Create a component](guide/component-overview#creating-a-component).
|
||||
|
||||
1. In the component that accepts an `ng-template` element, use an `ng-container` element to render that template, such as:
|
||||
1. In the component that accepts an `<ng-template>` element, use an `<ng-container>` element to render that template, such as:
|
||||
|
||||
<code-example path="content-projection/src/app/example-zippy.template.html" header="content-projection/src/app/example-zippy.template.html" region="ng-container">
|
||||
</code-example>
|
||||
|
||||
This example uses the `ngTemplateOutlet` directive to render a given `ng-template` element, which you will define in a later step. You can apply an `ngTemplateOutlet` directive to any type of element. This example assigns the directive to an `ng-container` element because the component does not need to render a real DOM element.
|
||||
This example uses the `ngTemplateOutlet` directive to render a given `<ng-template>` element, which you will define in a later step. You can apply an `ngTemplateOutlet` directive to any type of element. This example assigns the directive to an `<ng-container>` element because the component does not need to render a real DOM element.
|
||||
|
||||
1. Wrap the `ng-container` element in another element, such as a `div` element, and apply your conditional logic.
|
||||
1. Wrap the `<ng-container>` element in another element, such as a `div` element, and apply your conditional logic.
|
||||
|
||||
<code-example path="content-projection/src/app/example-zippy.template.html" header="content-projection/src/app/example-zippy.template.html" region="ngif">
|
||||
</code-example>
|
||||
|
||||
1. In the template where you want to project content, wrap the projected content in an `ng-template` element, such as:
|
||||
1. In the template where you want to project content, wrap the projected content in an `<ng-template>` element, such as:
|
||||
|
||||
<code-example path="content-projection/src/app/app.component.html" region="ng-template">
|
||||
</code-example>
|
||||
|
||||
The `ng-template` element defines a block of content that a component can render based on its own logic. A component can get a reference to this template content, or [`TemplateRef`](/api/core/TemplateRef), by using either the [`@ContentChild`](/api/core/ContentChild) or [`@ContentChildren`](/api/core/ContentChildren) decorators. The preceding example creates a custom directive, `appExampleZippyContent`, as an API to mark the `ng-template` for the component's content. With the `TemplateRef`, the component can render the referenced content by using either the [`ngTemplateOutlet`](/api/common/NgTemplateOutlet) directive, or with [`ViewContainerRef.createEmbeddedView`](/api/core/ViewContainerRef#createembeddedview).
|
||||
The `<ng-template>` element defines a block of content that a component can render based on its own logic. A component can get a reference to this template content, or `TemplateRef`, by using either the `@ContentChild` or `@ContentChildren` decorators. The preceding example creates a custom directive, `appExampleZippyContent`, as an API to mark the `<ng-template>` for the component's content. With the `TemplateRef`, the component can render the referenced content by using either the `ngTemplateOutlet` directive, or with the `ViewContainerRef` method `createEmbeddedView()`.
|
||||
|
||||
1. Create a directive with a selector that matches the custom attribute for your template. In this directive, inject a TemplateRef instance.
|
||||
1. [Create an attribute directive](guide/attribute-directives#building-an-attribute-directive) with a selector that matches the custom attribute for your template. In this directive, inject a TemplateRef instance.
|
||||
|
||||
<code-example path="content-projection/src/app/app.component.ts" header="content-projection/src/app/app.component.ts" region="zippycontentdirective">
|
||||
</code-example>
|
||||
|
||||
In the previous step, you added an `ng-template` element with a custom attribute, `appExampleZippyDirective`. This code provides the logic that Angular will use when it encounters that custom attribute. In this case, that logic instructs Angular to instantiate a template reference.
|
||||
In the previous step, you added an `<ng-template>` element with a custom attribute, `appExampleZippyDirective`. This code provides the logic that Angular will use when it encounters that custom attribute. In this case, that logic instructs Angular to instantiate a template reference.
|
||||
|
||||
1. In the component you want to project content into, use `@ContentChild` to get the template of the projected content.
|
||||
|
||||
@@ -144,14 +144,14 @@ For instance, consider the following HTML snippet:
|
||||
<code-example path="content-projection/src/app/app.component.html" header="content-projection/src/app/app.component.html" region="ngprojectas">
|
||||
</code-example>
|
||||
|
||||
This example uses an `ng-container` attribute to simulate projecting a component into a more complex structure.
|
||||
This example uses an `<ng-container>` attribute to simulate projecting a component into a more complex structure.
|
||||
|
||||
<div class="callout is-helpful">
|
||||
|
||||
<header>Reminder!</header>
|
||||
|
||||
The `ng-container` element is a logical construct that you can use to group other DOM elements; however, the `ng-container` itself is not rendered in the DOM tree.
|
||||
The `<ng-container>` element is a logical construct that you can use to group other DOM elements; however, the `<ng-container>` itself is not rendered in the DOM tree.
|
||||
|
||||
</div>
|
||||
|
||||
In this example, the content we want to project resides inside another element. To project this content as intended, the template uses the `ngProjectAs` attribute. With `ngProjectAs`, the entire `ng-container` element is projected into a component using the `[question]` selector.
|
||||
In this example, the content we want to project resides inside another element. To project this content as intended, the template uses the `ngProjectAs` attribute. With `ngProjectAs`, the entire `<ng-container>` element is projected into a component using the `[question]` selector.
|
||||
|
||||
@@ -1092,7 +1092,7 @@ See [custom element](#custom-element).
|
||||
|
||||
## workspace
|
||||
|
||||
A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI] (#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)).
|
||||
A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI](#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)).
|
||||
|
||||
The [CLI](#cli) [`ng new` command](cli/new) creates a file system directory (the "workspace root").
|
||||
In the workspace root, it also creates the workspace [configuration file](#configuration) (`angular.json`) and, by default, an initial application project with the same name.
|
||||
|
||||
@@ -380,7 +380,7 @@ The following is an example of how the `<app-root>` and `<app-child>` view trees
|
||||
...content goes here...
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
<#VIEW>
|
||||
</#VIEW>
|
||||
</app-root>
|
||||
```
|
||||
|
||||
@@ -1021,8 +1021,8 @@ The logical tree representation shows why this is:
|
||||
@Inject(AnimalService, @Optional)=>"🦔">
|
||||
<!-- ^^@SkipSelf() starts here, @Host() stops here^^ -->
|
||||
<app-child>
|
||||
<#VIEW @Provide(AnimalService="🦔")
|
||||
@Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🐶">
|
||||
<#VIEW @Provide(AnimalService="🐶")
|
||||
@Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🦔">
|
||||
<!-- Add @SkipSelf ^^-->
|
||||
</#VIEW>
|
||||
</app-child>
|
||||
|
||||
+565
-363
File diff suppressed because it is too large
Load Diff
@@ -110,9 +110,8 @@ Version | Status | Released | Active Ends | LTS Ends
|
||||
^12.0.0 | Active | May 12, 2021 | Nov 12, 2021 | Nov 12, 2022
|
||||
^11.0.0 | LTS | Nov 11, 2020 | May 11, 2021 | May 11, 2022
|
||||
^10.0.0 | LTS | Jun 24, 2020 | Dec 24, 2020 | Dec 24, 2021
|
||||
^9.0.0 | LTS | Feb 06, 2020 | Aug 06, 2020 | Aug 06, 2021
|
||||
|
||||
Angular versions v4, v5, v6, v7, and v8 are no longer under support.
|
||||
Angular versions v4, v5, v6, v7, v8, and v9 are no longer under support.
|
||||
|
||||
### LTS fixes
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ As users perform application tasks, they need to move between the different [vie
|
||||
To handle the navigation from one [view](guide/glossary#view) to the next, you use the Angular **`Router`**.
|
||||
The **`Router`** enables navigation by interpreting a browser URL as an instruction to change the view.
|
||||
|
||||
To explore a sample app featuring the router's primary features, see the <live-example stackblitz="router"></live-example>.
|
||||
To explore a sample app featuring the router's primary features, see the <live-example name="router"></live-example>.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
@@ -197,8 +197,7 @@ By using the long form, the schematic can provide more explicit formatting of th
|
||||
"css",
|
||||
"scss",
|
||||
"sass",
|
||||
"less",
|
||||
"styl"
|
||||
"less"
|
||||
],
|
||||
"x-prompt": {
|
||||
"message": "Which stylesheet format would you like to use?",
|
||||
@@ -207,8 +206,7 @@ By using the long form, the schematic can provide more explicit formatting of th
|
||||
{ "value": "css", "label": "CSS" },
|
||||
{ "value": "scss", "label": "SCSS [ https://sass-lang.com/documentation/syntax#scss ]" },
|
||||
{ "value": "sass", "label": "Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" },
|
||||
{ "value": "less", "label": "Less [ http://lesscss.org/ ]" },
|
||||
{ "value": "styl", "label": "Stylus [ https://stylus-lang.com/ ]" }
|
||||
{ "value": "less", "label": "Less [ http://lesscss.org/ ]" }
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
@@ -162,6 +162,12 @@ You declare a template input variable using the `let` keyword as in `let hero`.
|
||||
|
||||
There are several such variables in this example: `hero`, `i`, and `odd`.
|
||||
|
||||
```html
|
||||
<ng-template #hero let-hero let-i="index" let-odd="isOdd">
|
||||
<div [class]="{'odd-row': odd}">{{i}}:{{hero.name}}</div>
|
||||
</ng-template>
|
||||
```
|
||||
|
||||
The variable's scope is limited to a single instance of the repeated template.
|
||||
Use the same variable name again in the definition of other structural directives.
|
||||
|
||||
|
||||
@@ -1558,7 +1558,7 @@ You can consolidate the two `beforeEach()` functions into a single, async `befor
|
||||
|
||||
The `compileComponents()` method returns a promise so you can perform the
|
||||
synchronous setup tasks _after_ compilation by moving the synchronous code
|
||||
into a `then(...)` callback.
|
||||
after the `await` keyword, where the promise has been resolved.
|
||||
|
||||
<code-example
|
||||
path="testing/src/app/banner/banner-external.component.spec.ts"
|
||||
|
||||
@@ -203,7 +203,7 @@ The important bit in the `server.ts` file is the `ngExpressEngine()` function.
|
||||
The `ngExpressEngine()` function is a wrapper around Universal's `renderModule()` function which turns a client's
|
||||
requests into server-rendered HTML pages. It accepts an object with the following properties:
|
||||
|
||||
* `bootstrap`: The root `NgModule` or `NgModule` factory to use for bootstraping the application when rendering on the server. For the example app, it is `AppServerModule`. It's the bridge between the Universal server-side renderer and the Angular application.
|
||||
* `bootstrap`: The root `NgModule` or `NgModule` factory to use for bootstrapping the application when rendering on the server. For the example app, it is `AppServerModule`. It's the bridge between the Universal server-side renderer and the Angular application.
|
||||
* `extraProviders`: This is optional and lets you specify dependency providers that apply only when rendering the application on the server. You can do this when your application needs information that can only be determined by the currently running server instance.
|
||||
|
||||
The `ngExpressEngine()` function returns a `Promise` callback that resolves to the rendered page.
|
||||
|
||||
@@ -590,7 +590,7 @@ The safest bet for ensuring compatibility is using the
|
||||
[component API](https://docs.angularjs.org/api/ng/type/angular.Module)
|
||||
introduced in AngularJS 1.5.
|
||||
|
||||
An example of an upgradable component is one that just has a template
|
||||
An example of an upgradeable component is one that just has a template
|
||||
and a controller:
|
||||
|
||||
<code-example path="upgrade-module/src/app/upgrade-static/hero-detail.component.ts" region="hero-detail" header="hero-detail.component.ts">
|
||||
|
||||
@@ -191,10 +191,10 @@ Some additional options can only be set through the configuration file, either b
|
||||
| OPTIONS PROPERTIES | DESCRIPTION |
|
||||
| :------------------------- | :---------------------------- |
|
||||
| `assets` | An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its `assets` folder. See more in [Assets configuration](#asset-config) below. |
|
||||
| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com/), [less](http://lesscss.org/), and [stylus](https://stylus-lang.com/). See more in [Styles and scripts configuration](#style-script-config) below. |
|
||||
| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com/) and [less](http://lesscss.org/). See more in [Styles and scripts configuration](#style-script-config) below. |
|
||||
| `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in [Styles and scripts configuration](#style-script-config) below. |
|
||||
| `scripts` | An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a `<script>` tag inside `index.html`. See more in [Styles and scripts configuration](#style-script-config) below. |
|
||||
| `budgets` | Default size-budget type and threshholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](guide/build#configure-size-budgets). (Not available in `test` section.) |
|
||||
| `budgets` | Default size-budget type and thresholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](guide/build#configure-size-budgets). (Not available in `test` section.) |
|
||||
| `fileReplacements` | An object containing files and their compile-time replacements. See more in [Configure target-specific file replacements](guide/build#configure-target-specific-file-replacements).|
|
||||
|
||||
{@a complex-config}
|
||||
@@ -330,7 +330,7 @@ You can mix simple and complex file references for styles and scripts.
|
||||
|
||||
#### Style preprocessor options
|
||||
|
||||
In Sass and Stylus you can make use of the `includePaths` functionality for both component and global styles, which allows you to add extra base paths that will be checked for imports.
|
||||
In Sass you can make use of the `includePaths` functionality for both component and global styles, which allows you to add extra base paths that will be checked for imports.
|
||||
|
||||
To add paths, use the `stylePreprocessorOptions` option:
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
@@ -40,7 +40,7 @@
|
||||
"alan-agius4": {
|
||||
"name": "Alan Agius",
|
||||
"groups": ["Angular"],
|
||||
"lead": "kyliau",
|
||||
"lead": "dgp1130",
|
||||
"picture": "alan-agius4.jpg",
|
||||
"bio": "Angular CLI Member, Loves TypeScript, Build Tools, Food, Beer & Coffee :)"
|
||||
},
|
||||
@@ -111,7 +111,7 @@
|
||||
"picture": "aristeidis.jpg",
|
||||
"twitter": "abampakos",
|
||||
"website": "https://medium.com/@abampakos",
|
||||
"bio": "Aristeidis is a front end web developer at Plex-Earth working with Angular. He is a co-organizer of the Angular Athens meetup and the author of Learning Angular - 3rd Edition. He is also a senior Angular instructor at Code.Hub where he teaches the Angular framework to other developers.",
|
||||
"bio": "Aristeidis is a web development team lead at Plex-Earth working with Angular. He is a co-organizer of the Angular Athens meetup and the author of Learning Angular - 3rd Edition and Angular Projects - 2nd Edition books. He is also a senior Angular instructor at Code.Hub where he teaches the Angular framework to other developers.",
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"bbrennan": {
|
||||
@@ -181,13 +181,6 @@
|
||||
"bio": "Co-founder and CTO of Thinktecture AG, as well as Google GDE and Microsoft MVP. Since two decades active as an engaged and passionate speaker on several software conferences and events all over the world. Some people call him 'Mr. Cross-Platform'.",
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"cindygk": {
|
||||
"name": "Cindy Greene-Kaplan",
|
||||
"picture": "cindygreenekaplan.jpg",
|
||||
"twitter": "cindykaygk",
|
||||
"bio": "Cindy is a Program Manager on the Angular team at Google. She is passionate about improving team processes and overall execution. She enjoys dance fitness, movies and travel.",
|
||||
"groups": ["Angular"]
|
||||
},
|
||||
"cironunes": {
|
||||
"name": "Ciro Nunes",
|
||||
"picture": "cironunes.jpg",
|
||||
@@ -198,7 +191,7 @@
|
||||
"clydin": {
|
||||
"name": "Charles Lyding",
|
||||
"groups": ["Angular"],
|
||||
"lead": "kyliau",
|
||||
"lead": "dgp1130",
|
||||
"picture": "clydin.jpg"
|
||||
},
|
||||
"coryrylan": {
|
||||
@@ -262,8 +255,7 @@
|
||||
"twitter": "develwoutacause",
|
||||
"website": "https://github.com/dgp1130",
|
||||
"bio": "Doug is an overly-opinionated software developer with a passion for making awesome developer tools. He is motivated primarily by his selfish desire to make his own life easier, but loves to share his tools and workflows with others to make everyone's lives easier.",
|
||||
"groups": ["Angular"],
|
||||
"lead": "kyliau"
|
||||
"groups": ["Angular"]
|
||||
},
|
||||
"doguhan": {
|
||||
"name": "Doguhan Uluca",
|
||||
@@ -325,7 +317,7 @@
|
||||
"website": "https://github.com/filipesilva",
|
||||
"bio": "Filipe is a passion-driven developer that always strives for the most elegant solution for each problem. He is currently an author for Angular.io, a core contributor for Angular-CLI and senior front end engineer at KonnectAgain. When not busy going through PRs, you can find him scouring reddit for new dinner recipes to cook or enjoying a craft beer in Dublin.",
|
||||
"groups": ["Angular"],
|
||||
"lead": "kyliau"
|
||||
"lead": "dgp1130"
|
||||
},
|
||||
"fmalcher": {
|
||||
"name": "Ferdinand Malcher",
|
||||
@@ -354,7 +346,7 @@
|
||||
"gregmagolan": {
|
||||
"name": "Greg Magolan",
|
||||
"groups": ["Angular"],
|
||||
"lead": "kyliau",
|
||||
"lead": "dgp1130",
|
||||
"picture": "gregmagolan.jpg",
|
||||
"bio": "Building great software with Angular and Node.js."
|
||||
},
|
||||
@@ -368,7 +360,7 @@
|
||||
"jbedard": {
|
||||
"name": "Jason Bedard",
|
||||
"groups": ["Collaborators"],
|
||||
"mentor": "kyliau",
|
||||
"mentor": "dgp1130",
|
||||
"picture": "jbedard.jpg"
|
||||
},
|
||||
"jecelynyeen": {
|
||||
@@ -459,6 +451,13 @@
|
||||
"groups": ["Angular"],
|
||||
"lead": "igorminar"
|
||||
},
|
||||
"josmar-crwdstffng": {
|
||||
"name": "Joe Martin",
|
||||
"picture": "josephmmartin.jpg",
|
||||
"bio": "Joe is a technical writer working on the Angular docs.",
|
||||
"groups": ["Angular"],
|
||||
"lead": "aikidave"
|
||||
},
|
||||
"jschwarty": {
|
||||
"name": "Justin Schwartzenberger",
|
||||
"picture": "justinschwartzenberger.jpg",
|
||||
@@ -530,15 +529,6 @@
|
||||
"bio": "Kwinten is a GDE for Angular with a passion for reactive coding. He works as a software engineer for Stackblitz. He shares his passion for Angular and coding through blogposts and training sessions with the company he co-founded called Strongbrew.",
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"kyliau": {
|
||||
"name": "Keen Yee Liau",
|
||||
"twitter": "liauky",
|
||||
"website": "https://github.com/kyliau",
|
||||
"bio": "Keen works on language service and CLI. He also maintains Karma and Protractor.",
|
||||
"groups": ["Angular"],
|
||||
"lead": "igorminar",
|
||||
"picture": "kyliau.jpg"
|
||||
},
|
||||
"lacolaco": {
|
||||
"name": "Suguru Inatomi",
|
||||
"picture": "lacolaco.jpg",
|
||||
@@ -854,6 +844,12 @@
|
||||
"bio": "Andrew is a software engineer using Angular and .NET. He spends most of his spare time staying up-to-date, helping other people, and experimenting with web tech.",
|
||||
"groups": ["GDE"]
|
||||
},
|
||||
"tmdavisgoogle": {
|
||||
"name": "Tiffany Davis",
|
||||
"bio": "Tiffany is an editor working on Angular documentation.",
|
||||
"groups": ["Angular"],
|
||||
"lead": "aikidave"
|
||||
},
|
||||
"toddmotto": {
|
||||
"name": "Todd Motto",
|
||||
"picture": "toddmotto.jpg",
|
||||
|
||||
@@ -49,6 +49,11 @@
|
||||
"desc": "Add API Based CMS to your Angular app",
|
||||
"url": "https://github.com/ButterCMS/buttercms-angular-tutorial",
|
||||
"title": "API Based CMS with Butter"
|
||||
},
|
||||
"angular-community-meetup": {
|
||||
"desc": "Come learn technical skills and network at this monthly, multi-series, multi-event, multi-timezone online meetup.",
|
||||
"url": "https://angularcommunity.net",
|
||||
"title": "Angular Community Meetup"
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -90,6 +95,12 @@
|
||||
"logo": "",
|
||||
"title": "NgRuAir",
|
||||
"url": "https://github.com/ngRuAir/ngruair"
|
||||
},
|
||||
"ngxp": {
|
||||
"desc": "Weekly technical-adjacent podcast by Brooke Avery & Erik Slack. Don't just code in Angular, come enjoy the Angular Experience!",
|
||||
"logo": "",
|
||||
"title": "Angular Experience (NgXP)",
|
||||
"url": "https://ngxp.show"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -199,7 +199,11 @@ This section walks you through creating a child component, `ProductAlertsCompone
|
||||
|
||||
<code-example header="src/app/product-alerts/product-alerts.component.html" path="getting-started/src/app/product-alerts/product-alerts.component.1.html"></code-example>
|
||||
|
||||
1. To display `ProductAlertsComponent` as a child of `ProductListComponent`, add the selector, `<app-product-alerts>` to `product-list.component.html`.
|
||||
1. To make `ProductAlertsComponent` available to other components in the application, add it to `AppModule`'s declarations in `app.module.ts`.
|
||||
|
||||
<code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="declare-product-alerts"></code-example>
|
||||
|
||||
1. Finally, to display `ProductAlertsComponent` as a child of `ProductListComponent`, add the selector, `<app-product-alerts>` to `product-list.component.html`.
|
||||
Pass the current product as input to the component using property binding.
|
||||
|
||||
<code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.5.html" region="app-product-alerts"></code-example>
|
||||
|
||||
+4
-4
@@ -18,7 +18,7 @@
|
||||
"build-local": "yarn ~~build",
|
||||
"prebuild-local-ci": "yarn setup-local-ci",
|
||||
"build-local-ci": "yarn ~~build --progress=false",
|
||||
"extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js a57976b98",
|
||||
"extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js 56c5962df",
|
||||
"lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint",
|
||||
"test": "yarn check-env && ng test",
|
||||
"pree2e": "yarn check-env && yarn update-webdriver",
|
||||
@@ -56,7 +56,7 @@
|
||||
"docs-test": "node tools/transforms/test.js",
|
||||
"redirects-test": "node tests/deployment/unit/test",
|
||||
"firebase-utils-test": "node tools/firebase-test-utils/test",
|
||||
"tools-lint": "tslint --config \"tools/tslint.json\" --project \"tools/firebase-test-utils\" && eslint tools/ng-packages-installer",
|
||||
"tools-lint": "eslint tools/firebase-test-utils && eslint tools/ng-packages-installer",
|
||||
"tools-test": "yarn docs-test && yarn boilerplate:test && jasmine tools/ng-packages-installer/index.spec.js && jasmine scripts/deploy-to-firebase.spec.js && yarn firebase-utils-test",
|
||||
"preserve-and-sync": "yarn docs",
|
||||
"serve-and-sync": "run-p \"docs-watch --watch-only\" \"start {@}\" --",
|
||||
@@ -130,8 +130,8 @@
|
||||
"cross-spawn": "^7.0.3",
|
||||
"css-selector-parser": "^1.4.1",
|
||||
"dgeni": "^0.4.14",
|
||||
"dgeni-packages": "^0.29.1",
|
||||
"entities": "^2.2.0",
|
||||
"dgeni-packages": "^0.29.2",
|
||||
"entities": "^3.0.0",
|
||||
"esbuild": "^0.12.0",
|
||||
"eslint": "^7.26.0",
|
||||
"eslint-plugin-import": "^2.23.4",
|
||||
|
||||
@@ -149,7 +149,7 @@ export class DocViewerComponent implements OnDestroy {
|
||||
this.setNoIndex(true);
|
||||
|
||||
// TODO(gkalpak): Remove this once gathering debug info is no longer needed.
|
||||
if (/loading chunk \d+ failed/i.test(errorMessage)) {
|
||||
if (/loading chunk \S+ failed/i.test(errorMessage)) {
|
||||
// Print some info to help with debugging.
|
||||
// (There is no reason to wait for this async call to complete before continuing.)
|
||||
printSwDebugInfo();
|
||||
|
||||
@@ -97,7 +97,6 @@
|
||||
|
||||
.github-links {
|
||||
a {
|
||||
|
||||
.material-icons:hover {
|
||||
background: none;
|
||||
}
|
||||
@@ -167,6 +166,10 @@
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.final-message {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.api-heading {
|
||||
@include mixins.font-size(14);
|
||||
margin: 16px;
|
||||
|
||||
@@ -8,9 +8,17 @@
|
||||
&.api-status-label {
|
||||
background-color: constants.$mediumgray;
|
||||
|
||||
&.deprecated, &.security, &.impure-pipe {
|
||||
&.deprecated,
|
||||
&.security,
|
||||
&.impure-pipe {
|
||||
background-color: constants.$brightred;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.api-type-label {
|
||||
|
||||
@@ -86,7 +86,7 @@ The file is expected to contain a JSON object with zero or more of the following
|
||||
"cmd": "yarn",
|
||||
"args": [
|
||||
"e2e",
|
||||
"--prod",
|
||||
"--configuration=production",
|
||||
"--protractor-config=e2e/protractor-puppeteer.conf.js",
|
||||
"--no-webdriver-update",
|
||||
"--port={PORT}"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user