2. Frameworks
  3. Angular

Installation

Install Preline UI with Angular using Tailwind CSS

Setting up Preline UI in a Angular project using Tailwind CSS.

Installation

Please note that the plugin has been tested with the latest version of the framework (v17.0.0). The framework was installed using the standard ng new <project-name> command. Components were created by ng generate component <component-name> command.
If you are using your own project structure, be mindful of file paths!

Quick Angular setup

A JavaScript framework for dynamic web applications. If you haven't set up Tailwind CSS yet, check out Angular Tailwind CSS installation guides.

Preline UI + Angular

  1. Install Preline UI

    Install preline via npm or yarn. 

    // Terminal or Shellnpm install preline // or yarn add preline

  2. Configure Preline UI JavaScript paths

    Add the path to Preline UI JavaScript files in your tailwind.config.js file. 

    // tailwind.config.jsmodule.exports = {  content: [      './node_modules/preline/preline.js',  ],  plugins: [      require('preline/plugin'),  ],}

  3. Add the Preline UI JavaScript

    Include Preline UI JavaScript to the projects_root_directory/angular.json file. 

                          
                        {
                          ...
                          "projects": {
                            "angular": {
                              ...
                              "architect": {
                                "build": {
                                  ...
                                  "options": {
                                    ...
                                    "scripts": [
                                      "node_modules/preline/preline.js"
                                    ],
                                    ...
                                  }
                                  ...
                                }
                                ...
                              }
                              ...
                            }
                            ...
                          }
                          ...
                        }

  4. Add a reinitialization helper

    Add code that reinitializes the components every time the page is refreshed to your app projects_root_directory/src/app/app.component.ts 

                          
                        ...
                        import { Router, Event, NavigationEnd } from '@angular/router';

                        import { IStaticMethods } from 'preline/preline';
                        declare global {
                          interface Window {
                            HSStaticMethods: IStaticMethods;
                          }
                        }

                        @Component({
                          ...
                        })

                        export class AppComponent {
                          constructor(private router: Router) {
                            ...
                          }

                          ngOnInit() {
                            this.router.events.subscribe((event: Event) => {
                              if (event instanceof NavigationEnd) {
                                setTimeout(() => {
                                  window.HSStaticMethods.autoInit();
                                }, 100);
                              }
                            });
                          }
                        }