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*

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I love teaching and creating content for developers! I create YouTube 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.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #demo
#angularparentchild #componentcommunicationinAngular #angularcomponentcommunication #componentinteractionAngular #componenttocomponentcommunicationinAngular #componentinteractioninAngular #passingdatafromcomponenttocomponentangular

[moisesgonga]

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

[PanDaNWS]

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

[tomfrank]

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?

[richarddefortune]

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

[haroldpepete]

great, this feaure reminds me WPF value converters

[ddddjj]

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

[mansoorabdullah]

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

[navenkumarduraisamy]

Is it an alternative for getter and setter?

[richarddefortune]

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<any>). Is there a way to make a video on that?

[dg-cggi]

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$ =

In the reset method I'm trying to clear it. Whats the approach for this?

[ankitpare]

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