Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Getting Started Integration

Angular

This guide outlines the integration of the latest Angular framework with Metronic Tailwind, providing a comprehensive foundation for building modern web applications.

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.
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.
Previous Vue Next Laravel