Create a Tab Component

[00:00:00]
>> Alex Okrushko: going to introduce a few more things, we're going to introduce the tab and the tab group. So tab state. We're going to introduce tab states, so we're going to introduce tabs in our event details, so this is we've refactored just this one here, we'll have different tabs. When I show you another technique.

[00:00:24]
And this is called local state provided state, so it's not a root state. So we're going to create the service. I'm going to share, create it in the shared as well in a shared folder here. Let's do shared folder. We're going to new folder and we're going to have a tabs tabs. So we'll create the tabs common component, but this common component will have a service that works with it as well, so you'll have a tab state.ts.

[00:01:05]
So the tab state.ts will be our injectable. But this injectable is not provided in root. This is something we haven't seen yet. This is the first time we'll use this. So we'll have the tab state, and it's not provided in root. And this tab state will keep track of the active tab. So we're going to add the tabs for speakers, location and general description, I think.

[00:01:44]
So just like what anything we do now, we'll keep it as a signal. A string right, with say initial value of that, and then we'll have the activate. And then we'll have the label here for the activation, so say, hey, this is now the new active label. Label. String. So we'll just do this active tab set for whatever label we're going to be turning on.

[00:02:20]
So this service will be attached to the tab group. And we'll keep track which tab is active, so we are now at step 2, where we have our tab state. Tab state would be a dedicated service or injectable, to be very precise. It doesn't do any backend requests, so it's injectable for handling the state between different tabs.

[00:02:47]
So we don't have the tabs yet, we're going to create them next, but the first create the service here, well, injectable, and notably, this injectable is not provided in root. We'll see what we provide it. OK, so we now have this tab state that keeps track of the active tab. Let's create the tab group first.

[00:03:25]
So in our shared tabs, going to create new file. Call it the tab. Tab and tab group, so tab. Tab.ts. And then also new file tab group, yes. So that basically completes all of our shared component, which will be our tab group. Let's start with the tab first. So, let's create this component. Component.

[00:04:09]
And yeah, this will have the component will have the selector of app tab. And right away we'll do export class, which called tab, again, we don't call them tab components anymore, right? This is something we mentioned that there's changes how style guide for Angular 20 or 21 plus does things and no longer suffixes things with component, same for our files, we no longer suffix them with component.

[00:04:48]
So we have a selector for this, and we'll have the template. And the template. We have that, if we have an active tab, if this tab is active. Then it'll render it. So what is is active? What is active? How do we know that this is the active tab for that, we'll inject this service. Or this injectable, I'm using them interchangeably service injectable.

[00:05:27]
That is really injectable, right, so we inject get inject this injectable. Tab state and then, we also, by the way, have a read only label for this, for each tab, this is something that comes as an input. So we can differentiate them between each other. Distinguish them, OK, and this will be required.

[00:05:56]
String, something that we learned in the Angular intermediate Angular course. Now our is active is a computed state, it's a derived state. And this is the is active. Which is our computed. Computed. Computed. And what is active, what is the computed, is it active, so our tab state keeps the active tab.

[00:06:29]
And that's what we're going to be comparing with, so if the label that we have is the same as the active tab, that means it's an active one, and the beauty again of the computed is that if the active tab signal changes or the label changes, right, and then it will recompute. This computed value. So this label.

[00:07:06]
There you go. Now we can have active and if it's is active, then we'll create and produce the content here. So that means that the app tab once again is one of those composable elements that will have content projected into it. It just creates a few some like nice animations between them, but yes, that's what it's going to do.