Autoplay

    Pass Values into Angular 2 Components with @Input

    John LindquistJohn Lindquist

    @Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components and have them display different values for each instance of the renderer.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Instead of creating all these list elements, I can actually create our app simple form elements, the component that we used. I'll delete this message for a second. I'll hit save and you'll see that for each of these messages, it will create a new form in the browser. Inside of our form we can say that we have an input and this input is the message.

    00:26 Then we can display that message above the input. This message is going to be input and we use input with the square bracket syntax. We'll create another line here and say message . This needs to be wrapped in the square brackets so that when I pass in message, it will take this message off of the mail messages and pass it into the input here. Then my component will receive that message and then display it in the template.

    00:59 When I hit save, you'll see we have this message above each of the inputs, and that it created a component for each input. The difference between this without the square brackets is when I hit save you'll see that it won't evaluate this message. It will treat this message as if it were a string. You'll see message, message, and message.

    01:22 Any time you want to take a property on an element or an input on a component, make sure and wrap this with the square brackets so that it evaluates this to get the value of message versus treating it as the string of message. This can be named anything and this can be named anything.

    01:41 Similarly, we could name this anything and name this anything and so on and so on. They don't have to both be named message. That's just the way they'll work out in this example. I'm just going to add the square brackets back, hit save, and we're back to having the message in each of our components.

    Discuss

    Discuss