Sometimes app development requires you to send data into a component. This data can be used to customize a component or perhaps send information from a parent component to a child component.
Angular uses a concept called input
. This is similar to props
in other frameworks. To create an input
property, use the input()
function.
Note: Learn more about accepting data with input properties in the inputs guide.
In this activity, you'll learn how to use the input()
function to send information to components.
To create an input
property, add the input()
function to initialize a property of a component class:
user.ts
class User { occupation = input<string>();}
When you are ready to pass in a value through an input
, values can be set in templates using the attribute syntax. Here's an example:
app.ts
@Component({ ... template: `<app-user occupation="Angular Developer"></app-user>`})class App {}
The input
function returns an InputSignal
. You can read the value by calling the signal.
user.ts
@Component({ ... template: `<p>The user's occupation is {{occupation()}}</p>`})
-
Define an
input()
propertyUpdate the code in
user.ts
to define aninput
property on theUser
calledname
and specify thestring
type. For now, don't set an initial value and invokeinput()
without arguments. Be sure to update the template to invoke and interpolate thename
property at the end of the sentence. -
Pass a value to the
input
propertyUpdate the code in
app.ts
to send in thename
property with a value of"Simran"
.When the code has been successfully updated, the app will display
The user's name is Simran
.
While this is great, it is only one direction of the component communication. What if you want to send information and data to a parent component from a child component? Check out the next lesson to find out.
P.S. you are doing great - keep going 🎉