Format Output with Pipes

[00:00:00]
>> Alex Okrushko: All right, so this is the input, linked signal computed. Let's do some output. So in our event card, we have this remove button. Again, some of this, should you be able to remove it from here, maybe it's admin functionality. Anyhow, we have this remove button that we want to send the output to the parent now as well. Let's add this functionality, at least passing the message along.

[00:00:32]
So after my inputs, I'll create the output. I'll call it delete output, and I don't really need to specify the type because it's void by default, and yes, if you want, you can specify the void type here as well if you want to, but it's optional at this point. And now I'm going to add another method here, see, I'm adding methods further down.

[00:01:11]
I'll say remove event, and when this method is invoked, I'll just do the delete emit. And again, these things are available on a template as well. Some folks would probably want to just invoke the delete from there emit. You can do that. Generally speaking, when I'm working with my codebase, I'd like to have any functionality, any methods that are happening to be done in the component itself, and then the template will just call that method.

[00:01:53]
It just, it'd be easier to find, right? And because again, templates can get quite complex, especially with the tailwind and stuff and friends, right? So trying to simplify this as much as possible, so we have these buttons called remove. So I'm going to add the functionality to this button, and as you can see here, we can just see, here's my button, here's my button.

[00:02:28]
So I'll just do, and this button is clicked, then I'll invoke the remove event and I was auto, autocomplete, it's all good. So now we provide this output out. Now in the event list, let's listen for this and do something. In this case, see it autocompletes as well, it helps really a lot. So when we have this delete, we'll just do the, we can do the console log, for example, because we don't have any functionality and says, and we can say, hey, like delete clicked, and we can kind of do the same for this guy here.

[00:03:25]
But you might notice something that console is not available in the template because it's a template, it's not available there. The way we can bring it to the template is we can create a property for it in the component class itself. This is called aliasing, it's quite popular, especially if you want to bring like enums to the template.

[00:03:48]
You a lot of times will create this thing as well. Obviously you shouldn't be using really like console logs in your production code, but just for the demonstrative purposes, and I'll just do the read only console. This creates the property and this property will be bind to the console itself, not this, but this, right? So now this console is now available in template.

[00:04:15]
This is again, very useful for enums, if you want to bring enums, right, you cannot just use them like that. This is a very popular technique. Perfect, let's see if that works. I'll have my console here, and then I click remove, and then I see delete clicked. Right, so now we know that the child is communicating with the parent through the output.

[00:04:53]
One more step here, well, two more steps here that we're going to do, and this is for our date. Right now our date here is TBA, right, to be announced. So let's, and we have the date coming in anyway as an optional, as an optional input. Let's also show this date, and the way we're going to do it is we're going to use something that's called a date pipe.

[00:05:34]
Pipes is another concept from Angular that was quite popular, especially pre-signal, it's very popular. It allows us to add some behavior to the templates, and this behavior could be either pure behavior or non-pure behavior, so they could be like almost like pure functions, which means same input, same output, or non-pure, and then you'll also be aware if it's pure or not, and then recompute that value every time or basically cache it as well.

[00:06:09]
So in this case, we're going to use the date pipe, and what I'm going to do in my imports, I'm going to add my date pipe right away, and it's coming, see, it's coming from Angular common. I'm going to show you how we can use this. So in our TBA, we're going to have values, let's read the values, so I have my date. Date is a signal that has a string.

[00:06:49]
Now I can pipe that value into the date pipe. So I pipe, this is the symbol for this, into the date pipe, and I can pass additional arguments to the date pipe, and in this case, my additional argument would be to style it as the medium date, right? Or if the date is not there, if the date is not there, let's put this in the parenthesis, or if the date's not there, then I'll have my TBA to be announced value.

[00:07:39]
Let's see what's happening here, and we can see here, December 10th, 2025, and this is the format of a medium date, and this is built into the Angular itself. It's really powerful, you don't need any extra libraries for this to work. Date is one of the pipes, and again, we can always check, for example, date pipe Angular, and we can see what other options that we can pass into this.

[00:08:14]
We can pass locales, we can pass so many things, we can have those options, short, medium, long, right? Very, very powerful. Another powerful built-in pipes are like currency pipe, for example, right, we can just say, hey, we want to have a currency and then the currency with specific information as well. Another pipe that if you've been using Angular for a while, that you're probably familiar with is an async pipe.

[00:08:49]
The async pipe allows us to unwrap the promise or an observable. It would subscribe to the promise or it will subscribe to observable, or it will basically await the promise as well and put the value in it as well. Very powerful thing, especially great if you're using like on push change detection. Kind of touch on it on the advanced a little bit.

[00:09:21]
So those are, decimal pipe is also there built-in, so again, the Angular comes with a lot of built-in cool stuff, and again, it's also very tree shakeable, so if you're not using any of these pipes, they're not part of your bundle. That's another thing to point out. Okay, so now we have our date, or the medium date, and we see it working.