Material Design for Bootstrap 5 & Angular

https://mdbootstrap.com/docs/angular
Admin
MDBootstrap for Angular is a comprehensive UI kit providing over 700 Material Design UI components...
Tokens:599,873
Snippets:3,926
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Setup Plugin via Schematics

Source: https://mdbootstrap.com/docs/angular/pro/plugins-installation

Use Angular schematics to automatically configure the installed plugin.

```bash
ng add mdb-angular-calendar
```

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

### Install MDB Onboarding Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Use the npm command to install the onboarding plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/onboarding
```

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

### Install eCommerce Gallery plugin

Source: https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery

Use the npm command to install the plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/ecommerce-gallery
```

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

### Install Storage Management Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/storage-management

Use npm to install the plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/storage-management
```

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

### Install Color Picker Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/color-picker

Use the provided npm command to install the plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/color-picker
```

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

### Install Drag and Drop Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/drag-and-drop

Use the terminal to install the plugin package via the MDB git repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/drag-and-drop
```

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

### Install Calendar Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/calendar

Use the npm command to install the calendar plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/calendar
```

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

### Install Countdown Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/countdown

Use the npm command to install the countdown plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/countdown
```

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

### Install Transfer Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/transfer

Use npm to install the transfer plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/transfer
```

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

### Install Scroll Status Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/scroll-status

Use npm to install the plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/scroll-status
```

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

### Install MDB UI Kit via Git

Source: https://mdbootstrap.com/docs/angular/pro/installation

Installs the MDB core UI Kit using a GitLab access token. Replace ACCESS_TOKEN with your actual token.

```bash
npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential
```

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

### Install Multi-item Carousel Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel

Use npm to install the plugin from the MDBootstrap private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/multi-item-carousel
```

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

### Install Organization Chart Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/organization-chart

Use the terminal to install the plugin package via the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/organization-chart
```

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

### Install MDB Angular Mention Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/mention

Use the npm command to install the plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/mention
```

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

### Install Input Mask Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/input-mask

Use npm to install the plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/input-mask
```

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

### Install Vector Maps Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/vector-maps

Use the terminal to install the plugin package using your access token.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/vector-maps
```

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

### Install File Upload Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/file-upload

Install the plugin via npm using the provided git repository URL.

```Terminal
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/file-upload
```

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

### MdbOnboardingService

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Service for controlling the onboarding flow, including initialization, starting, and event handling.

```APIDOC
## MdbOnboardingService

### Description
Service to manage the onboarding lifecycle and listen to onboarding events.

### Methods
- **init(steps: Array)** - Initializes the onboarding with an array of step configurations.
- **start()** - Starts the onboarding process.

### Outputs
- **onboardingStart** (EventEmitter<void>) - Emitted when onboarding starts.
- **onboardingEnd** (EventEmitter<void>) - Emitted when the last step ends.
- **onboardingOpen** (EventEmitter<void>) - Emitted when a step element opens.
- **onboardingClose** (EventEmitter<void>) - Emitted when a step element closes.
- **onboardingNext** (EventEmitter<void>) - Emitted when the next step is about to open.
- **onboardingPrev** (EventEmitter<void>) - Emitted when the previous step is about to open.
```

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

### Install dependencies via NPM

Source: https://mdbootstrap.com/docs/angular/getting-started/installation

Run this command in the terminal after unzipping the manual package to install required dependencies.

```bash
npm install
```

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

### Run the Angular application

Source: https://mdbootstrap.com/docs/angular/getting-started/installation

Starts the development server and opens the application in the default browser.

```bash
ng serve -o
```

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

### Install MDB Angular UI Kit and Plugins via NPM

Source: https://mdbootstrap.com/docs/angular/pro/plugins-installation

Use these commands to install the core UI Kit and specific plugins from the MDB GitLab repository. Replace ACCESS_TOKEN with your generated token.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential
```

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/calendar
```

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

### Angular Component Setup

Source: https://mdbootstrap.com/docs/angular/extended/masonry

Standard Angular component definition for the application root.

```typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'mdb-angular-ui-kit-free';
}
```

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

### Basic Vector Map Example

Source: https://mdbootstrap.com/docs/angular/plugins/vector-maps

Displays a vector map with a specific region pre-selected using the selectedRegion input.

```html
<mdb-vector-map [selectedRegion]="'CA'"></mdb-vector-map>
```

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

### Install specific MDB version

Source: https://mdbootstrap.com/docs/angular/pro/installation

Appends a version tag to the installation command to install a specific release.

```bash
npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential#1.2.0
```

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

### Onboarding Component Template

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

HTML structure using mdbOnboardingAnchor directives to define step locations.

```html
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-3 text-center">
      <button
        class="btn btn-danger"
        (click)="handleClick()"
        [mdbOnboardingAnchor]="'first-step'"
      >
        Start onboarding
      </button>
    </div>
  </div>
  <hr />
  <div class="row d-flex justify-content-center">
    <!-- Card Regular -->
    <div class="col-md-4">
      <div class="card">
        <!-- Card image -->
        <img
          [mdbOnboardingAnchor]="'second-step'"
          class="card-img-top"
          src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
          alt="Man in Cap and Glasses"
        />
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
        <!-- Card content -->
        <div class="card-body text-center">
          <!-- Title -->
          <h4 class="card-title">
            <strong>John Doe</strong>
          </h4>
          <!-- Subtitle -->
          <h6 class="fw-bold indigo-text py-2">Web developer</h6>
          <!-- Text -->
          <p [mdbOnboardingAnchor]="'third-step'" class="card-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
          </p>

          <div class="d-flex justify-content-evenly">
            <!-- Facebook -->
            <a href="#!" role="button">
              <i class="fab fa-facebook-f fa-lg"></i>
            </a>
            <!-- Twitter -->
            <a href="#!" role="button">
              <i class="fab fa-twitter fa-lg"></i>
            </a>
            <!-- Google + -->
            <a href="#!" role="button">
              <i class="fab fa-dribbble fa-lg"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Card Regular -->
  </div>
</div>
```

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

### Position Columns with Start Classes

Source: https://mdbootstrap.com/docs/angular/layout/css-grid

Uses start classes to define the starting column position for grid items, replacing traditional offset classes.

```html
<div class="grid">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
```

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

### Configure Onboarding Steps in TypeScript

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Initialize the onboarding tour using MdbOnboardingService, defining individual step properties and global settings.

```typescript
import { Component } from '@angular/core';
import { MdbOnboardingService } from 'mdb-angular-onboarding'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public onboardingService: MdbOnboardingService) {}

  handleClick() {
    this.onboardingService.init(
      [
        {
          id: 'first-step-backdrop-individual',
          content:
            'Individual step options have higher specificity than global. Setting backdrop to a single step will override its global backdrop options',
          backdrop: true,
          backdropOpacity: 0.6,
        },
        {
          id: 'second-step-backdrop-individual',
          content: 'This element has backdrop with opacity 0.2',
          backdrop: true,
          backdropOpacity: 0.2,
        },
        {
          id: 'third-step-backdrop-individual',
          content: 'And this element has backdrop with opacity 0.8',
          backdrop: true,
          backdropOpacity: 0.8,
        },
      ],
      {
        backdropOpacity: 0.8,
      }
    );
    this.onboardingService.start();
  }

}
```

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

### Implement Autostart Onboarding

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Uses mdbOnboardingAnchor directives in HTML and MdbOnboardingService in TypeScript to trigger an onboarding sequence with a delay.

```html
<section class="border p-4 d-flex justify-content-center">
  <div class="container">
    <button
    class="btn btn-danger"
    (click)="handleClick()"
  >
    Start onboarding
  </button>
    <hr />
    <div class="row d-flex justify-content-center">
      <!-- Card Regular -->
      <div class="col-md-4">
        <div #autostartTrigger class="card">
          <!-- Card image -->
          <img
            [mdbOnboardingAnchor]="'first-step-autostart'"
            class="card-img-top"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
            alt="Man in Cap and Glasses"
          />
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!-- Card content -->
          <div class="card-body text-center">
            <!-- Title -->
            <h4
              [mdbOnboardingAnchor]="'second-step-autostart'"
              class="card-title"
            >
              <strong>John Doe</strong>
            </h4>
            <!-- Subtitle -->
            <h6 class="fw-bold py-2">Web developer</h6>
            <!-- Text -->
            <p
              [mdbOnboardingAnchor]="'third-step-autostart'"
              class="card-text"
            >
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
              recusandae. Facere modi sunt, quod quibusdam.
            </p>

            <div class="d-flex justify-content-evenly">
              <!-- Facebook -->
              <a href="#!" role="button">
                <i class="fab fa-facebook-f fa-lg"></i>
              </a>
              <!-- Twitter -->
              <a href="#!" role="button">
                <i class="fab fa-twitter fa-lg"></i>
              </a>
              <!-- Google + -->
              <a href="#!" role="button">
                <i class="fab fa-dribbble fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- Card Regular -->
    </div>
  </div>
</section>
```

```typescript
import { Component } from '@angular/core';
import { MdbOnboardingService } from 'mdb-angular-onboarding'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public onboardingService: MdbOnboardingService) {}

  handleClick() {
    this.onboardingService.init(
      [
        { id: 'first-step-autostart', content: 'Example of autostarted onboarding experience' },
        {
          id: 'second-step-autostart',
          content: 'Pass delay time in seconds to autostart onboarding',
        },
        {
          id: 'third-step-autostart',
          content: 'Delay time will also work with other starting options',
        },
      ], { delay: 3 }
    );
    this.onboardingService.start();
  }
}
```

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

### MDB Icon Example

Source: https://mdbootstrap.com/docs/angular/content-styles/icons

Example of the MDB brand icon usage.

```HTML
<i class="fab fa-mdb"></i>
```

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

### Configure Onboarding Service in TypeScript

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Inject MdbOnboardingService and use the init method to define step IDs and content, then call start to trigger the tour.

```typescript
import { Component } from '@angular/core';
import { MdbOnboardingService } from 'mdb-angular-onboarding'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public onboardingService: MdbOnboardingService) {}

  handleClick() {
    this.onboardingService.init([
      { id: 'first-step-index', content: 'This is the first step in the object' },
      {
        id: 'second-step-index',
        content: 'This is the second step in the object',
        index: 3,
      },
      { id: 'third-step-index', content: 'This is the third step in the object', index: 2 },
      { id: 'fourth-step-index', content: 'This is the fourth step in the object', index: 2 },
    ]);
    this.onboardingService.start();
  }

}
```

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

### Install HammerJS package

Source: https://mdbootstrap.com/docs/angular/methods/touch

Install the required hammerjs dependency via npm.

```terminal
npm install hammerjs
```

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

### Install Font Awesome

Source: https://mdbootstrap.com/docs/angular/getting-started/installation

Installs the Font Awesome free package via NPM.

```bash
npm i @fortawesome/fontawesome-free
```

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

### Configure Onboarding Service in TypeScript

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Initialize the onboarding service with autoplay settings and step-specific durations.

```typescript
import { Component } from '@angular/core';
import { MdbOnboardingService } from 'mdb-angular-onboarding'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public onboardingService: MdbOnboardingService) {}

  handleClick() {
    this.onboardingService.init(
      [
        {
          id: 'first-step-autoplay',
          content: 'This step has globally set duration for 2 seconds',
        },
        {
          id: 'second-step-autoplay',
          content:
            'This step has overriden duration with data-mdb-duration attribute set to 4 seconds',
          stepDuration: 4,
        },
        {
          id: 'third-step-autoplay',
          content:
            'This step has data-mdb-autoplay indivudally set to false. Click next or use arrow to open next step',
          autoplay: false,
        },
        {
          id: 'fourth-step-autoplay',
          content: 'This step will automatically close after 5 seconds',
          stepDuration: 5,
        },
      ],
      { autoplay: true, stepDuration: 2 }
    );
    this.onboardingService.start();
  }

}
```

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

### Implement Onboarding Autoplay in HTML

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Use the mdbOnboardingAnchor directive to define steps within your component template.

```html
<section class="border p-4 d-flex justify-content-center">
  <div class="container">
    <button class="btn btn-danger" (click)="handleClick()">Start onboarding</button>
    <hr />
    <div class="row d-flex justify-content-center">
      <!-- Card Regular -->
      <div class="col-md-4">
        <div class="card">
          <!-- Card image -->
          <img
            [mdbOnboardingAnchor]="'first-step-autoplay'"
            class="card-img-top"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
            alt="Man in Cap and Glasses"
          />
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!-- Card content -->
          <div class="card-body text-center">
            <!-- Title -->
            <h4
              [mdbOnboardingAnchor]="'second-step-autoplay'"
              class="card-title"
            >
              <strong>John Doe</strong>
            </h4>
            <!-- Subtitle -->
            <h6 class="fw-bold py-2">Web developer</h6>
            <!-- Text -->
            <p [mdbOnboardingAnchor]="'third-step-autoplay'" class="card-text">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
              recusandae. Facere modi sunt, quod quibusdam.
            </p>

            <div class="d-flex justify-content-evenly">
              <!-- Facebook -->
              <a href="#!" role="button">
                <i class="fab fa-facebook-f fa-lg"></i>
              </a>
              <!-- Twitter -->
              <a href="#!" role="button">
                <i class="fab fa-twitter fa-lg"></i>
              </a>
              <!-- Google + -->
              <a
                [mdbOnboardingAnchor]="'fourth-step-autoplay'"
                href="#!"
                role="button"
              >
                <i class="fab fa-dribbble fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- Card Regular -->
    </div>
  </div>
</section>
```

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

### Configure Onboarding Service in TypeScript

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Initialize the onboarding tour by injecting MdbOnboardingService and calling the init and start methods.

```typescript
import { Component } from '@angular/core';
import { MdbOnboardingService } from 'mdb-angular-onboarding'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public onboardingService: MdbOnboardingService) {}

  handleClick() {
    this.onboardingService.init(
      [
        {
          id: 'first-step-custom-class',
          content: 'Globally changed button labels',
          customClass: 'custom-class-individual',
        },
        {
          id: 'second-step-custom-class',
          content: 'Locally changed control labels',
        },
        {
          id: 'third-step-custom-class',
          content: 'You can even use our icons inside button labels!',
        },
      ],
      { customClass: 'custom-class-global' }
    );
    this.onboardingService.start();
  }

}
```

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

### Create and navigate to a new Angular project

Source: https://mdbootstrap.com/docs/angular/pro/installation

Initializes a new Angular project with SCSS support and moves into the project directory.

```bash
ng new my-app
```

```bash
cd my-app
```

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

### Implement Onboarding HTML Structure

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Use the mdbOnboardingAnchor directive on elements to define the steps of the onboarding tour.

```html
<section class="border p-4 d-flex justify-content-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-3 text-center">
        <button
          class="btn btn-danger"
          (click)="handleClick()"
          [mdbOnboardingAnchor]="'first-step-index'"
        >
          Start onboarding
        </button>
      </div>
    </div>
    <hr />
    <div class="row d-flex justify-content-center">
      <!-- Card Regular -->
      <div class="col-md-4">
        <div class="card">
          <!-- Card image -->
          <img
            [mdbOnboardingAnchor]="'second-step-index'"
            class="card-img-top"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
            alt="Man in Cap and Glasses"
          />
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!-- Card content -->
          <div class="card-body text-center">
            <!-- Title -->
            <h4 class="card-title">
              <strong>John Doe</strong>
            </h4>
            <!-- Subtitle -->
            <h6 class="fw-bold py-2">Web developer</h6>
            <!-- Text -->
            <p
              [mdbOnboardingAnchor]="'third-step-index'"
              class="card-text"
            >
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
              recusandae. Facere modi sunt, quod quibusdam.
            </p>

            <div class="d-flex justify-content-evenly">
              <!-- Facebook -->
              <a href="#!" role="button"
              [mdbOnboardingAnchor]="'fourth-step-index'"

              >
                <i class="fab fa-facebook-f fa-lg"></i>
              </a>
              <!-- Twitter -->
              <a href="#!" role="button">
                <i class="fab fa-twitter fa-lg"></i>
              </a>
              <!-- Google + -->
              <a href="#!" role="button">
                <i class="fab fa-dribbble fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- Card Regular -->
    </div>
  </div>
</section>
```

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

### Implement Onboarding HTML Structure

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Use the mdbOnboardingAnchor directive on elements to define the steps of the onboarding tour.

```html
<section
class="border p-4 d-flex justify-content-center onboarding"
>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-3 text-center">
      <button class="btn btn-danger" (click)="handleClick()">
        Start onboarding
      </button>
    </div>
  </div>
  <hr />
  <div class="row d-flex justify-content-center">
    <!-- Card Regular -->
    <div class="col-md-4">
      <div class="card">
        <!-- Card image -->
        <img
          [mdbOnboardingAnchor]="'first-step-custom-class'"
          class="card-img-top"
          src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
          alt="Man in Cap and Glasses"
        />
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
        <!-- Card content -->
        <div class="card-body text-center">
          <!-- Title -->
          <h4
            [mdbOnboardingAnchor]="'second-step-custom-class'"
            class="card-title"
          >
            <strong>John Doe</strong>
          </h4>
          <!-- Subtitle -->
          <h6 class="fw-bold py-2">Web developer</h6>
          <!-- Text -->
          <p class="card-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
            recusandae. Facere modi sunt, quod quibusdam.
          </p>

          <div class="d-flex justify-content-evenly">
            <!-- Facebook -->
            <a [mdbOnboardingAnchor]="'third-step-custom-class'"
            href="#!" role="button">
              <i class="fab fa-facebook-f fa-lg"></i>
            </a>
            <!-- Twitter -->
            <a href="#!" role="button">
              <i class="fab fa-twitter fa-lg"></i>
            </a>
            <!-- Google + -->
            <a
              href="#!"
              role="button"
            >
              <i class="fab fa-dribbble fa-lg"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Card Regular -->
  </div>
</div>
</section>
```

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

### Install Cookies Management Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/cookies-management

Use npm to install the plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/cookies-management
```

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

### Install Captcha Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/captcha

Command to install the MDB Angular Captcha plugin via npm.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/captcha
```

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

### Basic Loading Management Example

Source: https://mdbootstrap.com/docs/angular/methods/loading-management

Displays a loading spinner within a specified container by setting the [show] input to true.

```html
<div style="height: 300px; width: 100%; z-index: 1029" #container>
  <mdb-loading [show]="true" [container]="container">
    <div class="loading-spinner">
      <div class="spinner-border loading-icon" role="status"></div>
      <span class="loading-text">Loading...</span>
    </div>
  </mdb-loading>
</div>
```

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

### Create a new Angular project

Source: https://mdbootstrap.com/docs/angular/getting-started/installation

Initializes a new Angular application with SCSS support.

```bash
ng new my-app
```

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

### Install Tree View Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/tree-view

Use npm to install the Tree View plugin from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/treeview
```

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

### Initialize Onboarding with Anchors

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Use the mdbOnboardingAnchor directive to mark elements as steps and the MdbOnboardingService to define and start the tour.

```html
<section class="border p-4 d-flex justify-content-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-3 text-center">
        <button
          class="btn btn-danger"
          (click)="handleClick()"
        >
          Start onboarding
        </button>
      </div>
    </div>
    <hr />
    <div class="row d-flex justify-content-center">
      <!-- Card Regular -->
      <div class="col-md-4">
        <div class="card">
          <!-- Card image -->
          <img
            [mdbOnboardingAnchor]="'first-step'"
            class="card-img-top"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
            alt="Man in Cap and Glasses"
          />
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!-- Card content -->
          <div class="card-body text-center">
            <!-- Title -->
            <h4
              [mdbOnboardingAnchor]="'second-step'"
              class="card-title"
            >
              <strong>John Doe</strong>
            </h4>
            <!-- Subtitle -->
            <h6 class="fw-bold py-2">Web developer</h6>
            <!-- Text -->
            <p
              [mdbOnboardingAnchor]="'third-step'"
              class="card-text"
            >
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
              recusandae. Facere modi sunt, quod quibusdam.
            </p>

            <div class="d-flex justify-content-evenly">
              <!-- Facebook -->
              <a href="#!" role="button">
                <i class="fab fa-facebook-f fa-lg"></i>
              </a>
              <!-- Twitter -->
              <a href="#!" role="button">
                <i class="fab fa-twitter fa-lg"></i>
              </a>
              <!-- Google + -->
              <a href="#!" role="button">
                <i class="fab fa-dribbble fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- Card Regular -->
    </div>
  </div>
</section>
```

```typescript
import { Component } from '@angular/core';
import { MdbOnboardingService } from 'mdb-angular-onboarding'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public onboardingService: MdbOnboardingService) {}

  handleClick() {
    this.onboardingService.init([
      { id: 'first-step', content: 'This button has just started your onboarding' },
      {
        id: 'second-step',
        content: 'This is just basic example of initial onboarding options and configurations',
      },
      { id: 'third-step', content: 'There is many more options in the examples below' },
    ]);
    this.onboardingService.start();
  }
}
```

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

### Implement Onboarding UI and Logic

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Use the mdbOnboardingAnchor directive to mark elements and the MdbOnboardingService to define and trigger the onboarding sequence.

```html
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-3 text-center">
      <button
        class="btn btn-danger"
        (click)="handleClick()"
        [mdbOnboardingAnchor]="'first-step'"
      >
        Start onboarding
      </button>
    </div>
  </div>
  <hr />
  <div class="row d-flex justify-content-center">
    <!-- Card Regular -->
    <div class="col-md-4">
      <div class="card">
        <!-- Card image -->
        <img
          [mdbOnboardingAnchor]="'second-step'"
          class="card-img-top"
          src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
          alt="Man in Cap and Glasses"
        />
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
        <!-- Card content -->
        <div class="card-body text-center">
          <!-- Title -->
          <h4 class="card-title">
            <strong>John Doe</strong>
          </h4>
          <!-- Subtitle -->
          <h6 class="fw-bold indigo-text py-2">Web developer</h6>
          <!-- Text -->
          <p [mdbOnboardingAnchor]="'third-step'" class="card-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
          </p>

          <div class="d-flex justify-content-evenly">
            <!-- Facebook -->
            <a href="#!" role="button">
              <i class="fab fa-facebook-f fa-lg"></i>
            </a>
            <!-- Twitter -->
            <a href="#!" role="button">
              <i class="fab fa-twitter fa-lg"></i>
            </a>
            <!-- Google + -->
            <a href="#!" role="button">
              <i class="fab fa-dribbble fa-lg"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Card Regular -->
  </div>
</div>
```

```typescript
import { Component, OnInit } from '@angular/core';
import { MdbOnboardingService } from 'mdb-angular-onboarding';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(public onboardingService: MdbOnboardingService) {}
  ngOnInit(): void {
    this.onboardingService.onboardingStart.subscribe(() =>
      console.log('on onboarding start')
    );
  }
  handleClick() {
    this.onboardingService.init([
      {
        id: 'first-step',
        content: 'This button has just started your onboarding',
      },
      {
        id: 'second-step',
        content:
          'This is just basic example of initial onboarding options and configurations',
      },
      {
        id: 'third-step',
        content: 'There is many more options in the examples below',
      },
    ]);
    this.onboardingService.start();
  }
}
```

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

### Install Data Parser Plugin

Source: https://mdbootstrap.com/docs/angular/plugins/data-parser

Use npm to install the data parser package from the MDB private repository.

```bash
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/data-parser
```

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

### Implement Onboarding Anchors in HTML

Source: https://mdbootstrap.com/docs/angular/plugins/onboarding

Use the mdbOnboardingAnchor directive on elements to define target steps for the onboarding tour.

```html
<section class="border p-4 d-flex justify-content-center">
  <div class="container">
    <button class="btn btn-danger" (click)="handleClick()">Start onboarding</button>
    <hr />
    <div class="row d-flex justify-content-center">
      <!-- Card Regular -->
      <div class="col-md-4">
        <div class="card">
          <!-- Card image -->
          <img
            [mdbOnboardingAnchor]="'first-step-backdrop-individual'"
            class="card-img-top"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/men.webp"
            alt="Man in Cap and Glasses"
          />
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!-- Card content -->
          <div class="card-body text-center">
            <!-- Title -->
            <h4
              [mdbOnboardingAnchor]="'second-step-backdrop-individual'"
              class="card-title"
            >
              <strong>John Doe</strong>
            </h4>
            <!-- Subtitle -->
            <h6 class="fw-bold py-2">Web developer</h6>
            <!-- Text -->
            <p class="card-text">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
              recusandae. Facere modi sunt, quod quibusdam.
            </p>

            <div class="d-flex justify-content-evenly">
              <!-- Facebook -->
              <a href="#!" role="button">
                <i class="fab fa-facebook-f fa-lg"></i>
              </a>
              <!-- Twitter -->
              <a href="#!" role="button">
                <i class="fab fa-twitter fa-lg"></i>
              </a>
              <!-- Google + -->
              <a
                [mdbOnboardingAnchor]="'third-step-backdrop-individual'"
                href="#!"
                role="button"
              >
                <i class="fab fa-dribbble fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- Card Regular -->
    </div>
  </div>
</section>
```
Tokens:
Raw