Installation
Setting up Preline UI in a Angular project using Tailwind CSS.
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!
A JavaScript framework for dynamic web applications. If you haven't set up Tailwind CSS yet, check out Angular Tailwind CSS installation guides.
Install preline
via npm or yarn.
// Terminal or Shellnpm install preline // or yarn add preline
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'), ],}
Include Preline UI JavaScript to the projects_root_directory/angular.json
file.
{
...
"projects": {
"angular": {
...
"architect": {
"build": {
...
"options": {
...
"scripts": [
"node_modules/preline/preline.js"
],
...
}
...
}
...
}
...
}
...
}
...
}
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);
}
});
}
}