You’ve probably used Angular’s handy decorator called @Input, but do you truly understand how to best utilize it? The Angular @Input decorator is perfect for presentational components but have you been using it the same way Google uses it for apps such as Google Ads? I’ll make sure to explain everything you need to know about the Input decorator.
To begin, let’s understand what @Input truly is by definition. The Input decorator is essentially a component-wide variable used to receive data from any parent component and I mean ANY! For example, Inputs are used to typically consume REST API data objects and/or object values and later present or manipulate(via. a pipe) this data for the GUI. Let's say your expecting a data response provided to you by a backend developer on the microapi platform. By understanding the data response you can better understand how to define your target variable names. To sum it up, the @Input decorator is used to assign variables within a child-selector also known as targets.
A child selector also known as a child component is responsible for consuming a source and storing that source into a target. Here’s something to consider you can either pass in an entire object as a source or define each value of an object as its own source.
Here's an example of a variable called data of type user, hosting one object. We’ll use this as a reference to better understand what parent return for child components consumption.
Now that we’ve established the mock data, lets now consume data values into our child selector called profile-card.
We’ve defined a component called profile-card, this profile card is a presentational component whose sole purpose is to only consume and display data. We’ve established a @Input decorator variable inside the profile-card component called full_name. This full_name variable is used to display the value by adding curly braces to the profile-card .html file.
In conclusion, we’ve learned what a @Input decorator is, where source data stems from, and lastly, how our child component consumes values through its target decorator.
