Angular

This guide explains how to set up Hummingbird with Angular and Angular SSR using Tailwind CSS. It covers project setup, configuration, and usage for quickly building and styling components in a Angular app.

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in an Angular project.

2. Install Hummingbird

Install Hummingbird via preferred package manager:

npm install @hummingbirdui/hummingbird

3. Import CSS

Import Hummingbird styles in the main CSS file (e.g., styles.css).

/* You can add global styles to this file, and also import other style files */
@import "tailwindcss";
@import "@hummingbirdui/hummingbird";

4. Initialize JS plugins

Import Hummingbird inside the ngOnInit lifecycle hook of the root component. This ensures Hummingbird is loaded when the component initializes.

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App implements OnInit {
  ngOnInit(): void {
    import('@hummingbirdui/hummingbird');
  }
}

Optimization

To reduce the final bundle size, import only the specific JavaScript plugins required. The example below demonstrates importing only the modal script.

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App implements OnInit {
  ngOnInit(): void {
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/alert');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/button');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/carousel');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/collapse');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/dropdown');
    import('@hummingbirdui/hummingbird/lib/esm/scripts/modal');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/offcanvas');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/popover');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/scrollspy');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/tab');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/toast');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/tooltip');
  }
}

JavaScript API

Hummingbird also provides a JavaScript API for programmatic control of components. For example, a modal can be toggled manually using the API.

Here’s how to initialize and use the Modal component:

import { Component, OnInit } from '@angular/core';
import { Modal } from '@hummingbirdui/hummingbird';

@Component({
  selector: 'modal-component',
  templateUrl: './modal-component.html',
  styleUrl: './modal-component.css',
})
export class ModalComponent implements OnInit {
  ngOnInit(): void {
    const openBtn = document.querySelector('[data-open-demo-modal]');

    const myModal = new Modal('.modal');

    openBtn?.addEventListener('click', () => {
      myModal.toggle();
    });
  }
}

Server-Side Rendering (SSR)

When using Angular with SSR, load Hummingbird only in the browser to avoid hydration errors. To handle this cleanly, create a dedicated service (e.g., hummingbird.service.ts) inside a services folder. This service runs scripts safely on the client.

// src/app/services/hummingbird.service.ts
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({
  providedIn: 'root',
})
export class HummingbirdService {
  constructor(@Inject(PLATFORM_ID) private platformId: any) {}

  loadHummingbird(callback: () => void) {
    if (isPlatformBrowser(this.platformId)) {
      callback();
    }
  }
}

Inject this service into the root or feature components to safely load Hummingbird only in the browser.

import { Component, OnInit, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HummingbirdService } from './services/hummingbird.service';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App implements OnInit {
  constructor(private hummingbird: HummingbirdService) {}

  ngOnInit(): void {
    this.hummingbird.loadHummingbird(() => {
      import('@hummingbirdui/hummingbird');
    });
  }
}