In this lecture, we are going to design an alert component for rendering messages.
The beauty of Angular is being able to perform actions behind the scenes.
Unlike traditional apps, the page does not refresh whenever the user interacts with our app.
On the other hand, we have to inform the user when an action is performed in the background.
We will design a reusable alert component.
The idea of the component will be simple.
It'll be a colored box with a message super simple.
We will use this component to render a message to the user when their registration form is being submitted.
We should let them know we're processing their request.
Let's get started in the command line.
We will run the following command N.G. GC shared slash alert.
We are declaring the component under the shared module.
We will be creating multiple forms throughout our app openly shared module file.
Scroll down to the exports option.
Add the alert component to the array.
Great.
We can start working on the components, open the alert template file.
Inside the template, we will add a div tag with the following classes text white center font bold.
These classes will change the color of the text to white, censor the text and bold in it.
Next, we will add padding and margins and the following classes P for and B for Rounded M.D..
The last class will round the corners of the box before moving on.
The alert component will not render content.
Instead, it'll allow the parent component to project content inside the div tag.
Let's add the energy content element.
That's basically it.
It's a component with a few classes to make the element stand out.
There's one final class we need to add, which is the background color of the elements.
This part of the component should be dynamic.
We should be able to configure the color through inputs.
You may be wondering why are we choosing to make the background color dynamic?
Different colors are associated with different actions.
The alert component should have a dynamic background color for different colors.
Open the alert component class file.
At the top, we will add the input decorator function to the import statement.
This decorator will help us with accepting input data in the class defining property called color with
this decorator.
The type for this property will be strong.
As for the initial value?
The default color should be blue.
Tailwind has a set of classes for changing the background color of an element.
The format for these classes is the same regardless of the color.
We will create a function for returning the color below the property to a method called Big Color.
Inside this function, we will return the following value B.G. Discolor 400.
The name of the class is big, followed by the name of the color.
You can refer to the tailwind documentation for the list of available colors.
We will typically set the color with the help of an input.
There's one more thing we will add to this function.
We will add the get key word before the function name.
If you're not familiar with this keyword, that's perfectly fine.
The get keyword, we'll treat our function as a getter function.
The purpose of a getter function is to return a modified property.
We don't want to directly access the color property.
Instead, we want to return a class name with the color.
All our function is doing is returning the formatted class name.
The get keyword allows us to access the value returned by the function as a property.
It allows us to create properties with extra logic before the property is set.
Let's try using this property in our template.
Back in the template file, we will bind the new class property to the Big Color property.
Notice how we're writing the property.
It doesn't have parentheses behind the scenes, TypeScript will run the function and store the return
value.
We don't have to invoke the function ourselves.
Our component is ready.
The next step is to start using this component.
Let's update the register component to render this component open the template file for the register
component.
We are going to render the alert box above the form, the name of the component is called app alert.
There are three pieces of information we need to provide the component.
First, we need to provide the content.
The message should be dynamic based on what's happening.
We are going to keep it simple with some text.
Second, we need to toggle its appearance.
We don't want to show the alert component if the user hasn't submitted the form on this component.
We will add an NGF directive.
The condition for this directive will be a property called Show Alert.
Let's add a message inside the tags and an expression for a property called alert message.
Next, we are going to bind the color property to a property called alert color.
We are going to dynamically change the color, text and visibility.
These properties don't exist in our component class.
Let's start creating them.
Open the register component class file.
Inside the class, we will define both properties.
First, we'll start with the show alert property.
The initial value will be false.
The alert component should be hidden.
Next, we will create the alert message property.
This property should contain a message informing the user their account is being created, its value
will be the following value.
Please wait.
Your account is being created.
Lastly, we will define the alert color property.
Its value will be blue.
Our properties are ready.
We are going to change them inside the register function, the console statement can be removed entirely.
We don't need it anymore.
First, we will set the show alert property to true.
This update should render the component above the form next, we will reset the message to its initial
value.
Lastly, the alert color property should be reset to blue.
Resetting our properties might come off as strange.
However, the register function may be called multiple times if the server fails to create an account.
The user might attempt to submit the form again with different values.
If that's the case, we may need to reset the message.
There's one more step before considering our solution.
Complete tailwind is going to run into problems with the dynamic class.
In the alert component class, we're defining a getter function for returning the background class of
the component.
Unfortunately, tailwind will not be able to understand what we're trying to accomplish.
These classes will never be added to the final bundle.
Luckily, we can configure tailwind to manually include classes open the till win configuration file
under the content option.
Add an array called safe list.
We are configuring the perjure, which is responsible for removing unused classes from the bundle,
this array may contain a list of classes that should be included in the bundle, regardless of if they
appear in our app.
Let's add the following classes Big Blue 400 Big Green 400.
Big Red 400.
By adding this option, the background color of our alert box should be toggle of all.
We've done a lot of coding.
It's time to test our component in the browser.
Initially, the component is hidden from the user, which is what we want.
Let's try submitting the form with valid values.
This time, the form gets submitted.
We can clearly see the alert component.
Our message perfectly stands out with that.
We've completed validating the form.
The next step is to create an account.
We will start this process in another section.
We're not going to jump right into it.
Instead, we are going to look into template driven forms at the beginning of this section.
I talked about the two systems in angular four working with forms.
This entire section has been dedicated to reactive forms.
We are going to look at template forms in the next section.
Specifically, we will applying this system to the login form, which is much simpler.
Once you're ready, I'll see you there.