diff --git a/docs/src/content/docs/ru/challenges/angular/43-signal-input.md b/docs/src/content/docs/ru/challenges/angular/43-signal-input.md new file mode 100644 index 0000000..36c86bc --- /dev/null +++ b/docs/src/content/docs/ru/challenges/angular/43-signal-input.md @@ -0,0 +1,53 @@ +--- +title: 🟢 Signal Input +description: Испытание 43 про то как использовать signal inputs +author: thomas-laforge +challengeNumber: 43 +command: angular-signal-input +sidebar: + order: 16 +--- + +## Информация + +Наконец настал тот день, когда разработчики Angular добавили долгожданный реактивный input. +Фича, которую ждали на протяжении многих лет, появилась в версии 17.1 под названием `SignalInput`. +Теперь, вместо привычного декоратора `@Input`, у нас есть функция, которая возвращает сигнал. + +```ts +// старый способ +@Input() age?: number; + +// новый способ +age = input() +``` + +Если нужны обязательные inputs. + +```ts +// старый способ +@Input({required: true}) age!: number; + +// новый способ +age = input.required() +``` + +Если было нужно получить сигнал из input приходилось использовать сеттер. + +```ts +// старый способ +age = signal(0) +@Input({alias: 'age'}) set _age(age: number){ + this.age.set(age) +}; + +// новый способ +age = input() +``` + +## Пояснение + +Задача этого упражнения - переработать `UserComponent`, чтобы в нем был использован `SignalInput`. + +- У вас есть обязательные и не обязательные inputs. +- Вы можете использовать функцию `transform` для ввода `age`, чтобы преобразовать свойство в число.