Transform Data with Angular @Input()

Starting with Angular v16.1, we can now transform data using the @Input() decorator.
The @Input() decorator identifies an input property. We can use an input property to receive a value from a parent component. Or read a route from the URL.
The @Input() decorator provides three additional feature options for our input properties: alias, required (v16), and transform (v16.1). This video briefly describes the first two, then focuses on data transformation.
*Content*
00:00 The @Input() decorator
02:15 Alias the input property name
03:37 Require an input property
04:33 Transform a value before assigning it
05:44 Create a reusable transform function
05:55 Built-in transform functions
06:21 Using the booleanAttribute transform function
07:51 Using the numberAttribute transform function
08:23 Sample code
*Links*
KZbin video "Use @Input() to Read Route Parameters in Angular": kzbin.info/www/bejne/hKban2irjp14itk
GitHub source code: github.com/DeborahK/Angular-Experiments/tree/main/apm-parent-child
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I love teaching and creating content for developers! I create KZbin videos and write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years.
For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award in Developer Technologies, and I'm a Google Developer Expert (GDE) in Angular.
Contact me on Twitter: DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
View my KZbin content: www.youtube.com/@deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #demo
#angularparentchild #componentcommunicationinAngular #angularcomponentcommunication #componentinteractionAngular #componenttocomponentcommunicationinAngular #componentinteractioninAngular #passingdatafromcomponenttocomponentangular

[@edofiliedo]

Thank you Deborah, great.

[@kirilvedmidskiy]

Cool, as always!

[@mister-med]

You're awesome Deborah! ❤

[@deborah_kurata]

That is so kind of you! 😊 Thank you!

[@moisesgonga1302]

🎉🎉Perfect explanation… thanks for sharing! 😍😍😍👌🏽🎉🎉

[@deborah_kurata]

Glad it was helpful! Thank you for watching!

[@mariocaruana]

Very nice, good video.

[@deborah_kurata]

Thank you!

[@jeffnikelson5824]

great video 👌🏻

[@deborah_kurata]

Thank you ☺

[@PanDaNWS]

Thanks you for the video, it help me so much to begin learn angular

[@deborah_kurata]

Glad it was helpful!

[@test-user-123]

Tnx!!!

[@deborah_kurata]

Thank you for watching!

[@carolruo]

Thanks

[@deborah_kurata]

You are welcome! Thank you for watching!

[@sarahassaan7023]

Many likes

[@deborah_kurata]

Thank you!

[@tomfrank2115]

What I missed in the video and in the code examples is any kind of unit tests. How do I unit test or trigger the transform function in unit tests?

[@haroldpepete]

great, this feaure reminds me WPF value converters

[@deborah_kurata]

Yes! Or Silverlight. LOL

[@richarddefortune1329]

Btw, it seems like NGRX is not playing well with the new functional way of doing things. I failed miserably to inject the store in the resolver using store = inject(Store). Is there a way to make a video on that?

[@deborah_kurata]

NgRx has recently made lots of changes to support many of the new Angular features ... including the addition of a "signal store". What version of NgRx are you using?

[@richarddefortune1329]

@@deborah_kurata the latest. To be honest, I tried that before I watched your videos on KZbin. Still, I think it will be helpful to make such videos. Thanks

[@richarddefortune1329]

Wow! Deborah, you're a national treasury. I didn't know you are on KZbin. Are you planning on recording a new course on Pluralsight?

[@deborah_kurata]

Thank you so much for the kind words! And glad you found my channel! I'm considering doing a new RxJS/signals course for Pluralsight, but haven't committed yet.

[@richarddefortune1329]

@@deborah_kurata looking forward to it.

[@ebichu8126]

She is a global treasury! :D

[@dg-cg5gi]

Deborah, you've been a God send for my job and learning angular and reactive/declarative and bringing a new paradigm to where I work. Once again, I need to ask a question. How can we clear an observable? For example, I have a form that sends data using an action stream, returns the response object and displays the data in a table using async pipe. But I have a reset button, that resets the input fields, but I also want to use it to clear the observable so the table disappears and the data is cleared. Any thoughts? Ive tried setting the variable: response$ = of(); in my reset() method, but this doesn't allow us to make another call after that? The "response" variable in the actual ts file is: response$ = this.dataService.placeholder.pipe(....). In the reset method I'm trying to clear it. Whats the approach for this?

[@deborah_kurata]

So glad my content has been helpful. Thank you. For a reset or refresh feature, you could do something like this: private refresh = new BehaviorSubject(undefined); // Action stream for loading private isLoadingSubject = new BehaviorSubject(false); isLoadingAction$ = this.isLoadingSubject.asObservable(); products$ = this.refresh .pipe( tap(() => this.isLoadingSubject.next(true)), mergeMap(() => this.http.get(this.productsUrl) .pipe( tap(data => console.log('Refreshed Products', JSON.stringify(data))), catchError(this.handleError) )), tap(() => this.isLoadingSubject.next(false)), shareReplay(1) ); In your case, instead of regetting the data, it would return of(). Would that work?

[@mansoorabdullah]

Using the booleanAttribute transform function will cause issues when we wanna create a same name directive right?

[@deborah_kurata]

Could you elaborate on your question? Maybe with an example?

[@ddddjj3614]

Hi Deborah Please when a new Angular 16 path on Pluralsight will be published?

[@deborah_kurata]

I believe that there are some new Angular 16 courses already in Pluralsight, including "Angular Fundamentals"

[@navenkumarduraisamy6260]

Is it an alternative for getter and setter?

[@deborah_kurata]

You can use it instead of a getter and setter if the purpose of your getter/setter is to perform data transformation. Yes!

[@ankitpare3090]

Hi can you give us some input on Micro front end, thanks in advance

[@deborah_kurata]

Wish I could ... but that is one area I have not yet dove into. Manfred is the true master. Try his video here: kzbin.info/www/bejne/eXWufGl8i9ukrNU Let me know if that was helpful.

[@hastyroehling5753]

'PromoSM' 😝

[@nouchance]

Thanks

[@deborah_kurata]

You are welcome! Thank you for watching!

[@nouchance]

@@deborah_kurata you are awesome ♥️