Collapsing Toggle Button


In this article, we are creating collapsing toggle button with angular 5. In angular 5 animation tutorial, we will generate angular CLI and make collapsing toggle button with the use of CSS. So we will start with the simple angular commands and end with the toggle button. Especially when you are working on the animation you open the door of imagination.

So here is the final output of the tutorial.

Angular 5 Animation Tutorial

Angular 5 Animation Tutorial

So in this article, we are building tutorial. Here You will see we create collapsing toggle button. When you click on this button you will see the paragraph.

So let’s jump into the code.

First, we need to open the editor. I am using the visual code you are free to use any other editor also. Before we start building the application just make sure you install node application on your system if not then please install that first. To know how to setup angular environment read this article.

After setting up the environment you follow this commands to create a new scratch application. So just open the terminal of the editor or press Ctrl+~ operator.

So we will first check out the latest node version is install or not. if not the install the latest version of node. After that create a directory and go into this directory using cd [directory name] command.

Then execute this command to create a new angular application. we will name our application my-app.

After creating the application you will see this file structure. we working in src folder.

Now the time is to work in the application.

We are working on the default component. So just go inside the src and app folder.

app.module.ts

Find the app.module.ts file and import animation module.

You will see on top we using import statement we imported the animation module. After that, we will add the module to in the import parameter of @NgModule. So in the imports we will specify the name of the module so we will specify BrowserAnimationModule here.

index.html

In the index.html file, we will link bootstrap framework. we will use this framework only for the ui. we are not using this framework for create bootstrap collapsable button.

You will see in the head we added the Bootstrap CDN.

app.component.ts

In app.component.ts file we will import some animation function which we are using for the component. So using import statement we will import that first.

After that, we will create another parameter for the component class..

In this code, we added the animation parameter. for the component module.

After that, we will create the trigger function to execute the animation and add state parameter to specify style for the component.

Here in this code, we added trigger function and specify a name for the animation. In the second parameter, we will create an array of state function. Create state function and specify the unique name for the first keyframe. if you use CSS keyframes then this code would not difficult to understand you.

After that, we will create the style in state function and specify default CSS property. Especially, the first state is for applying the default style for the component. After that in the next state, function specifies the style which you wanted to apply when you do something. So we just increase the height of the component.

After that, we will add the transition property to create a smooth animation. In this code, you will see <=> this operator. This is the shorthand operator of applying the same animation both side.

After that in AppComponent class, you need to create state property. Then create animateMe() function. This function is basically created for creating a toggle button. So we will use this function for toggling the styles.

Your app.component.ts file looks like this.

In the animateMe() function we will add if statement that checks the value of state property. if the value of state is equal to small then we will specify large text property to it. if the property is equal to small then change it to small. We are using the shorhand if else statement here.

app.component.html

In this article, we will create this design and be applying the animation to the buttons.

In this code, We created a collapsing button title and specify a bootstrap class to it. So we use text-center and padding 4 bootstrap class.

After that, we created another division with the inner class. We are using this class only for the center the element, not for anything else.

After that, we will create a button and specify click event to it. In the click event we will call animateMe() function.

After that create paragraph and specify some text and bootstrap classes. We will apply the animation for the paragraph. So we will just use this code to apply the animation.

Keep in mind that this property is connected to the AppComponent class property. Means this is the AppCompnent class property and we are binding this property with the animation.

So now you function work like this.

When you click on the button then animateMe() function will class. In this function, we will create if statement. In the if statement we will check first if the property string is equal to small then change it with large else if the property is large then change it with small.

Using this function we will call the animation small and large styles. So it will work equivalent.

app.component.css

 In this file, we will just specify the style for the HTML elements.

Everything is ready.

Now we will run the application using this command.

Run application ng serve -open using the command.

That’s it.

Now you are able to see the collapsing animation. Your Angular 5 animation tutorial is ready.

If you have any question then comment me in the comment section. Share this article with your friends.

That is all for now.

We will see you in the next article.

Leave a Reply

Your email address will not be published. Required fields are marked *