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 Assets
Copy the
dist/assets
folder content from the
metronic-tailwind-html
package and paste it into the Angular
src/assets
directory.
2
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 metronic-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 metronic-angular
ng serve
Open your browser and navigate to
http://localhost:4200
to see your new Angular app in action.
Integrate Metronic & KTUI with Angular
This guide will walk you through integrating Metronic and KTUI into your Angular project. Tailwind CSS is not required for this setup.
1
Navigate to Angular Project
Navigate to your Angular project folder.
cd your-angular-project
2
Copy Metronic Assets
Copy the
dist/assets
folder content from the
metronic-tailwind-html
package and paste it into the Angular
src/assets
directory.
5
Update angular.json file to include the assets folder.
"styles": [
"src/styles.scss",
"src/assets/css/styles.css",
"src/assets/vendors/apexcharts/apexcharts.css",
"src/assets/vendors/keenicons/styles.bundle.css"
],
"scripts": [
"src/assets/js/core.bundle.js",
"src/assets/vendors/ktui/ktui.min.js",
"src/assets/vendors/apexcharts/apexcharts.min.js",
"src/assets/js/widgets/general.js",
"src/assets/js/layouts/demo1.js"
]
6
Use Metronic HTML in Your Components
Use the following HTML markup in your Angular
src/index.html
file.
<!DOCTYPE html>
<html class="h-full" data-kt-theme="true" data-kt-theme-mode="light" dir="ltr" lang="en">
<head>
<meta charset="utf-8"/>
<title>
Metronic - Tailwind CSS
</title>
<base href="/"/>
<meta content="follow, index" name="robots"/>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
<link href="assets/media/app/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/>
<link href="assets/media/app/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/>
<link href="assets/media/app/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"/>
<link href="assets/media/app/favicon.ico" rel="shortcut icon"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
</head>
<body class="antialiased flex h-full text-base text-foreground bg-background demo1 kt-sidebar-fixed kt-header-fixed">
<app-root>
</app-root>
</body>
</html>
7
Use Metronic HTML in Your Components
Copy the desired HTML markup (e.g., from
dist/html/demo1/index.html
) into your Angular component templates.
8
Start Development
Run the following command to start the Angular development server:
ng serve
Visit
http://localhost:4200
in your browser.
