Download
Get started with your Angular project by downloading the Metronic integration examples from our GitHub repository. These examples provide a quick way to integrate the Metronic styles into your Angular project. This will give you a working starting point that you can customize to fit your needs.
Please note that the sample project does not include the Metronic Tailwind CSS source files by default. To integrate the styles, you need to copy the Metronic Tailwind CSS source files from your downloaded Metronic folder.
1
Copy Source Folder
Copy the
src folder from the metronic-tailwind-html package and paste it into the Angular src directory. Rename the copied folder to metronic so that the directory structure should now look like this: src/metronic.
This step imports the necessary styles and assets from the original HTML package into your Angular project.
In the
src/metronic/core folder, delete the unnecessary index.ts file. This file is not needed for Single Page Application (SPA) integration as it could cause conflicts. Instead, rename the index.spa.ts file to index.ts to ensure proper integration.
2
Copy Media Folder
Copy the
media folder from the metronic-tailwind-html package's dist/assets/media directory into your Angular project's src/assets directory. The resulting directory structure should look like this: src/assets/media.
3
Install Packages & Start Development Server
Install the required Node.js packages by running
npm install. Start the Angular development server by running ng serve.
npm install
ng serve
That's it! You now have the Metronic Tailwind template integrated into your Angular project.
Creating Project
This guide will lead you through the essential steps of creating an Angular project from scratch.
1
Install Node.js and Npm
Before starting with Angular, ensure you have Node.js and npm (Node Package Manager) installed on your machine. Visit https://nodejs.org/ to download and install the latest version.
2
Install Angular CLI
Open your terminal and run the following command to install the Angular CLI globally:
npm install -g @angular/cli
3
Create an Angular Project
With Angular CLI installed, you can create a new Angular project with a single command. Run the following in your
terminal:
ng new tailwind-angular
Follow the prompts to customize your project settings. Choose
scss when creating your project.
Please note that the installation wizard will ask you the following questions:
Please choose
No for the following questions.
√ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
√ Would you like to use the Server Routing and App Engine APIs (Developer Preview) for this server application? No
4
Serve the Angular Application
Change into your project directory and run the development server with the following commands:
cd tailwind-angular
ng serve
Open your browser and navigate to
http://localhost:4200 to see your new Angular app in action.
Integrate Styles
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic Tailwind CSS stylesheet into your Angular project.
1
Install Dependencies
Run the following commands to install TailwindCSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer sass
npm install mini-svg-data-uri @popperjs/core
npx tailwindcss init
The command will install the necessary dependencies for Tailwind CSS and Metronic. If you wish to use additional features like apexcharts,
axios, or clipboard, you must install them separately.
2
Copy Source Folder
Copy the
src folder from the metronic-tailwind-html package and paste it into the Angular
src directory.
Rename the copied folder to
metronic. The Angular directory structure should now look like this:
src/metronic
This step imports the necessary styles and assets from the original HTML package into your Angular project.
In the
src/metronic/core folder, delete the unnecessary index.ts file. This file is not needed for Single Page Application (SPA) integration as it could cause conflicts. Instead, rename the index.spa.ts file to index.ts to ensure proper integration.
3
Copy media folder
Copy the
media folder from the metronic-tailwind-html package's dist/assets directory into your Angular project's assets directory.
The resulting directory structure should look like this: src/assets/media.
4
Import Styles
Open the Angular main style file
src/styles.scss and add the following import statement:
// Main style
@tailwind base;
@tailwind components;
@tailwind utilities;
// Keenicons
@import "./metronic/vendors/keenicons/duotone/style.css";
@import "./metronic/vendors/keenicons/filled/style.css";
@import "./metronic/vendors/keenicons/outline/style.css";
@import "./metronic/vendors/keenicons/solid/style.css";
This step ensures that the styles and icon fonts are properly imported and applied to your Angular project.
5
Copy Tailwind Configuration
Copy the
tailwind.config.js file from the metronic-tailwind-html package to the root of your
Angular project.
Edit the file and update the following content to the
content and plugins array:
// ...
content: [
"./src/**/*.{html,ts}",
],
// ...
Replace the paths to the core plugins in the
tailwind.config.js file. Replace src/core/plugins with src/metronic/core/plugins for each plugin path.
// ...
plugins: [
require('./src/metronic/core/plugins/plugin'),
require('./src/metronic/core/plugins/components/theme'),
// ... and so on
],
// ...
This step configures Tailwind CSS to scan and process your Angular project files, and it also integrates additional
Metronic plugins.
6
Disable Strict Mode
By default, Angular has strict mode enabled. However, for the integration process, you need to disable strict mode. Open the
tsconfig.json file and set the strict property to false.
{
"compilerOptions": {
"strict": false,
// ... other options
},
}
Integrate Core
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic core components into your Angular project.
1
App component
To integrate the Metronic core components into your Angular project, you need to initialize them in your app component.
Open the
app.component.ts file and add the following import statements:
import KTComponents from '../metronic/core/index';
import KTLayout from '../metronic/app/layouts/demo1';
2
Implement the
AfterViewInit lifecycle hook to initialize the components:
ngAfterViewInit(): void {
KTComponents.init();
KTLayout.init();
}
With these steps completed, the Metronic core components will be initialized in your app component and ready to use.
