In this lecture, we are going to create a Tab UI, designing a tab component is an entirely different
process from models.
We all get to explore some advanced features of angular.
Before we do, we need to discuss the overall design of the components.
First, let's check out what a Tab UI looks like.
I'm currently on the documentation page for tabs from the bootstrap framework.
We aren't going to be using bootstrap at all.
Unfortunately, tailwinds doesn't have an example of how tabs work.
The example we're looking at is purely for visual demonstration purposes.
A Tab UI has two features.
The first feature is a navigation menu for switching between content.
The second feature is the content itself.
Only one tab may remain active.
It allows us to group content together.
We will be recreating this type of behavior.
We are going to have two components for creating a Tab UI.
Unlike before, the modal component was a single component.
We didn't have a need to create a nested component structure.
Things are going to be different with our UI for taps.
Taps come in groups.
We want our tabs component to be reusable.
We should be able to display two tabs or 20 tabs.
What if we had two different groups of tabs?
How would we be able to tell the difference between one group of tabs from another group of tabs?
We don't want different groups of tabs to affect one another.
We can separate tabs by creating a container component.
The first component we will create will be a container for our tabs.
If we add a tab to this container component, the container will manage to switch between tabs.
Tabs defined outside the container will remain unaffected.
The second component we will create will be for storing the content for a tab.
Overall, we will have two components a container for a group of taps, another component for an individual
tab.
The container will manage the group of tabs.
This type of design is common for UI components that are grouped together accordions or another type
of UI element that can be implemented similarly to tabs.
Let's get started.
We are going to generate the components.
Open the command line in your editor.
We will type the following Command G See Shared Slash Tabs container.
You'll notice I'm not typing generate components, they generate components, Sub Command has a shorthand
sub command typing GC is the same as typing generate component.
They are free to use either a set of commands.
I prefer these shorthand versions of the command.
Let's run this command.
Next, we will run the following command G C Shared Slash tab.
After creating both components, let's export both components.
We don't have to declare the components with the shared module, the ceiling will automatically declare
both components.
We are declaring these components in the shared module because we want them to be reusable.
However, we do need to export them open the shared module file.
Inside the exports array, we will add the tabs, container and tab components.
We can move on to creating the templates, open the authentication model template file.
Below the paragraph tag, we are going to add the tabs container component.
We can start using our components right away.
The shared module is already imported into the user module, which is the module the authentication
modal component is declared under.
Our model has one group of taps one tab for the login form and another tab for the registration form.
Let's add to tab components inside the container.
Next, let's move the forms to their respective tab components.
The first tab component will hold the log in form.
The second tab component will hold the registration form.
I have added comments about both forms to help you find them.
Subsequently, we will start moving the navigation tabs.
They have a comment above them that says taps cut the entire unordered list element.
Afterward, open the Thames container component template file.
Replace the content with the unordered list element.
We are going to be using content projection to insert the content below the list.
We will need to add the energy content element below the unordered list element.
We're not limited to projecting regular HMO elements, components may be projected into other components
in this example, we are going to be projecting the tab components.
The tab component will need to project content to open the Tab Component Template file.
Replace the contents with the energy content element.
After making those changes, we should be able to view our components in the browser, refresh the page.
If we open the model, we will get the same UI.
We've separated everything into components in the next set of lectures.
We will begin making our tabs functional.