Back to Browse

Input signals Angular 19 | Angular Version Updates #angular19

1.3K views
Nov 29, 2024
20:27

*Summary* This video tutorial explains how to use input signals in Angular 19, a new feature offering improved performance compared to traditional `@Input` decorators. It covers creating child components, passing data using both `@Input` and signal-based approaches, handling required inputs, transforming input values, and using the `ngOnChanges` lifecycle hook and computed properties. The video also demonstrates a migration command to automatically convert existing `@Input` decorators to signal-based inputs. *Highlights* - πŸ‘ *Signal-based inputs:* Angular 19 introduces signal-based inputs for enhanced reactivity and performance. The video shows how to use them, comparing them to the legacy `@Input` decorator approach. - ➑️ Migration from `@Input`: A command-line tool (`ng generate @angular/core:signal-input`) is demonstrated, enabling the automated conversion of existing `@Input` decorators to signals. - βš™οΈ *Required Inputs:* The video shows how to enforce required inputs, using both `@Input` and signal-based approaches. Errors are demonstrated when required inputs are omitted. - πŸ”„ *Transforming Inputs:* The video showcases how to transform input values before they're displayed using a `transform` function, applicable to both methods. - πŸ’‘ *Computed Properties:* For signal-based inputs, the video demonstrates using computed properties to react to changes in signal values, providing a clean way to handle transformations and side effects. Github Link: https://github.com/saikorthivada/angular-tutorials/tree/v-19-inputs Telegram Link https://t.me/techshareskk Instagram https://www.instagram.com/tech.share.skk Playlist links Angular Project https://www.youtube.com/playlist?list=PLmY2oBouT85bavS9A9qB_RYmrBRQG6Jbx Angular Tutorials Zero to Hero https://www.youtube.com/playlist?list=PLmY2oBouT85bSbFOm0qfDDPiL1gryCjmB Angular Unit Testing https://www.youtube.com/playlist?list=PLmY2oBouT85ZY5PIFp9BtOzjiwRRrs0Zy For Angular Reactive forms https://youtube.com/playlist?list=PLmY2oBouT85Zv7MfGUdLdyKO4CietR_1X For Javascript Objects Series https://youtube.com/playlist?list=PLmY2oBouT85a6pqYOxETLm4FqIiTFFczm For Concepts of JavaScript https://youtube.com/playlist?list=PLmY2oBouT85Y8TOw2qCGZ4S1wcgvgUKll For Projects and POC https://youtube.com/playlist?list=PLmY2oBouT85Z5be8KRyIfca7s7yXRlDC4 #angular19 #angular #updates #techshareskk

Download

1 formats

Video Formats

360pmp430.1 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Input signals Angular 19 | Angular Version Updates #angular19 | NatokHD