How to Create Ionic Chat Bubbles with Elastic Textarea [v4]

ionic-elastic-chat

Building your own chat component isn’t that easy, especially the backend part of connecting your users and managing your groups. But leaving that out for now, we can focus on building an easy and simple UI for any chat!

In this Quick Win we will build a chat UI with alternating message styling and also use an elastic textarea input in order to mimic the classic chat message input field behaviour.

ionic-chat-elastic-text

For this we only need one additional package and some CSS!

Starting our App

First of all we create a new app and install the before mentioned package to easily get an elastic textarea:

In order to use this package you need to add it to the module file of your lazy loaded page, so in our case we can simply add it to our app/app.module.ts:

We are not using or building a real backend in this scenario and only use some dummy messages – this Quick Win is about the UI part.

But there’s actually a course on building a Firebase Chat inside the course archive as well!

Building our Chat View

Now we can continue with the basic functionality that your chat app will have – the send message function.

Besides that we create a local array of some messages just so our testing view looks a bit nicer later. Also, we need a connection to the ion-content in order to scroll our view to the bottom later when we send a new message so we always see the latest in our view.

So in our case we will simply push an object to our array of messages for a new message. In your case always make sure that you can distinguish between who sends the message in order to display the messages at the right side of the chat later.

Go ahead with your app/home/home.page.ts like this:

Now we need the view which basically only shows a list of messages and at the bottom the input for new messages.

In our content we now have 2 blocks for messages: One block for messages that the current user sends, and the other block for incoming messages (like any good chat app). In order to separate them visually as well we can use the Ionic grid system and the offset to push one of the bubbles to the side while also applying some special CSS classes to both message areas.

Finally, we also make use of the ngx-autosize package we installed in the beginning inside our footer by simply creating a textarea and then adding autosize to it. This will automatically change the size of the field (yes there are other ways to achieve this as well, but this one works super easy).

We also use the Ionic grid system in the footer to display the button centered next to the input – if you want to use this on bigger screens as well simply define some more different sizes for the other breakpoints of the grid!

Now change your app/home/home.page.html to:

If you now run your app it will almost look like a chat.. But without any real styling. So in order to make it appear visually nice with different colors, some spacing between texts and everything you expect from a nice chat we gonna tweak our styling.

You can find out if a component uses CSS variables or just regular CSS by inspecting it in the debugging view of e.g. Chrome or Safari!

For now though, change your app/home/home.page.scss to (or apply some different values as you like):

Now we got the whole chat view in place with the ability to add new messages (which can span multiply lines)!

Conclusion

Although the hard part of a chat is the logic, you need a decent UI as well. You can adapt this pattern from most chat apps like WhatsApp or iMessage so simply check out their UI and tweak this code as you need.

You can also find a video version of this Quick Win below.