Have you ever seen the toasters and wished you can make yours using Angular, Tailwind and Animate.css? This tutorial will give you a quick walk through!. This tutorial was developed using Angular 13.

Install tailwindcss

> npm install -D tailwindcss postcss autoprefixer
> npx tailwinddcss init

Install tailwindcss along with a few packages required to link angular builder with tailwindcss builder.

Update the "tailwind.config.js" file with the following content, to tell tailwindcss where to find the classes for building

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then add the tailwindcss required or default plugins to "styles.scss"

@tailwind base;
@tailwind components;
@tailwind utilities;

You are done, tailwindcss should be working now, if still doesn't try to rebuild your Angular project.

Install Animate.css

We will need animate.css for the animations. It has already simplified the animations we need. We just have to call them in our Angular app!

> npm install ng-animate --save
> ng add @fortawesome/angular-fontawesome

We also added font-awesome icons, since we will need some of them in the application to make the icons more appealing!

Next we need to update "app.module.ts" to use the Angular animations package, and also to use the "animate.css" module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component'; 
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FontAwesomeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • "BrowserAnimationsModule" is required to allow component animations and defining the triggers to associate our animations!
  • "FontAwesomeModule" allows us to use the font-awesome icons in our components.

Put it all together

Then let's put it all together to get the toast 😎

  1. Update the component to include the toaster component. The following is the code for component itself.
<div
  class="w-80 h-fit shadow-xl fixed top-14 right-14 bg-white rounded-xl flex"
  [@showToasterAnimation]="showToaster ? 'show' : 'hide'">
  <div class="h-min-full w-2 bg-green-600 rounded-l-xl"></div>
  <div class="flex w-full h-fit flex-row p-3 justify-center">
    <div class="h-min-full flex flex-col justify-center mr-3">
      <fa-icon [icon]="faCheckCircle" class="text-4xl text-green-600"></fa-icon>
    </div>
    <div class="">
      <p class="font-bold">Success</p>
      <p class="text-sm">Your event was completely successful! And other messages as well</p>
    </div>
  </div>
  <div class="absolute pl-2 pr-2 h-1  w-full bottom-0 left-0">
    <div class="bg-green-600 h-full" [style.width]="progress"></div>
  </div>
</div>
<button (click)="_showToaster()" class="bg-green-600 rounded-xl text-white p-4">Click me!</button>

2. Update your component to include the animations in the component decorator!

import { bounceInRight, bounceOutRight, fadeInDown } from 'ng-animate';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
  animations: [
    trigger('showToasterAnimation', [
      state('show', style({})),
      state('hide', style({
        opacity: 0
      })),
      transition('hide => show', useAnimation(bounceInRight, {
          params: {
            timing: 2
          }
        }
      )),
      transition('show => hide', useAnimation(bounceOutRight, {
          params: {
            timing: 2
          }
        }
      )),
    ])
  ]
})

3. Add the code below to your component, it is the logic that controls triggering and behavior of the toast

export class AppComponent {
  faCheckCircle = faCheckCircle
  time: number = 5000
  progress: string = "0%"
  showToaster: boolean = false

  constructor() {

  }

  ngOnInit(): void {
  }

  _showToaster() {
    this.progress = "0%"
    this.showToaster = true
    let timeElapsed = 0
    const interval = setInterval(() => {
      timeElapsed += 10
      const progress = timeElapsed / this.time * 100
      this.progress = `${progress}%`
      if (timeElapsed >= this.time) {
        this.showToaster = false
        clearInterval(interval)
      }
    }, 10)
  }

}

4. Add the rest of the text for the page in your component html.

<div class="bg-gray-100 w-screen h-screen flex flex-col justify-center items-center">
  <p class="text-7xl font-extrabold bg-gradient-to-r from-blue-700 to-green-600 text-transparent bg-clip-text">Angular, Tailwind + Animate.css</p>
  <p class="text-2xl font-semibold text-gray-500 my-8">
    A simple fancy toaster. 😎
  </p>
</div>

Done!

Now run the code, you should be able to easily see your toast notification when you click the click me button. Have fun adding more functionalities, flexibilities etc to your toast notifications.


Find the full source code in GitHub. The code in GitHub, is a bit different, the toast component is extrapolated into the toast module!