Gmail compose dialog box.

Write less & code more!

Hey! good day!, One simple creation like Gmail composes a dialog box with Angular. It’s fully dynamic we able to access from any component and if the user redirects to any other page also it stays on the page, just like Gmail.

Before we get into the code, we should know “The files we needed”

Steps:

Step 1: Dialog box component

Create dialog box component ng g c UploadExcelDetails

I have created component like UploadExcelDetails. you can create based on your needs…


Write less & code more!

In this image sample console table.

Let’s create a dynamic table structure with angular. You are able to handle table header and body dynamically from HTTP response. it’s a bit crazy but it will work!, it will work with normal Javascript as well(only the diffrence is appending to HTML and variable declaration, you can use business logic). let’s do this!.

First, we are taking sample JSON.

 colorDetails = [
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
},
{
color: "magenta"…

A simple minimalist example image is given above.

Following example implement in your component and the same code will work slide from left simply change the left property in style(@keyframes rightToLeft) instead of right.

Please visit following git gist link to get code:

https://gist.github.com/kailash4/e54cfbb4c02bb26e4be32bbd16f21762

<script src=”https://gist.github.com/kailash4/e54cfbb4c02bb26e4be32bbd16f21762.js"></script>

Good luck!

kailash N

I am a UI developer ( Mobile & Web ) and basic experience in UX designing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store