mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-13 06:13:03 -05:00
feat: add doc
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: 🟢 Signal Input
|
title: 🟢 Signal Input
|
||||||
description: Challenge 43 is about ...
|
description: Challenge 43 is about learning how to use signal inputs
|
||||||
author: thomas-laforge
|
author: thomas-laforge
|
||||||
challengeNumber: 43
|
challengeNumber: 43
|
||||||
command: angular-signal-input
|
command: angular-signal-input
|
||||||
@@ -9,12 +9,44 @@ sidebar:
|
|||||||
badge: New
|
badge: New
|
||||||
---
|
---
|
||||||
|
|
||||||
:::note
|
|
||||||
WIP: The following documentation need to be written.
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Information
|
## Information
|
||||||
|
|
||||||
|
Finally, the day has arrived when the Angular team introduces a reactive input. This highly requested feature has been awaited for many years. Version 17.1 introduces `SignalInput`. Instead of utilizing the well-known `@Input` decorator, you now have a function that returns a signal.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// old way
|
||||||
|
@Input() age?: number;
|
||||||
|
|
||||||
|
// new way
|
||||||
|
age = input<number>()
|
||||||
|
```
|
||||||
|
|
||||||
|
If you want required inputs
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// old way
|
||||||
|
@Input({required: true}) age!: number;
|
||||||
|
|
||||||
|
// new way
|
||||||
|
age = input.required<number>()
|
||||||
|
```
|
||||||
|
|
||||||
|
If you wanted to obtain a signal from an input, you had to go through a setter to configure your signal from the input.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// old way
|
||||||
|
age = signal(0)
|
||||||
|
@Input({alias: 'age'}) set _age(age: number){
|
||||||
|
this.age.set(age)
|
||||||
|
};
|
||||||
|
|
||||||
|
// new way
|
||||||
|
age = input<number>()
|
||||||
|
```
|
||||||
|
|
||||||
## Statement
|
## Statement
|
||||||
|
|
||||||
## Constraints
|
In this small application, the goal is to refactor the `UserComponent` to utilize `SignalInput`.
|
||||||
|
|
||||||
|
- You have required and optional inputs.
|
||||||
|
- You can use the `transform` function for the `age` input to directly convert the property to a number.
|
||||||
|
|||||||
Reference in New Issue
Block a user