According to the HTML specification most attributes are defined as strings, however some can be interpreted as different types like booleans or numbers. [In the HTML standard](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes), boolean attributes are considered `true` if they are present on a DOM node and `false` if they are omitted. Common examples of boolean attributes are `disabled` on interactive elements like `<button>` or `checked` on `<input type="checkbox">`. Another example of an attribute that is defined as a string, but interpreted as a different type is the `value` attribute of `<input type="number">` which logs a warning and ignores the value if it can't be parsed as a number.
Historically, authoring Angular inputs that match the native behavior in a type-safe way has been difficult for developers, because Angular interprets all static attributes as strings. While some recent TypeScript versions made this easier by allowing setters and getters to have different types, supporting this pattern still requires a lot of boilerplate and additional properties to be declared. For example, currently developers have to write something like this to have a `disabled` input that behaves like the native one:
```typescript
import {Directive, Input} from '@angular/core';
@Directive({selector: 'mat-checkbox'})
export class MatCheckbox {
@Input()
get disabled() {
return this._disabled;
}
set disabled(value: any) {
this._disabled = typeof value === 'boolean' ? value : (value != null && value !== 'false');
}
private _disabled = false;
}
```
This feature aims to address the issue by introducing a `transform` property on inputs. If an input has a `transform` function, any values set through the template will be passed through the function before being assigned to the directive instance. The example from above can be rewritten to the following:
```typescript
import {Directive, Input, booleanAttribute} from '@angular/core';
@Directive({selector: 'mat-checkbox'})
export class MatCheckbox {
@Input({transform: booleanAttribute}) disabled: boolean = false;
}
```
These changes also add the `booleanAttribute` and `numberAttribute` utilities to `@angular/core` since they're common enough to be useful for most projects.
Fixes#8968.
Fixes#14761.
PR Close#50420
This commit updates the `ApplicationRef.isStable` API to account for
pending rendering task. This is needed as once a pending rendering task
is done, new macrotask and microtask could be created which previously caused these not
to be intercepted and thus ignored when doing SSR.
PR Close#50425
Injecting `ViewContainerRef` into a component makes it effectively a container. The leave animation wasn't triggered on containers before this fix.
fixes angular#48667
PR Close#48705
When an embedded view injector is present anywhere above a node in the tree, the `Self` flag was effectively ignored. With this change, embedded view injectors are not checked at all when the `Self` flag is present, because resolution should stop at the current node before reaching any embedded view injector(s).
Fixes#49959
PR Close#50270
As a preliminary work for #50399, I'd like to add this test to see the effect of treeshaking that will be brought by the incomming refactoring of the AnimationModule.
This is animations test ported to standalone.
PR Close#50413
Adds the necessary compiler changes to support input transform functions. The compiler output has changed in the following ways:
### Directive handler
The directive handler now extracts a reference to the input transform function and it resolves the type of its first parameter. It also asserts that the type can be referenced in the compiled output and that it doesn't clash with any pre-existing `ngAcceptInputType_` members.
### .d.ts
In the generated declaration files the compiler now inserts an `ngAcceptInputType_` member for each input with a `transform` function. The member's type corresponds to the type of the first parameter of the function, e.g.
```typescript
// foo.directive.ts
@Directive()
export class Foo {
@Input({transform: (incomingValue: string) => parseInt(incomingValue)}) value: number;
}
// foo.directive.d.ts
export class Foo {
value: number;
static ngAcceptInputType_value: string;
}
```
### Type check block
If an input has `transform` function, the TCB will use the type of its first parameter for the setter type. This uses the same infrastructure as the `ngAcceptInputType_` members.
### Directive declaration
The generated runtime directive declaration call now includes the `transform` function in the `inputs` map, if the input is being transformed. The function will be picked up by the runtime in the next commit to do the actual transformation.
```typescript
// foo.directive.ts
@Directive()
export class Foo {
@Input({transform: (incomingValue: string) => parseInt(incomingValue)}) value: number;
}
// foo.directive.js
export class Foo {
ɵdir = ɵɵdefineDirective({
inputs: {
value: ['value', 'value', incomingValue => parseInt(incomingValue)]
}
});
}
```
PR Close#50225
Closes#49686
Revert "docs(docs-infra): Remove unused annotation template (#50114)" (#50206)
This reverts commit a1ca162fd6.
This commit causes failures in g3, because `@Annotation` is load-bearing for
tsickle's decorator downleveling transformation.
PR Close#50206
refactor(compiler): generate ng-container instructions (#50008)
ElementContainer instructions refer to `ng-container` element tags, which don't produce corresponding DOM nodes. Much like element instructions, container instructions can also have their start and end tags combined.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Andrew Scott <atscott@users.noreply.github.com>
PR Close#50008
refactor(compiler): handle binary operators (#50008)
We should be able to ingest binary operators. This involves parsing the left and right ASTs, and converting the operator string to a logical `BinaryOperator`.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): handle chains in event listeners (#50008)
It's possible to have chains of statements, exclusively in event listeners. A listener with a chain looks like the following:
```
(click)="onClick($event); 1 == 1"
```
We handle this by generating multiple statements, one for each expression in the chain, and only making the final statement the return statement. We place this logic in code specific to listeners, since they are the only place this construct can appear.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): generate property instructions for `ng-template` inputs (#50008)
When ingesting an `ng-template`, inputs might be on the `inputs` or the `templateAttrs` field. More investigation is required to pinpoint the specifics of `templateAttrs`.
For now, we can process them both and generate the appropriate update-mode property instructions.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): support `KeyedRead` expressions (#50008)
The compiler can now accept key read expressions (e.g. `foo[bar]`), where both the receiver and index are sub-expressions.
PR Close#50008
refactor(compiler): extract save/restore view logic to separate phase (#50008)
Saving and restoring the view is significant enough that it makes sense to handle it independently. This makes for easier reasoning about how view save/restore works.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(core): remove webworker related checks on `assertDomNode` (#50061)
Since the drop of the webworker platform the node can't be a `WebWorkerRenderNode`.
PR Close#50061
refactor(platform-server): import `xhr2` dynamically in the ServerXhr class (#50095)
This commit updates the `@angular/common/http` and `@angular/platform-server` packages to allow dynamic import of the `xhr2` dependency. The `xhr2` dependency has side-effects that rely on a global scope and as a result in some environments those side-effectful calls fail. With the changes from this PR, the import is delayed until it's actually needed, which gives a chance for the underlying platform to setup global scope (via shims) as needed.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50095
build: remove unused deps (#50116)
* All `@types` package removed have typings in their package.
* brotli is unused
* tmp is unused
* vlq is unused
PR Close#50116
fix(core): bootstrapApplication call not rejected when error is thrown in importProvidersFrom module (#50120)
Fixes that the promise returned by `bootstrapApplication` wasn't being rejected when a module imported using `importProvidersFrom` throws an error. The problem was that the function that resolves the providers happens very early as the injector is being constructed.
Fixes#49923.
PR Close#50120
docs(forms): warn the user about getting old values and show how to avoid (#50123)
PR Close#50123
docs(forms): warn the user about getting old values and show how to avoid (#50123)
Co-authored-by: Andrew Kushnir <43554145+AndrewKushnir@users.noreply.github.com>
PR Close#50123
docs(forms): warn the user about getting old values and show how to avoid (#50123)
PR Close#50123
refactor(core): Throw an error when the document is not initialized. (#50143)
In case the document is accessed but not available we should throw ASAP an error to prevent non explicit errors.
PR Close#50143
fix(core): only try to retrieve transferred state on the browser (#50144)
Prior to this commit we tried to retrieve transferred state on both browser and server. Doing this on the server was redundant and could causes issues as `document` might be undefined.
Closes#50138
PR Close#50144
build: update dependency https-proxy-agent to v6 (#50152)
See associated pull request for more information.
PR Close#50152
docs: changed component name to home.component.ts in point 2 of step 3 (#50170)
PR Close#50170
docs: fix obs variable name to obs$ (#50196)
PR Close#50196
docs: Fixed Spelling 'servivce' to 'service' (#50204)
PR Close#50204
docs: fix filename in first-app (#50207)
Same mistake as #50204 but a different file.
PR Close#50207
refactor(core): Update CD traversal to use 'modes' (#50005)
Rather than maintaining separate traversal functions that act differently, this change
updates the change detection traversal to share more code and use different modes
to control the type of traversal being performed.
PR Close#50005
docs: delete aborted documentation files (#49962)
Those files were created as part of #47391 but the content was never merged.
PR Close#49962
refactor(compiler): Remove unused TransformVisitor & NullVisitor (#48646)
NullVisitor & TransformVisitor are unused and unexported outside the compiler package, we can remove them.
PR Close#48646
build: lock file maintenance (#49914)
See associated pull request for more information.
PR Close#49914
test(zone.js): update zone.js test for jasmine upgrade (#49914)
Update test cases to pass jasmine 6.x update.
PR Close#49914
refactor(common): cleanup platformLocation (#50054)
* Drop the usage of @Inject()
* Drop `supportsState` as its supported by evergreen browsers.
PR Close#50054
refactor(compiler): introduce internal transplanted type (#50104)
Adds a new AST for a `TransplantedType` in the compiler which will be used for some upcoming work. A transplanted type is a type node that is defined in one place in the app, but needs to be copied to a different one (e.g. the generated .d.ts). These changes also include updates to the type translator that will rewrite any type references within the type to point to the new context file.
PR Close#50104
build(devtools): make sure linker runs on fesm2022 bundles (#50086)
Since DevTools' Angular framework dependencies are built from local files, they are always up to date. [Recently](https://github.com/angular/angular/pull/49332) these dependencies started being published as fesm2022 instead of fesm2020. We also have an Angular dependency `ngx-flamegraph` that was built and published as fesm2020.
The easiest fix to make sure all of our Angular based dependencies are processed by the linker would be to update the filterPaths field in that file from `/fesm2020/` to `/fesm2020|fesm2022/`. When v16 releases, we can update ngx-flamegraph and publish it with the new APF, letting us change filterPaths to just `/fesm2022/`.
PR Close#50086
build(devtools): target es2020 explicitly (#50086)
We do this because of a bug caused by https://github.com/evanw/esbuild/issues/2950 and a recent change to how angular static properties are attached to class constructors. Targeting esnext or es2022 will cause the static initializer blocks that attach these static properties on class constructors to reference a class constructor variable that they do not have access to.
Because of this we explicitly target es2020 in our Angular DevTools builds.
PR Close#50086
docs: update releases guide for v16 (#50128)
Also clarify that the deprecations guide is for _noteworthy_ deprecations and may not be comprehensive.
PR Close#50128
docs: update starter lesson to contain example images from the start (#50212)
We received feedback that the starter lesson should also include the stock images.
PR Close#50212
fix(core): handle hydration of root components with injected ViewContainerRef (#50136)
This commit fixes an issue where a root component with an injected ViewContainerRef (for ex. `inject(ViewContainerRef)`) was triggering a certain code path during hydration which didn't handle this case correctly.
Resolves#50133.
PR Close#50136
feat(core): support TypeScript 5.1 (#50156)
Updates the project to support building with TypeScript 5.1.
PR Close#50156
docs: standalone component preloading config (#50193)
The preloading modules documentation were missing information about how to apply preloading strategies to standalone application ( `ng new AppName --standalone` ).
Feel free to fix anything not in line with the Angular documentation style guide, as this is my first attempt at contributing :)
- Added example for `app.config.ts` providing info on the `withPreloading(<preloading strategy>)` you can add to the `provideRouter()` RouterFeatures.
- Specified that preloading modules also applies for standalone components.
PR Close#50193
refactor(router): remove private export of `withPreloading` (#50194)
`withPreloading` is part of the public API.
PR Close#50194
fix(core): handle projection of hydrated containters into components that skip hydration (#50199)
This commit updates hydration logic to support a scenario where a view container that was hydrated and later on projected to a component that skips hydration. Currently, such projected content is extracted from the DOM (since a component that skips hydration needs to be re-created), but never added back, since the current logic treats such content as "already inserted".
Closes#50175.
PR Close#50199
fix(core): add additional component metadata to component ID generation (#50203)
This commit add `exportAs`, `signals`, `inputs` and `outputs` into account when generating a component ID.
See: https://github.com/angular/angular/issues/50158#issuecomment-1537061939
PR Close#50203
docs: fix link label. (#50209)
Removing a duplicate https protocol.
PR Close#50209
docs: fix typos on first-app tutorial (#50211)
PR Close#50211
refactor(core): drop `next` prefix from hydration guide link (#50214)
This commit updates the content of the console log to drop the `next.` prefix from hydration guide link.
PR Close#50214
build: update github/codeql-action action to v2.3.3 (#50216)
See associated pull request for more information.
PR Close#50216
docs(docs-infra): Remove warning for `@Annotation`. (#50218)
Per #50206, `@Annotation` is needed for tsickle. This commit removes the warning "Invalid tags found" produced by dgeni for the annotation decorator.
PR Close#50218
docs: fix typo on hydration in Preserve Whitespaces Configuration (#50236)
PR Close#50236
docs: release notes for the v16.0.1 release
release: cut the v16.1.0-next.0 release
refactor(core): simplify state transfer escaping (#50201)
This commit removes unnecessary transfer state escaping and updates this process to be done by the means of a `replacer` and `reviver` method as this removes the need to export the escaping and unescaping methods.
The only thing that we need to escape is `<script` and `</script` which are done by the browsers, but not Node.js.
PR Close#50201
build: lock file maintenance (#50227)
See associated pull request for more information.
(cherry picked from commit d5f92bdd64)
PR Close#50227
refactor: remove unused benchmarks (#50108)
The benchmarks in the 'old' directory are not used / maintained.
PR Close#50108
refactor: remove benchpres tests for other frameworks (#50108)
Some of the benchpress tests were written against other UI
frameworks (ex.: incremental DOM, initial version of ivy)
and those frameworks are no longer a valuable comparision target.
PR Close#50108
docs(docs-infra): Warning message when using absolute links to aio in the documentation (#50213)
This commit adds a processor to check for absolute links to angular.io. Absolute links to aio should be avoided because they will appear as external links.
PR Close#50213
docs: replace absolute links to aio with relative links. (#50213)
This change follows the introduction of the warning message from a transform processor to prevent absolute links to angular.io.
PR Close#50213
refactor(elements): remove unnecessary polyfill deps (#50115)
`webcomponents/custom-elements` and `document-register-element` are unnecessary now that we support only evergreen browsers.
PR Close#50115
build: update dependency firebase-tools to v12 (#50223)
See associated pull request for more information.
PR Close#50223
fix(core): allow onDestroy unregistration while destroying (#50237)
Ensure that all onDestroy callbacks are called by allowing unregistering of onDestroy hooks while destroying.
Fixes#50221
PR Close#50237
docs: fix v13 dependencies versions. (#50243)
Fixing a small mistake.
Fixes#50242
PR Close#50243
docs: split unsupported versions table in two. (#50243)
To ease the maintenance of this table and keep the same number of columns between active and unsupported versions.
PR Close#50243
build: bump in-memory-web-api dependency versions (#50246)
This commit updates in-memory-web-api package versions from v15 -> v16.
PR Close#50246
build: lock file maintenance (#49879)
See associated pull request for more information.
PR Close#49879
docs: update Angular CLI help [main] (#50256)
Updated Angular CLI help contents.
PR Close#50256
docs: fix mistake in tutorial (#50261)
PR Close#50261
build: update dependency @rollup/plugin-commonjs to v25 (#50264)
See associated pull request for more information.
PR Close#50264
docs: add missing "when" (#50262)
PR Close#50262
fix(docs-infra): labels with links should have the same font weight (#50258)
Fix anchor tag styling inside label.api-status-label to match font weight of label styling that does not have anchor tag.
PR Close#50258
build: update all non-major dependencies (#50217)
See associated pull request for more information.
PR Close#50217
build: share Saucelabs browsers between karma test targets using background Saucelabs daemon and custom karma launcher (#49200)
This upgrades the Saucelabs Bazel step on CI to use the more efficient Saucelabs daemon
PR Close#49200
build: address review feedback; added scripts/test/run-saucelabs-tests.sh script for local testing (#49200)
more chars to meet the linters requirements
PR Close#49200
build: address review feedback; should be ready to land now... additional chars to meet commit msg formatting requirements (#49200)
plus more additional chars here
PR Close#49200
build: don't run saucelabs tests yet on PRs... that will happen in a followup (#49200)
additional test to make linter happy
PR Close#49200
refactor(core): remove legacy way of preventing default actions (#50257)
Setting `returnValue = false` to prevent the default action of events hasn't been necessary since IE9.
PR Close#50257
docs: fix inconsistencies in getting started (#50275)
Fixes#50274
PR Close#50275
docs: fix mistake in first-app-lesson-03 (#50278)
The correct filename is `home.component.ts`.
fixes#50277
PR Close#50278
docs(docs-infra): Remove internal constructors from the doc. (#50282)
Internal constructor should not be exposed in the doc. This removes them.
Related to #50281
PR Close#50282
docs(docs-infra): Add a deprecated label to APIs (#50287)
This adds a deprecated label next to the other labels on the API pages for methods & properties.
Fixes#44265
PR Close#50287
docs: Glossary link to N (#50294)
The shortcut to N was missing resulting in a rendering issue.
PR Close#50294
docs: add Enea to GDE contributors list (#50254)
PR Close#50254
docs: update events (#50309)
Generated `events.json` with the latest events retrieved from the Firebase DB.
PR Close#50309
fix(core): allow passing value of any type to `isSignal` function (#50035)
Unlike the current signature where the input argument must a function, this change allows an input of any type to be passed to the `isSignal` function.
PR Close#50035
refactor(common): Reduce the precision to 2 digits in the ngOptimizedImage distortion warning message (#50276)
Using toFixed().
fixes#50273
PR Close#50276
refactor(core): Improve `ExpressionChangedAfterItHasBeenCheckedError` (#50286)
Related to #50272 and #18970, this improves the error message of NG100 by including the class name of the component where the error was triggered.
PR Close#50286
refactor(forms): remove unnecessary Array.from (#50314)
The Array.from isn't necessary since we're just iterating over the map keys.
PR Close#50314
docs: updated 'conceptual preview' title (#50326)
PR Close#50326
docs: fix typo in NG0912 error guide (#50322)
PR Close#50322
docs: fix typo in dependency injection guide (#50323)
PR Close#50323
docs: fix typo in security guide (#50324)
PR Close#50324
Revert "fix(core): add additional component metadata to component ID generation (#50203)" (#50334)
This reverts commit 52c74d3b4a.
The reason for revert: breaking some apps in Google's codebase.
PR Close#50334
docs: added wiki link for domain model (#50180)
Closes#49570
PR Close#50180
build: update all non-major dependencies (#50316)
See associated pull request for more information.
PR Close#50316
docs: update live demo for change detector (#50328)
fixes#44553
PR Close#50328
docs: remove plnkr link from markForCheck example (#50328)
PR Close#50328
refactor(core): Add a warning when `ApplicationRef.isStable` doesn't emit `true` (#50295)
Hydration requires a stable App to run some logic.
With this warning developers will be informed about potential issues encountered when running an unstable app.
Fixes#50285
PR Close#50295
fix(core): add additional component metadata to component ID generation (#50336)
This commit add `exportAs`, `signals`, `inputs` and `outputs` into account when generating a component ID.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50336
docs: release notes for the v16.0.2 release
release: cut the v16.1.0-next.1 release
docs: fixed typo
PR Close#50145
Fixes that the host directives feature was incorrectly throwing the conflicting alias error when an aliased binding was being exposed under the same alias.
Fixes#48951.
PR Close#50364
This commit add `exportAs`, `signals`, `inputs` and `outputs` into account when generating a component ID.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50336
Hydration requires a stable App to run some logic.
With this warning developers will be informed about potential issues encountered when running an unstable app.
Fixes#50285
PR Close#50295
Related to #50272 and #18970, this improves the error message of NG100 by including the class name of the component where the error was triggered.
PR Close#50286
Unlike the current signature where the input argument must a function, this change allows an input of any type to be passed to the `isSignal` function.
PR Close#50035
This commit removes unnecessary transfer state escaping and updates this process to be done by the means of a `replacer` and `reviver` method as this removes the need to export the escaping and unescaping methods.
The only thing that we need to escape is `<script` and `</script` which are done by the browsers, but not Node.js.
PR Close#50201
This commit updates hydration logic to support a scenario where a view container that was hydrated and later on projected to a component that skips hydration. Currently, such projected content is extracted from the DOM (since a component that skips hydration needs to be re-created), but never added back, since the current logic treats such content as "already inserted".
Closes#50175.
PR Close#50199
This commit fixes an issue where a root component with an injected ViewContainerRef (for ex. `inject(ViewContainerRef)`) was triggering a certain code path during hydration which didn't handle this case correctly.
Resolves#50133.
PR Close#50136
Rather than maintaining separate traversal functions that act differently, this change
updates the change detection traversal to share more code and use different modes
to control the type of traversal being performed.
PR Close#50005
Prior to this commit we tried to retrieve transferred state on both browser and server. Doing this on the server was redundant and could causes issues as `document` might be undefined.
Closes#50138
PR Close#50144
Fixes that the promise returned by `bootstrapApplication` wasn't being rejected when a module imported using `importProvidersFrom` throws an error. The problem was that the function that resolves the providers happens very early as the injector is being constructed.
Fixes#49923.
PR Close#50120
This reverts commit a1ca162fd6.
This commit causes failures in g3, because `@Annotation` is load-bearing for
tsickle's decorator downleveling transformation.
PR Close#50206
This commit introduces an interface for `toSignal` options to mirror that of
`toObservable`, and adjusts docs for both symbols. It also adds the ability
for `toSignal` to manually specify `DestroyRef` (similarly to
`toObservable` accepting an injector) or for `toSignal` automatic cleanup to
be disabled (in which case the subscription persists until the Observable
completes). Either option allows `toSignal` to be used outside of a DI
context, like `toObservable`.
PR Close#50071
Due to assertNoImageDistortion using clientWidth and clientHeight, and these properties returning integers, rounding errors occur that exceed the aspect ratio tolerance.
Increasing the tolerance could hide actual distortion so correcting the calculation to use floats would be best and could even allow for a lower tolerance.
PR Close#49889
The image distortion detection performed uses clientWidth/clientHeight which includes the padding.
This leads to images with padding being detected as distorted while they are not and distortion being masked by padding.
PR Close#49889
