Linked Signals

[00:00:00]
>> Alex Okrushko: There's another cool thing that we have. Angular has a lot of cool things that it added recently, and the other one is called linked signal. So linked signal allows us to change things within component, yet still be tied to the input, for example, that is passed from the parent. So, and then, moreover, whenever the parent changes, it re-updates internal state.

[00:00:34]
Let me show you what I mean. So say we have this name, and say we have, for example, first letter or something like that, and we'll create this. We're going to use a linked signal for this, and we're going to say, you know what? Whatever the name is coming from this name, of course, we'll just substring it. I will make it required so we don't need to do this, and then we'll just basically substring it to like 0, 1, right?

[00:01:27]
And I'll just put somewhere here just some div. All right, and this will do first letter and provide the value as well. All right, so now, see we have this first letter that's linked signal, so it's using this name. And let's actually change this not to model. I can say it's an input, right, so just to make it super clear that we're not trying to update things here.

[00:02:16]
We'll have update here. We'll just remove this button. We'll have the button from the parent as well. Oh, actually we have two buttons. I'll just do two buttons. We'll have this update. We'll say update for the child, child update. And we'll have this button do. We're going to change this first letter, this first letter, set, because we can interact it with just like a regular one set.

[00:02:57]
Updated from child, right? So we can have that. And then I'm going to add another button here. So just there we have two buttons just to trigger some changes, parent change. And then we'll bind to click event and we'll do from parent. See update, update parent, for example. Let's get this update parent function. And then what we're going to do is we're going to change this text, so this will be no longer in and out.

[00:03:52]
We're doing the one-way text update, right? So we're just passing the text and in this parent will update text. Text. Oh, just, I don't know, something. We need to set it, right, of course, because it's a signal now. So initially we have. That's perfect, perfect. We have extra curly bracket. Let me just remove the rest of the stuff so it doesn't really mess up the visuals.

[00:04:45]
All right. We wanted the first letter. That's okay. That's okay. All right, so just to go over what do we have here? We have a parent that originally has the signal of Angular, right, just as Angular. And then we're passing this value to a child. We're passing to a name that is required. The first letter uses the linked signal.

[00:05:19]
It listens to this name and does some modifications, for example. And then we output it here as a signal as well, right? It's a writable signal. That is cool, right? We internally within this child, we can still update it to whatever we want, so it's a writable signal, so it becomes almost like a local state of this component that I can interact and change.

[00:05:54]
All right, but I'm still linked to the parent. If the parent is updated, right, if my text here is updated, it passes the new values and input. We read this input here, and linked signal here is linked to that signal through an implicit dependency, whatever we use in that callback. It's tracking any signal that will change there will reevaluate that expression, and then we'll get the new value out of this.

[00:06:32]
So let's see it in action. It's really cool actually. So this is A because what Angular is passed from the parent. Now in a child update here, this is my child update. I can reset this local state to whatever I want, for example. Boom, right now my first letter is just updated from child because I'm just setting this value directly.

[00:06:56]
It's not even going through this function. I'm setting this value directly. But now interesting part is my parent. If my parent pushes the new value, let's do this. Boom, right, it pushed it and my linked signal's like, hey, this input changed, the signal changed. It doesn't have to be an input. The signal changed that I'm explicitly, implicitly tracking.

[00:07:27]
Now this will be also re-triggering and updating the value. This is really powerful, and again, signals were introduced probably like two and a half years ago, and as you can see, Angular is adding more and more things to add on top of this. For example, linked signal was added somewhere in early 2025, I think, right?

[00:07:52]
But it allows us to do really cool things here. And moreover, by the way, see how we do things here. Linked signal is a little bit even more powerful. Instead of here, we can destructure it into a few components. We can have this as a source, and we'll say, hey, the source for this linked signal is this name, right? And then the next one is, you see, here's computation, computation.

[00:08:34]
And the computation is now a function of this value. And I, okay, just to do, so this value, right? And then it works exactly the same, right? Now it's just a little bit decoupled and like, ah, specifying the source explicitly. And I'm saying what the computation would be. But there's a really cool benefit for this computation, is that it can also give us the previous value.

[00:09:12]
So, for example, in this computation, I can just do plus previous, for example, right? Yes, good. So again, see, if the original was undefined, of course we can check it, some object, right? So this allows us to get the previous value of this first letter, not of the source of this first letter. So if you're passing the whole array and you're just picking one item of array, it becomes really powerful.

[00:09:41]
In fact, this is one of the great use cases. Think of when you're passing an options array to a child, and the child initially in the local state will just pick the zero, the first index, right, in a dropdown or something like that, right? The first item. Now your options change. The new options array is passed to a child.

[00:10:06]
And what you can do, you can see, oh, in my previous value that I stored, do I have one of the options that the user might already selected in that dropdown or something? If I have, I'll select that together with my new set of options. If not, I'll just use the first one. So it's really, really powerful. Awesome. Yes, questions.

[00:10:36]
Um, those are really cool features. Thanks. Um, what is the difference between the linked signal and then the updates of signal as well, that update? So linked signal is almost like internal state that is tied to another signal or a set of signals, and we'll re-update. Update just updates that one specific local state, right?

[00:11:04]
So, in fact, I can do update here as well, update, but update uses the previous value as well. It gives us the previous value if we want to, right? So, for example, update, previous value, and then previous would be plus, right? So this update, this is any signal has it. Any writable signal has it, right? So anyone can do it.

[00:11:30]
The linked signal, it's deriving the data, computes it from somewhere else, and then you can also manually still reset it locally. So it's like a more powerful signal. Can linked signals contain multiple input signals or more than one? And if so, how do we handle it? Yes, it can. It can definitely have multiple signals as part of it.

[00:11:59]
There's a few ways to do it. You can combine them together, but the main idea is you can depend on different multiple signals within it, and each one that changes will create the new computation. The cool part is, and that's a really cool thing about Angular system that are signals based, is it's called a glitch-free behavior.

[00:12:28]
So say you depend on two inputs, right, name and last name, for example, and say they both change at the same time. Your computation function will not be run twice. It will be run once, right? It will just realize because signals are synchronous. It will realize that both dependencies changed, right? And it will pull them first and then compute it once.

[00:12:54]
This is really powerful if you had things like RxJS before and be working with like combined latest. You might have run into the situation where you depend on two sources and each one will trigger the full recompute, which is, which is its own benefits. But in this case, there's no real benefit for that, right? So this is called a glitch-free behavior and it's really powerful.

[00:13:31]
And the answer is yes, you can use multiple triggers. It mimics the very similar thing, for example, like computed. Computed also creates a derived state, for example, but you cannot overwrite this. For example, if we say a last letter, last letter, right, and we have a computed, computed, and we'll say, okay, so we still have this name input, name input, but now we'll substring it from whatever this name length minus two to like this length minus one, right?

[00:14:27]
So minus one, right? And I'm going to import the computed. Computed is not writable. It's pure derivation of state based on what we have before. For example, here, if I'll even try to do last letter set, you can see it doesn't work, right, because set does not exist on the signal type. Set exists only in the writable signal type, which both first letter, see, this writable signal, so I can tell it, I can reset it locally.

[00:14:58]
This is pure derived state. And again, this is one of the first trinity that was released as part of the signals, the signal itself, the computed, and the effect, right? So, yeah, you can't reset it, right? So you can see where the linked signal becomes useful in such cases where you do want to reset it locally.