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 angular-tailwind
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 angular-tailwind
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
2
Copy Source Folder
Copy the
src
folder from the
metronic-tailwind-html
package and paste it into the
angular-tailwind/src
directory.
Rename the copied folder to
theme
. The directory structure should now look like this:
angular-tailwind/src/theme
This step imports the necessary styles and assets from the original HTML package into your Angular project.
3
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 "./theme/vendors/keenicons/duotone/style.css";
@import "./theme/vendors/keenicons/outline/style.css";
@import "./theme/vendors/keenicons/solid/style.css";
This step ensures that the styles and icon fonts are properly imported and applied to your Angular project.
4
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
resources/theme/core/plugins
for each plugin path.
// ...
plugins: [
require('./src/theme/core/plugins/plugin'),
require('./src/theme/core/plugins/layouts/demo1'),
require('./src/theme/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.
Integrate Core
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic core components into your Angular project.
1
Copy Source Folder
Make sure to follow the above steps to integrate the style.
2
Create Angular Service
Run the following command to generate an Angular service named
theme
:
ng g service theme
This will create a
theme.service.ts
file in the
angular-tailwind/src/app/theme
directory.
Open the
theme.service.ts
file and add the following code:
// theme.service.ts
import { Injectable } from '@angular/core';
import KTComponents from '../../assets/core/index.spa';
declare var KTLayout: any;
@Injectable({
providedIn: 'root'
})
export class ThemeService {
init(): void {
KTComponents.init();
KTLayout.init();
}
}
3
Copy Tailwind Configuration
Open the
app.component.ts
file and import the
ThemeService
from the
angular-tailwind/src/app/theme
directory:
import { ThemeService } from './theme/theme.service';
// ...
constructor(private themeService: ThemeService) {
}
ngAfterViewInit(): void {
this.ThemeService.init();
}