Passing Data from Parent to Child

[00:00:00]
>> Alex Okrushko: So our first module, I'm going to utilize these concepts, and just make sure that you do have your server running and I'm going to double check, I do have mine running. OK, so we're going to open an event card, and what we're going to do here is we're going to pass some data from the parent to the child, so we're going to pass something from the event list component to the event card.

[00:00:32]
To render card itself. We have our event list. This is the parent and right now we are using the event cards, but we're not passing any data, right? So, we don't have any data, we're not passing any data to it. And then we have our event cards. Right, that basically don't show anything. So let's fix this. We'll introduce a few things first.

[00:01:02]
We'll introduce the title, the image, and the date that would be inputs, and notice the date is an optional one. So I would suggest going along with me and typing the code. If you have any questions, you know, happy to answer as well. You can also copy some of this code and paste that, that works too, that's probably even faster. OK, so now we'll introduce this input that is required.

[00:01:41]
And you see right away, it doesn't know what it is, so don't forget to import this as well as you go. So it's imported and now it autocompletes required and we'll have it for the string. And by the way, we can also do a read only. Just to specify that it is not meant to change the reassign the reference, not a big deal, different conventions have used in different codebase.

[00:02:12]
I typically prefer to have, if it's read only just type it read only as well, completely up to you. Input can still be set properly by the parent, even that's read only, read only means it's not going to be changed within the component itself. But don't do private because private's not available, so you can do it only, not up to you, so we can have the image that is also the input that is also required, that is also string.

[00:02:44]
Right, and by the way, here is another thing we can do, we can provide default values here, right? Since it is a required input, that means the parent will have to put something in, so there's no point having default value because it will be overwritten anyway. And then we have the date that would be input of string. And we are OK with the date to be undefined, because right now it'll be by default string or undefined, we don't have any value here.

[00:03:24]
By the way, see, it changed if I provide default value, it now knows that it cannot be undefined. That's kind of a cool TypeScript trick that Angular is doing, all right, so now we have these things, let's go and we save it, so we have these inputs now we can go back to our event list. See, they are now requiring those things. All right.

[00:03:57]
So, we have those inputs, let's adjust our template to have this data also be displayed in the template. All right, so first thing we have, we have this image. And we'll see you have little helpful tags here saying, hey, to do add image here. So we're going to add an image, you can basically copy and paste this code. And I'm going to walk over what we do here, it's just a div that contains the standard image tag.

[00:04:37]
And the source, which is again the standard attribute, we're binding to the image output. Right. This is required, it's going to be fine, we're setting some Tailwind classes, so it's taking the full space of its parent, and also we do want to make sure that everything we do is accessibility friendly, so we'll provide the alt for the image as well.

[00:05:08]
Alright, so then we have this title placeholder, right, the title, right now it just says title placeholder, so we'll have the title that we're going to be passing into, so again, let's use this. This will be the title. And again, it's a signal, so have parentheses. Cool. Now, we have those things. Let's, these are required. Let's pass them from the parent.

[00:05:48]
And we don't have the data really yet, so I'll just going to comment one of them. I'm going to use the other two. So the first one again, that can pass the title as Angular keynote, for example. And notice I'm not taking this into the square brackets. Why am I not using this? Does anybody know? Why it's an input, why is it not the square bracket?

[00:06:22]
Because I'm passing the string value directly. If I have a property that I'm binding the input for, then I'm saying yeah, that's the property to read the value from. If I make a square, I was like, hey, no, this is not, this is no longer a string, this is now a thing, a property that is trying to find from it, so I mean, I can do this. Right, passing a string to this, but again, that's not necessary if it's just a string here.

[00:06:58]
So we'll change it later, of course, but for now we can just use it as it is, so inputs can still be passed like this. We'll have the image from our images from the public. So for the keynote, we have this Angular keynote one. So I do images, Angular keynote, and this is the PNG that I have, and we'll pass the date for one of them and not pass the date for the other.

[00:07:34]
I typically mess up the date when I try to type it like that, so I'll just copy paste this. All right, and this one, we'll have another title. For example, this will be the signals, deep dive, right, and we'll have an image for this too, which would be at images, signals, deep dive PNG. All right, so I saved it auto formatted. We fulfilled the required inputs, we have them visible, so we now should see this in the template, and yes, right now we're just hard coding the values, of course, but we can see that those inputs now being passed from the page itself down to child component.