Metronic 8 Angular

https://preview.keenthemes.com/metronic8/angular/docs/
Admin
Metronic 8 Angular is a professional admin dashboard template built with Angular that provides...
Tokens:7,091
Snippets:51
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Angular Project Quick Start Commands

Source: https://preview.keenthemes.com/metronic8/angular/docs/dashboard

Commands to navigate to the Angular demo directory, clear the npm cache, install project dependencies using legacy peer dependencies, and serve the application locally. The `ng serve` command starts a development server and watches for file changes.

```bash
cd angular/demo1
npm clear cache --force
npm install --legacy-peer-deps
ng serve
```

--------------------------------

### Angular HTML/CSS Layout Example (Metronic)

Source: https://preview.keenthemes.com/metronic8/angular/docs/html

Demonstrates how to use Metronic's HTML/CSS classes for layout structures (flexbox, height, width) within an Angular component. This example showcases a responsive layout that can be directly copied from Metronic HTML documentation.

```html
<div class="d-flex flex-row h-300px">
    <div class="d-flex flex-column flex-row-auto w-200px">
        <div class="d-flex flex-column-auto h-50px bg-primary">
            <span class="text-white">Fixed Height</span>
        </div>

        <div class="d-flex flex-column-fluid bg-success flex-center">
            <span class="text-white">Fluid Height</span>
        </div>
    </div>

    <div class="d-flex flex-column flex-row-fluid">
        <div class="d-flex flex-column-auto h-70px bg-info flex-center">
            <span class="text-white">Fixed Height</span>
        </div>

        <div class="d-flex flex-row flex-column-fluid">
            <div class="d-flex flex-row-fluid bg-dark flex-center">
                <span class="text-white">Fluid Width</span>
            </div>

            <div class="d-flex flex-row-auto w-200px bg-warning flex-center">
                <span class="text-white">Fixed Width</span>
            </div>
        </div>
    </div>
</div>
```

--------------------------------

### Angular Project Quick Start Commands

Source: https://preview.keenthemes.com/metronic8/angular/docs/builder

Commands to navigate to an Angular project directory, clear npm cache, install local project dependencies, and serve the application for development. The `ng serve` command includes an option to automatically open the browser.

```bash
cd angular/demo1
```

```bash
npm clear cache --force
```

```bash
npm install --legacy-peer-deps
```

```bash
ng serve --open
```

--------------------------------

### NPM Install Command

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

This command installs project dependencies listed in the package.json file. It's a standard command for Node.js package management.

```bash
npm install
```

--------------------------------

### Run Angular Development Server

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/overview

Starts the local development server for your Angular application. This command is used to preview your application, including any added Material components, in the browser.

```bash
ng serve
```

--------------------------------

### Package.json Metadata and Dependencies

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

The package.json file contains metadata about an application or module, most importantly, the list of dependencies to install from npm when running npm install.

```json
{
  "name": "metronic-angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "apexcharts": "3.35.0",
    "bootstrap": "5.1.3",
    "chart.js": "3.7.1",
    "highlight.js": "11.5.0",
    "moment": "2.29.1",
    "ng-apexcharts": "1.1.1",
    "ngx-permissions": "8.0.0",
    "ngx-toastr": "14.2.2",
    "primeicons": "4.0.0",
    "primeng": "13.1.0",
    "rxjs": "~7.5.0",
    "simplebar": "5.3.6",
    "sweetalert2": "11.4.4",
    "tslib": "2.3.0",
    "uuid": "8.3.2",
    "web-animations-js": "2.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.0",
    "@angular/cli": "~13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.5"
  }
}
```

--------------------------------

### Angular Material Button Example

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/button

This snippet demonstrates how to create a disabled Material Design mini-fab button with an icon in Angular. It utilizes the Angular Material components for button and icon elements. No external dependencies are explicitly mentioned, but Angular Material must be installed and configured.

```html
<button mat-mini-fab disabled aria-label="Example icon button with a home icon">
  <mat-icon>home</mat-icon>
</button>
```

--------------------------------

### Install Angular Material using Angular CLI

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/overview

Installs Angular Material in your project using the Angular CLI's add schematic. This command also adds project dependencies, Roboto font, Material Design icons, and global CSS styles to your project.

```bash
ng add @angular/material
```

--------------------------------

### Install/Update Angular CLI Globally

Source: https://preview.keenthemes.com/metronic8/angular/docs/builder

Installs or updates the Angular CLI to the latest version globally. It is recommended to use the LTS version of NodeJS. If Angular CLI is already installed, it should be uninstalled and reinstalled to ensure the latest version.

```bash
npm install --global @angular/cli@latest
```

```bash
npm uninstall --global @angular/cli
```

```bash
npm install --global @angular/cli@latest
```

--------------------------------

### Display a Material Slider Component in Angular

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/overview

Demonstrates how to import the MatSliderModule into your application and add a mat-slider tag to your component's HTML template. This allows you to visually verify the Angular Material setup.

```html
<mat-slider min="1" max="100" step="1" value="50"></mat-slider>
```

--------------------------------

### Angular Production Build Command

Source: https://preview.keenthemes.com/metronic8/angular/docs/deployment

This command initiates a production build for an Angular application using Ahead-of-Time (AOT) compilation. AOT compilation enhances performance by compiling templates at build time and allows the browser to render the application immediately. The compiled output is placed in the `[metronic]/angular/[demo]/` directory.

```bash
ng build --prod
```

--------------------------------

### Switch Authentication Service Implementation (TypeScript)

Source: https://preview.keenthemes.com/metronic8/angular/docs/mock-backend

This code illustrates how to switch the authentication service implementation from a fake HTTP service to a real HTTP service. This involves changing import paths in the `index.ts` file to point to the actual service implementation when a real backend is ready. It affects how authentication requests are handled.

```typescript
// export { AuthHTTPService } from './auth-fake-http.service';
export { AuthHTTPService } from './auth-http.service';
```

--------------------------------

### Angular Project Build Command

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

This command is used to build the Angular project for production. It compiles the TypeScript code, bundles assets, and generates optimized output in the dist folder.

```bash
ng build
```

--------------------------------

### Enable Mock Back-end Configuration (TypeScript)

Source: https://preview.keenthemes.com/metronic8/angular/docs/mock-backend

This code snippet demonstrates how to configure the environment to enable the mock back-end by setting the `isMockEnabled` flag to `true`. This is a crucial step for demo purposes and testing API integrations without a live backend. It is typically found in environment configuration files.

```typescript
export const environment = {
  production: false,
  isMockEnabled: true // You have to set 'true', when your real back-end is done
};
```

--------------------------------

### Angular Production Build with Base Href

Source: https://preview.keenthemes.com/metronic8/angular/docs/deployment

This command builds an Angular application for production and specifies a base Href. This is necessary when deploying the application to a sub-folder on a server, ensuring that asset paths are correctly resolved. The `--base-href` flag should be set to match the URL path of the application's root directory.

```bash
ng build --prod --base-href='/my/app/'
```

--------------------------------

### Angular CLI Configuration File

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

The angular.json file contains configuration settings for the Angular CLI. It defines project defaults and specifies files included during the build process.

```json
{
  // Configuration for Angular CLI
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-app-name": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/your-app-name",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "your-app-name:build:production"
            },
            "development": {
              "browserTarget": "your-app-name:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "your-app-name:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}
```

--------------------------------

### Angular Base Href Configuration in Index HTML

Source: https://preview.keenthemes.com/metronic8/angular/docs/deployment

This HTML snippet demonstrates how to configure the base Href for an Angular application when it's served from a server sub-folder. Setting the `<base href>` tag correctly ensures that the application can locate its assets (like JavaScript, CSS, and images) properly, preventing routing and resource loading errors.

```html
<base href='/my/app/'>
```

--------------------------------

### Generate Custom Page Component using Angular CLI

Source: https://preview.keenthemes.com/metronic8/angular/docs/create-a-page

This command uses the Angular CLI to generate a new component for your custom page. Ensure you are in the correct directory before running the command. The generated component will be placed within the specified path.

```bash
cd .\src\app\pages\
ng g c my-page
```

--------------------------------

### Angular Just-in-Time (JIT) Build Command

Source: https://preview.keenthemes.com/metronic8/angular/docs/deployment

This command performs a Just-in-Time (JIT) build for an Angular application. Unlike AOT compilation, JIT compilation occurs at runtime for each user, which can impact performance. This command explicitly disables AOT compilation by setting `--aot=false`.

```bash
ng build --prod --aot=false
```

--------------------------------

### Loading Translations with TranslationService

Source: https://preview.keenthemes.com/metronic8/angular/docs/i18n

Shows how to load multiple language translations into the TranslationService. This makes the translations available for use throughout the application.

```typescript
this.translationService.loadTranslations(enLang, chLang, esLang, jpLang, deLang, frLang);
```

--------------------------------

### Angular Project Linting Command

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

This command is used to lint the Angular project's TypeScript code for style consistency and potential errors. It uses TSLint and Codelyzer configurations.

```bash
ng lint
```

--------------------------------

### TypeScript Project Configuration

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

The tsconfig.json file defines the root files and compiler options for a TypeScript project. It's essential for compiling TypeScript code into JavaScript.

```json
{
  "compilerOptions": {
    "enableI18nLegacyMessageFormat": false,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [
      "ES2017",
      "DOM"
    ],
    "outDir": "./dist/out-tsc",
    "module": "es2020",
    "moduleResolution": "node",
    "sourceMap": true,
    "declaration": false,
    "incremental": true,
    "allowJs": true,
    "angularCompilerOptions": {
      "enableIvy": true,
      "strictTemplates": true
    }
  }
}
```

--------------------------------

### Editor Configuration File

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

The .editorconfig file defines editor settings such as indentation style, tab size, and line endings to ensure code style consistency across different editors and IDEs.

```ini
# editorconfig.org
root = true

[*] 
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.md] 
trim_trailing_whitespace = false

[*.json] 
indent_style = space
indent_size = 2

```

--------------------------------

### Add Custom Page to Left Static Menu (HTML)

Source: https://preview.keenthemes.com/metronic8/angular/docs/create-a-page

This HTML snippet shows how to add a link to your custom page in the application's left-side navigation menu. It uses Angular's `routerLink` directive to specify the page URL and `routerLinkActive` to highlight the active menu item. The snippet includes placeholders for icons and menu titles.

```html
// Other code
<!-- begin::1 Level -->
<div class="menu-item">
  <a
    class="menu-link without-sub"
    routerLink="/my-page"
    routerLinkActive="active"
    ><span class="menu-icon">
      <span
        [inlineSVG]="'./assets/media/icons/duotune/general/gen019.svg'"
        class="svg-icon svg-icon-2"
      ></span> </span
    ><span class="menu-title">My Page</span></a
  >
</div>
<!-- end::1 Level -->
// Other code
```

--------------------------------

### Basic Angular Material Card

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/card

This snippet demonstrates the basic structure of an Angular Material card (`<mat-card>`). It includes a title (`<mat-card-title>`) and content (`<mat-card-content>`). This is a foundational element for displaying self-contained content.

```html
<mat-card>
  <mat-card-title>Title</mat-card-title>
  <mat-card-content>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </mat-card-content>
</mat-card>
```

--------------------------------

### Register Custom Page in Theme Routing

Source: https://preview.keenthemes.com/metronic8/angular/docs/create-a-page

This snippet demonstrates how to register your newly created custom page component within the application's routing configuration. It involves adding a new route object to the `Routing` array, specifying the path for the page and the component to be loaded. This ensures the custom page is accessible via its URL.

```typescript
const Routing: Routes = [
// ... other routes
{
  path: 'my-page', // <= Page URL
  component: MyPageComponent // <= Page component registration
},
];
```

--------------------------------

### TypeScript Translation Usage with ngx-translate

Source: https://preview.keenthemes.com/metronic8/angular/docs/i18n

Demonstrates how to translate text directly within TypeScript code using the `instant` method of the TranslateService. Useful for dynamic translations in component logic.

```typescript
import { TranslateService } from '@ngx-translate/core';
// Other code
constructor(private translate: TranslateService) { }
// Other code
const _title: string = this.translate.instant('HOME.HELLO', "World");
```

--------------------------------

### Ngcc Configuration File

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

The ngcc.config.js file is used for Angular compatibility compiler settings, specifically related to the IVY renderer.

```javascript
/**
 * @type { import('@angular/compiler-cli').AngularCompilerOptions }
 */
module.exports = {
  // Add your ngcc configuration options here if needed
  // For example:
  // enableIvy: true,
};

```

--------------------------------

### Angular Material Card with Image and Actions

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/card

This snippet illustrates an Angular Material card (`<mat-card>`) that includes an image (`<img mat-card-image>`), title, content, and action buttons (`<mat-card-actions>`). This pattern is useful for displaying rich content with associated user interactions.

```html
<mat-card>
  <mat-card-title>Fluid Image</mat-card-title>
  <mat-card-content>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </mat-card-content>
  <img mat-card-image src="assets/media/illustrations/sketchy-1/1.png" alt="illustrations">
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>
```

--------------------------------

### Basic Buttons in Angular Material

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/button

Demonstrates the implementation of basic buttons in Angular Material. These buttons can be styled with primary, accent, or warn colors, and can also be disabled or used as links. They serve as fundamental interactive elements.

```html
<section>
  <div class="example-label">Basic</div>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href="#" target="_blank">Link</a>
  </div>
</section>
```

--------------------------------

### Git Ignore File

Source: https://preview.keenthemes.com/metronic8/angular/docs/overview

The .gitignore file specifies intentionally untracked files that Git should ignore. This prevents unnecessary files like build artifacts and dependency folders from being committed.

```gitattributes
# Compiled output
/dist

# Node modules
/node_modules

# Angular build artifacts
/.angular

# IDE specific files
.idea/
.vscode/
*.iml

# Log files
*.log

# Environment variables
.env

# OS generated files
.DS_Store
Thumbs.db

```

--------------------------------

### Angular Build Memory Increase (Windows)

Source: https://preview.keenthemes.com/metronic8/angular/docs/deployment

This command provides a workaround for the 'JavaScript heap out of memory' error during Angular builds on Windows. It increases the maximum old space size for the Node.js process to 8192MB, allowing the Angular CLI to allocate more memory for the build process.

```bash
node --max_old_space_size=8192 'node_modules\@angular\cli\bin\ng' build --prod
```

--------------------------------

### Angular Build Memory Increase (Linux/Mac)

Source: https://preview.keenthemes.com/metronic8/angular/docs/deployment

This command addresses the 'JavaScript heap out of memory' error for Angular builds on Linux and macOS. It increases the Node.js process's maximum old space size to 8192MB, which is often necessary for complex builds that consume significant memory.

```bash
node --max_old_space_size=8192 ./node_modules/.bin/ng build --prod
```

--------------------------------

### Implement Modal Open Method in Angular

Source: https://preview.keenthemes.com/metronic8/angular/docs/modals

This code demonstrates how to declare and implement an `openModal` method in an Angular component to programmatically open the modal. It utilizes `@ViewChild` to access the `ModalComponent` instance and its `open()` method. Ensure `ModalComponent` is imported.

```typescript
import { Component, ViewChild } from '@angular/core';
import { ModalComponent } from '{path-to-src_metronic-folder}/_metronic/partials';
....
@ViewChild('modal') private modalComponent: ModalComponent;
....
async openModal() {
  return await this.modalComponent.open();
}
....
```

--------------------------------

### Update Metronic using Yarn

Source: https://preview.keenthemes.com/metronic8/angular/docs/updates

This command is used to update third-party plugins after updating Metronic. It ensures that all dependencies are brought to their latest compatible versions.

```shell
yarn install
```

--------------------------------

### Import Modals Module in Angular

Source: https://preview.keenthemes.com/metronic8/angular/docs/modals

This code snippet shows how to import the `ModalsModule` into your Angular module to enable the use of the modal component. Ensure the path to the Metronic partials is correct.

```typescript
import { ModalsModule } from '{path-to-src_metronic-folder}/_metronic/partials';
```

--------------------------------

### Importing Language Data in Angular

Source: https://preview.keenthemes.com/metronic8/angular/docs/i18n

Demonstrates how to import language data for use with the translation service. This is a crucial step for adding new languages to the application.

```typescript
import { locale as enLang } from './modules/i18n/vocabs/en';
import { locale as chLang } from './modules/i18n/vocabs/ch';
import { locale as esLang } from './modules/i18n/vocabs/es';
import { locale as jpLang } from './modules/i18n/vocabs/jp';
import { locale as deLang } from './modules/i18n/vocabs/de';
import { locale as frLang } from './modules/i18n/vocabs/fr';
```

--------------------------------

### Configure Modal Settings in Angular Component

Source: https://preview.keenthemes.com/metronic8/angular/docs/modals

Defines the `modalConfig` variable within an Angular component to customize the modal's appearance and behavior, such as title and button labels. This requires importing `ModalConfig` from Metronic's partials.

```typescript
import { ModalConfig } from '{path-to-src_metronic-folder}/_metronic/partials';
....
modalConfig: ModalConfig = {
  modalTitle: 'Modal title',
  dismissButtonLabel: 'Submit',
  closeButtonLabel: 'Cancel'
};
....
```

--------------------------------

### Floating Action Buttons (FAB) in Angular Material

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/button

Demonstrates the implementation of Floating Action Buttons (FABs) in Angular Material. FABs are typically used for a primary action on a screen and can have primary, accent, or warn colors. They often contain an icon and can be disabled.

```html
<section>
  <div class="example-label">FAB</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button mat-fab color="primary" aria-label="Example icon button with a delete icon">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
          <mat-icon>bookmark</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button mat-fab color="warn" aria-label="Example icon button with a home icon">
          <mat-icon>home</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>
```

--------------------------------

### Mini FAB Buttons in Angular Material

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/button

Showcases mini Floating Action Buttons (mini FABs) in Angular Material, which are smaller versions of FABs. They are suitable for less prominent primary actions or when space is limited. Mini FABs support color options and can be disabled.

```html
<section>
  <div class="example-label">Mini FAB</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
          <mat-icon>menu</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
          <mat-icon>plus_one</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
          <mat-icon>filter_list</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>
```

--------------------------------

### HTML Translation Usage with ngx-translate

Source: https://preview.keenthemes.com/metronic8/angular/docs/i18n

Illustrates how to use the `translate` directive in Angular HTML templates to display translated text. Supports interpolation for dynamic values.

```html
<div [translate]="'HOME.HELLO'" [translateParams]="{value: 'world'}"></div>
```

--------------------------------

### Flat Buttons in Angular Material

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/button

Demonstrates flat buttons in Angular Material, which have a simple, un-raised appearance. They support primary, accent, and warn color schemes, can be disabled, and can be used as links. Flat buttons are suitable for less emphasis.

```html
<section>
  <div class="example-label">Flat</div>
  <div class="example-button-row">
    <button mat-flat-button>Basic</button>
    <button mat-flat-button color="primary">Primary</button>
    <button mat-flat-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-flat-button disabled>Disabled</button>
    <a mat-flat-button href="#" target="_blank">Link</a>
  </div>
</section>
```

--------------------------------

### Integrate Modal Component in Angular HTML

Source: https://preview.keenthemes.com/metronic8/angular/docs/modals

This snippet shows how to include the modal component in your Angular component's HTML template. It binds the `modalConfig` to the `app-modal` directive and provides a button to trigger the `openModal` method.

```html
<app-modal #modal [modalConfig]="modalConfig">
Modal body html
</app-modal>
<button class="btn btn-primary" (click)="openModal()">Open modal</button>
```

--------------------------------

### Raised Buttons in Angular Material

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/button

Showcases raised buttons in Angular Material, which provide a lifted appearance. Like basic buttons, they support primary, accent, and warn color themes, as well as disabled states and link functionality. Raised buttons offer a more prominent visual cue.

```html
<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="#" target="_blank">Link</a>
  </div>
</section>
```

--------------------------------

### Icon Buttons in Angular Material

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/button

Showcases icon buttons in Angular Material, which use icons as their clickable elements. These buttons can be colored (primary, accent, warn), disabled, and are often used for actions like navigation or toolbars. They require an icon component within.

```html
<section>
  <div class="example-label">Icon</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
        <mat-icon>more_vert</mat-icon>
      </button>
      <button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
        <mat-icon>home</mat-icon>
      </button>
      <button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
        <mat-icon>menu</mat-icon>
      </button>
      <button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
        <mat-icon>favorite</mat-icon>
      </button>
      <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    </div>
  </div>
</section>
```

--------------------------------

### Update Page Breadcrumbs with PageInfoService (Angular)

Source: https://preview.keenthemes.com/metronic8/angular/docs/breadcrumb-service

This snippet demonstrates how to update the page breadcrumb in an Angular application using the PageInfoService. It shows how to define breadcrumb links and call the `updateBreadcrumbs` function within the component's constructor. Dependencies include the `PageInfoService` and the `PageLink` type.

```typescript
links: Array<PageLink> = [{
  title: 'Main title',
  path: '/',
  isActive: false,
}, {
  title: 'Second title',
  path: '/',
  isActive: false,
}];

constructor(private pageInfo: PageInfoService) {
  pageInfo.updateTitle('Page title');
  pageInfo.updateBreadcrumbs(this.links);
}
```

--------------------------------

### Stroked Buttons in Angular Material

Source: https://preview.keenthemes.com/metronic8/angular/docs/angular-material/button

Illustrates the usage of stroked buttons in Angular Material, characterized by an outline. These buttons also accept color variations (primary, accent, warn), can be disabled, and function as links. Stroked buttons offer a distinct visual style.

```html
<section>
  <div class="example-label">Stroked</div>
  <div class="example-button-row">
    <button mat-stroked-button>Basic</button>
    <button mat-stroked-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-stroked-button color="warn">Warn</button>
    <button mat-stroked-button disabled>Disabled</button>
    <a mat-stroked-button href="#" target="_blank">Link</a>
  </div>
</section>
```
Tokens:
Raw