Two-Way Writable Signals

[00:00:00]
>> Alex Okrushko: What else do we have new? Right now, input and output kind of work backwards, but we can do even cooler. For example, let me just comment this name in and out. And I'm going to comment this one. So we just have it for comparison and just create a new one. In a parent we can create, so right now I see we're updating it manually.

[00:00:34]
But in a parent, we can create a new thing, we'll scroll with text. I'll rename this into string, and this will just be new text of type signal. And text signal. Where my signal, oh yeah, this is complaining here. Signal isn't imported. Not important signals here. Okay, and then I'll pass the set the default value, for example, of Angular.

[00:01:18]
Okay. So our out is we're going to comment this out as well. And move it out of the way a little bit, so in our parent, I'm now using the text signal. The cool thing about signals is they are writable signals by default, so when we create a signal. It actually creates a writable signal. That means we can do this.

[00:01:53]
Text set value set to new value, right? Or we can do the update. An update will take the previous value. And we can do something with the previous value, right? So we can do cool things with signals. Now, let's just leave it as is. Let's just leave it as is, and here in my app child. I'll create a new thing we'll call it a model.

[00:02:38]
So, let's just say this name. Name. Is now a model. Model allows us a two-way binding with the parent. So we can change the model internally within child component. And that change will be propagated back to the parent as well, so this model will work with string. Well, this one will work with string. I still need the update function.

[00:03:12]
Because otherwise it's complaining about it. And let's see what we can do with this, so right now this model. Is being passed as the entire signal, right? So we have the entire signal that we're passing. I see, the text here is now a signal. Right, so it evoke the signal to read the data from it, is that you see otherwise what it was?

[00:03:41]
It was saying signal Angular. Shouldn't be signal Angular, we need to invoke it to read the data. Now, let's pass this text. What they had name, name. Name. And we'll pass this text value. Now we can still pass it as this, and the model will read it and display it, right? This is in a child now. But it doesn't support, then we don't do the two-way, just only one way from parent to the child.

[00:04:27]
The way we can do two-way is we don't invoke it and we pass the entire signal to this. But you see now it says, hey, writable signal and signal not working together. The way you're going to do it is, again, it's called banana in a box. So, the name would not only be used as an input, but it's also going to be used as an output, exactly, so we'll use it as an output as well, and it's like, ah, now I'm not just passing a simple value to this, now I'm really setting up a two-way communication.

[00:05:09]
And now in my model here, I'll do the update and I can directly hear this name, set, new value, whatever I want to do. Oh. Hello from model. Right, so we can, I'm interacting with this as I'm interacting with any signal, basically. But you see, I don't need to have a special output now, it's just directly works.

[00:05:38]
So we have a basically two-way communication now. We no longer use the string, we use the signal. Right, and if you click update. There you go. See how it binded. The signal from the parent to the output. So banana in the box syntax is actually a sugar syntax, means it's a shortened way to for convenience, we can still decipher it, decompose it to just the input, and then I'm passing the text to it.

[00:06:23]
Right? And then we'll listen for the output, but not just the name. I will just do this. Both the text, text set. This new event value, but not just the name, you don't work, it's a change, event change. Will work now. And then it says undefined, so it can kind of enforce it a little bit. This is because it could be undefined, right?

[00:06:48]
It's not required, it's not required, so it could be undefined, that's why we needed to enforce it. You see, that's what it basically does, that banana in a box syntax listens for the same name plus the change suffix. And this is again, really cool stuff, right? So, instead of this is passing the value and reading it back and setting it, just having it as a banana in a box.

[00:07:17]
And passing the signal directly, we don't need to manually listen for the output, it will basically know that, hey, I need to set that value now. And then again, it all works. All right, that's the input, the output. And the model.