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
Install Dependencies
Run the following command to install KTUI and required dependencies:
npm install @keenthemes/ktui @popperjs/core
3
Copy Metronic Source Files
Copy the
src
folder from your Metronic HTML package to a suitable location in your Angular project, such as
src/assets/metronic
.
4
Copy Media Assets
Copy the
media
folder from
metronic-tailwind-html/dist/assets/media
to
src/assets/media
in your Angular project.
5
Import Metronic Styles
Edit
src/styles.scss
and add:
@import "./assets/metronic/css/styles.css";
@import "./assets/metronic/css/demos/demo1.css";
/* Keenicons */
@import "./assets/metronic/vendors/keenicons/duotone/style.css";
@import "./assets/metronic/vendors/keenicons/filled/style.css";
@import "./assets/metronic/vendors/keenicons/outline/style.css";
@import "./assets/metronic/vendors/keenicons/solid/style.css";
6
Import KTUI and Metronic Scripts
Edit
angular.json
and add the following to the
scripts
array (under the build options for your project):
"scripts": [
"node_modules/@keenthemes/ktui/dist/ktui.js",
"src/assets/metronic/core/index.js",
"src/assets/metronic/app/layouts/demo1.js"
]
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. Adjust asset paths as needed (e.g.,
assets/metronic/...
).
8
Start Development
Run the following command to start the Angular development server:
ng serve
Visit
http://localhost:4200
in your browser.
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.
