mirror of
https://github.com/tabler/tabler.git
synced 2026-08-30 22:01:28 +04:00
119 lines
3.2 KiB
Plaintext
119 lines
3.2 KiB
Plaintext
---
|
|
title: Angular
|
|
order: 5
|
|
summary: Set up Tabler in Angular and build a first working page.
|
|
description: Install Tabler in Angular - register the compiled CSS and JS in angular.json and build a first working page with a Tabler card.
|
|
icon: brand-angular
|
|
seoDescription: Install `@tabler/core`, register CSS and JS in `angular.json`, and render a minimal Angular page with a Tabler card.
|
|
---
|
|
|
|
import TabsPackage from '@components/TabsPackage.astro'
|
|
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
|
import Steps from '@components/Steps.astro'
|
|
|
|
Angular manages global assets through its build configuration, and Tabler fits that model well: register the compiled CSS and JS once in `angular.json`, and every component template can use Tabler classes right away.
|
|
|
|
This guide uses the Angular CLI. You will install `@tabler/core`, register its assets in the build config, and render a first component template with a Tabler card.
|
|
|
|
## Setup
|
|
|
|
<Steps>
|
|
|
|
### Install Tabler package
|
|
|
|
Install `@tabler/core` with your preferred package manager:
|
|
|
|
<TabsPackage name="@tabler/core" />
|
|
|
|
You can also use CDN files when you need a quick setup:
|
|
|
|
<CdnImportPackage />
|
|
|
|
### Import styles
|
|
|
|
Register Tabler CSS in the Angular build config (`angular.json`) under `projects.<app>.architect.build.options.styles`:
|
|
|
|
```json
|
|
{
|
|
"styles": ["src/styles.scss", "node_modules/@tabler/core/dist/css/tabler.min.css"]
|
|
}
|
|
```
|
|
|
|
Alternatively, import the compiled CSS directly in `src/styles.scss`:
|
|
|
|
```scss
|
|
@import '@tabler/core/dist/css/tabler.min.css';
|
|
```
|
|
|
|
For full theme customization, import SCSS sources in `src/styles.scss` instead:
|
|
|
|
```scss
|
|
@import '@tabler/core/scss/tabler';
|
|
```
|
|
|
|
### Import and initialize JavaScript
|
|
|
|
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Register it in `angular.json` under `projects.<app>.architect.build.options.scripts`:
|
|
|
|
```json
|
|
{
|
|
"scripts": ["node_modules/@tabler/core/dist/js/tabler.min.js"]
|
|
}
|
|
```
|
|
|
|
Angular-specific note: use `angular.json` for global CSS and JS registration so assets are included in both development and production builds.
|
|
|
|
### Minimal working example
|
|
|
|
Use a simple root component template in `src/app/app.component.html`:
|
|
|
|
```html
|
|
<div class="page">
|
|
<div class="page-wrapper">
|
|
<div class="container-xl py-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Angular + Tabler</h3>
|
|
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
A minimal `angular.json` example (relevant part):
|
|
|
|
```json
|
|
{
|
|
"projects": {
|
|
"my-app": {
|
|
"architect": {
|
|
"build": {
|
|
"options": {
|
|
"styles": ["src/styles.scss", "node_modules/@tabler/core/dist/css/tabler.min.css"],
|
|
"scripts": ["node_modules/@tabler/core/dist/js/tabler.min.js"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Run the app:
|
|
|
|
```shell
|
|
ng serve
|
|
```
|
|
|
|
Open the local Angular URL and confirm the card is styled with Tabler.
|
|
|
|
### Next steps
|
|
|
|
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
|
- Explore [Layout](/ui/layout) to choose page structures.
|
|
- Browse [Components](/ui/components) to add UI building blocks.
|
|
|
|
</Steps>
|