mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
68017d4e75
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 |
||
|---|---|---|
| .. | ||
| attributes_spec.ts | ||
| bootstrap_spec.ts | ||
| BUILD.bazel | ||
| change_detection_signals_in_zones_spec.ts | ||
| change_detection_spec.ts | ||
| change_detection_transplanted_view_spec.ts | ||
| common_integration_spec.ts | ||
| component_spec.ts | ||
| content_spec.ts | ||
| copy_definition_feature_spec.ts | ||
| csp_spec.ts | ||
| destroy_ref_spec.ts | ||
| di_forward_ref_spec.ts | ||
| di_spec.ts | ||
| directive_spec.ts | ||
| discover_utils_spec.ts | ||
| embedded_views_spec.ts | ||
| env_injector_standalone_spec.ts | ||
| environment_injector_spec.ts | ||
| exports_spec.ts | ||
| host_binding_spec.ts | ||
| host_directives_spec.ts | ||
| i18n_spec.ts | ||
| inherit_definition_feature_spec.ts | ||
| initial_render_pending_tasks_spec.ts | ||
| integration_spec.ts | ||
| lifecycle_spec.ts | ||
| listener_spec.ts | ||
| ng_module_spec.ts | ||
| ngmodule_scope_spec.ts | ||
| outputs_spec.ts | ||
| pipe_spec.ts | ||
| profiler_spec.ts | ||
| property_binding_spec.ts | ||
| property_interpolation_spec.ts | ||
| providers_spec.ts | ||
| pure_function_spec.ts | ||
| query_spec.ts | ||
| renderer_factory_spec.ts | ||
| router_integration_spec.ts | ||
| security_spec.ts | ||
| standalone_injector_spec.ts | ||
| standalone_spec.ts | ||
| styling_spec.ts | ||
| template_ref_spec.ts | ||
| text_spec.ts | ||
| view_container_ref_spec.ts | ||
| view_insertion_spec.ts | ||
| view_ref_spec.ts | ||