Onboarding

Angular Bootstrap 5 Onboarding plugin

Onboarding is a guide plugin to show users how to use your website

Angular Onboarding plugin built with the latest Bootstrap 5. It is is a guide plugin to show users how to use your website.

Note: Read the API tab to find all available options and advanced customization

Basic example

To initialize Onboarding on your page simply add anchors with mdbOnboardingAnchor directive to the elements of your steps. As a first parameter to the init() method specify steps by giving proper id corresponding to previously added anchors, content of a step, and other individual options. As a second parameter you can pass global options which will be introduced to every step. Note that individual options have higher priority than global options.

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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 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>
</section>
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();
  }
}

Start options

Autostart

Onboarding can be auto initialized by passing delay option with the value of seconds after which Onboarding will be triggered

Onboarding will start in: 3

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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 indigo-text 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>
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();
  }
}

Event triggered start

Run initialization methods on any trigger.

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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" (mouseover)="handleMouseover()">
          Hover over me to start
        </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-hover-trigger'"
            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-hover-trigger'"
              class="card-title"
            >
              <strong>John Doe</strong>
            </h4>
            <!-- Subtitle -->
            <h6 class="fw-bold indigo-text 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 href="#!" role="button">
                <i class="fab fa-dribbble fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- Card Regular -->
    </div>
  </div>
</section>
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) {}

  handleMouseover() {
    this.onboardingService.init([
      {
        id: 'first-step-hover-trigger',
        content: "You can use events such as 'click' or 'mouseover'",
      },
      {
        id: 'second-step-hover-trigger',
        content: "You can even use 'load' event on a window element!",
      },
    ]);
    this.onboardingService.start();
  }
}

Backdrop options

Global backdrop

Backdrop for every step inside Onboarding can be set via backdrop option globally, same as the backdropOpacity option which sets an opacity.

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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-global'"
            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-global'"
              class="card-title"
            >
              <strong>John Doe</strong>
            </h4>
            <!-- Subtitle -->
            <h6 class="fw-bold indigo-text 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-global'"
                href="#!"
                role="button"
              >
                <i class="fab fa-dribbble fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- Card Regular -->
    </div>
  </div>
</section>
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-global',
          content: 'Backdrop is set to false by default',
        },
        {
          id: 'second-step-backdrop-global',
          content:
            'Backdrop options set in Onboarding container will be passed to each step element inside it',
        },
        {
          id: 'third-step-backdrop-global',
          content:
            'If you want to set global backdrop but turn it off for one step use options for individual step from the next example',
        },
      ],
      {
        backdrop: true,
        backdropOpacity: 0.3,
      }
    );
    this.onboardingService.start();
  }

}

Individual step backdrop

Indivudal options have higher priority than global options.

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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 indigo-text 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>
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();
  }

}

Autoplay

Set autoplay and stepDuration to enable autoplay

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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 indigo-text 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>
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();
  }

}

Autoscroll

Toggle auto scrolling into element that is outside the view with autoscroll option.

Scroll from this
... to that 
<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">
    <div class="row d-flex justify-content-center">
      <div
        style="margin-bottom: 150vh;"
        [mdbOnboardingAnchor]="'first-step-autoscroll'"
      >
        Scroll from this
      </div>
      <div
      [mdbOnboardingAnchor]="'second-step-autoscroll'"
      >
        ... to that
      </div>
    </div>
  </div>
</div>
</section>
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-autoscroll',
          content: 'Autoscroll is set to true by default',
        },
        {
          id: 'second-step-autoscroll',
          content:
            'To disable it for single step use autoscroll: false; option on that step',
        },
      ],
      { backdrop: true }
    );
    this.onboardingService.start();
  }

}

Popover customization

Buttons and labels customization

You can change buttons styles and labels inside step popover via proper options. For more info visit API section

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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-buttons-and-labels'"
          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-buttons-and-labels'"
            class="card-title"
          >
            <strong>John Doe</strong>
          </h4>
          <!-- Subtitle -->
          <h6 class="fw-bold indigo-text 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-buttons-and-labels'"
            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-buttons-and-labels'"
              href="#!"
              role="button"
            >
              <i class="fab fa-dribbble fa-lg"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Card Regular -->
  </div>
</div>
</section>
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-buttons-and-labels',
          content: 'Globally changed button labels',
          prevLabel: 'Left',
          nextLabel: 'Right',
          skipLabel: 'End',
        },
        {
          id: 'second-step-buttons-and-labels',
          content: 'Locally changed control labels',
          prevLabel: 'Left',
          nextLabel: 'Right',
          skipLabel: 'End',
          pauseLabel: 'Stop',
          resumeLabel: 'Start',
          autoplay: true,
        },
        {
          id: 'third-step-buttons-and-labels',
          content: 'You can even use our icons inside button labels!',
          nextLabel: '<i class="fas fa-arrow-right" style="pointer-events: none"></i>',
          prevLabel: '<i class="fas fa-arrow-left" style="pointer-events: none"></i>',
        },
        {
          id: 'fourth-step-buttons-and-labels',
          content:
            'Backdrop options set in Onboarding container will be passed to each step element inside it',
          btnPrevClass: 'btn-outline-primary btn-rounded',
          btnNextClass: 'btn-outline-primary btn-rounded',
          btnSkipClass: 'btn-outline-warning btn-rounded',
          btnFinishClass: 'btn-outline-warning btn-rounded',
          nextLabel: '<i class="fas fa-arrow-right" style="pointer-events: none"></i>',
          prevLabel: '<i class="fas fa-arrow-left" style="pointer-events: none"></i>',
          finishLabel: '<i class="fas fa-times" style="pointer-events: none"></i>',
        },
      ],
      { backdrop: true }
    );
    this.onboardingService.start();
  }

}

Popover class

Add custom class for popovers by setting customClass option and style it in your css sheet.

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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 indigo-text 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>
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();
  }

}

Container example

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Man in Cap and Glasses

Kate Smith

Graphic designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Man in Cap and Glasses

Natalie Code

Backend developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Gallery

Mountains in the Clouds
Wintry Mountain Landscape
Mountains in the Clouds
Yosemite National Park
Wintry Mountain Landscape
Yosemite National Park
Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Man in Cap and Glasses

Kate Smith

Graphic designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Man in Cap and Glasses

Natalie Code

Backend developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<section
class="border p-4 d-flex justify-content-center onboarding"
style="max-height: 120vh; overflow-y: auto;"
#onboardingContainer
>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-3 text-center">
      <button
        (click)="handleClick()"
        class="btn btn-danger"
        [mdbOnboardingAnchor]="'first-step-container'"
        id="container-starter"
      >
        Watch Demo <i class="fas fa-eye"></i>
      </button>
    </div>
  </div>
  <hr />

  <!-- Cards container -->
  <div class="row my-4">
    <!-- Card Regular -->
    <div class="col-md-4">
      <div class="card">
        <!-- Card image -->
        <img
          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 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 -->

    <!-- Card Regular -->
    <div class="col-md-4">
      <div class="card">
        <!-- Card image -->
        <img
          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>Kate Smith</strong></h4>
          <!-- Subtitle -->
          <h6 class="fw-bold indigo-text py-2">Graphic designer</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 href="#!" role="button">
              <i class="fab fa-dribbble fa-lg"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Card Regular -->
    <!-- Card Regular -->
    <div class="col-md-4">
      <div class="card">
        <!-- Card image -->
        <img
          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>Natalie Code</strong></h4>
          <!-- Subtitle -->
          <h6 class="fw-bold indigo-text py-2">Backend 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 href="#!" role="button">
              <i class="fab fa-dribbble fa-lg"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- Card Regular -->
  </div>
  <!-- Cards container -->

  <hr />

  <h4 class="text-center my-4"
  [mdbOnboardingAnchor]="'third-step-container'"
  >
    Gallery
  </h4>

  <!-- Gallery -->
  <div
    class="row"
    [mdbOnboardingAnchor]="'fourth-step-container'"
  >
  <!-- Grid row -->
  <div class="my-3 row">
    <!-- Grid column -->
    <div class="mb-3 col-md-4">
      <img
        class="img-fluid"
        src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
        alt="Mountains in the Clouds"
      />
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 col-md-4">
      <img
        class="img-fluid"
        src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
        alt="Wintry Mountain Landscape"
      />
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 col-md-4">
      <img
        class="img-fluid"
        src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
        alt="Mountains in the Clouds"
      />
    </div>
    <!-- Grid column -->
  </div>
  <!-- Grid row -->

  <!-- Grid row -->
  <div class="my-3 row">
    <!-- Grid column -->
    <div
      class="mb-3 col-md-4"
      [mdbOnboardingAnchor]="'second-step-container'"
    >
      <img
        class="img-fluid"
        src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
        alt="Yosemite National Park"
      />
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 col-md-4">
      <img
        class="img-fluid"
        src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
        alt="Wintry Mountain Landscape"
      />
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="mb-3 col-md-4">
      <img
        class="img-fluid"
        src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
        alt="Yosemite National Park"
      />
    </div>
    <!-- Grid column -->
  </div>
  <!-- Grid row -->
</div>
<!-- Gallery -->
<!-- Cards container -->
<div class="row my-4"
[mdbOnboardingAnchor]="'fifth-step-container'"
>
  <!-- Card Regular -->
  <div class="col-md-4">
    <div class="card">
      <!-- Card image -->
      <img
        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 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 -->

  <!-- Card Regular -->
  <div class="col-md-4">
    <div class="card">
      <!-- Card image -->
      <img
        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>Kate Smith</strong></h4>
        <!-- Subtitle -->
        <h6 class="fw-bold indigo-text py-2">Graphic designer</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 href="#!" role="button">
            <i class="fab fa-dribbble fa-lg"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- Card Regular -->
  <!-- Card Regular -->
  <div class="col-md-4">
    <div class="card">
      <!-- Card image -->
      <img
        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>Natalie Code</strong></h4>
        <!-- Subtitle -->
        <h6 class="fw-bold indigo-text py-2">Backend 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 href="#!" role="button">
            <i class="fab fa-dribbble fa-lg"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- Card Regular -->
</div>
<!-- Cards container -->
</div>
</section>
import { Component, ElementRef, ViewChild } from '@angular/core';
import { MdbOnboardingService } from 'mdb-angular-onboarding'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild('onboardingContainer') onboardingContainer!: ElementRef<any>;

  constructor(public onboardingService: MdbOnboardingService) {}

  handleClick() {
    this.onboardingService.init(
      [
        {
          id: 'first-step-container',
          content: 'Backdrop is set to false by default',
        },
        {
          id: 'second-step-container',
          content:
            'Backdrop options set in Onboarding container will be passed to each step element inside it',
        },
        {
          id: 'third-step-container',
          content: 'Backdrop is set to false by default',
        },
        {
          id: 'fourth-step-container',
          content: 'Backdrop is set to false by default',
        },
        {
          id: 'fifth-step-container',
          content: 'Backdrop is set to false by default',
        },
      ],
      { backdrop: true, container: this.onboardingContainer }
    );
    this.onboardingService.start();
  }

}

Index example

Man in Cap and Glasses

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<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 indigo-text 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>
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();
  }

}

Onboarding - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

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

Import

import { MdbOnboardingModule } from 'mdb-angular-onboarding';
…
@NgModule ({
  ...
  imports: [MdbOnboardingModule],
  ...
})

Inputs

MdbOnboardingDirective

Name Type Default Description
mdbOnboardingAnchor string '' Marks the element as an anchor to be referenced later in an id option

Outputs

MdbOnboardingService

Name Type Description
onboardingStart EventEmitter<void> Emitted when an Onboarding has started.
onboardingEnd EventEmitter<void> Emitted when the last step of the Onboarding has ended.
onboardingOpen EventEmitter<void> Emitted when a step element has opened.
onboardingClose EventEmitter<void> Emitted when a step element has closed
onboardingNext EventEmitter<void> Emitted when next step is about to be opened.
onboardingPrev EventEmitter<void> Emitted when previous step is about to be opened. 
<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>
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();
  }
}

Methods

MdbOnboardingService

Name Description Example
init(steps, config?) Initializes the Onboarding with given steps: MdbOnboardingStep[] and config: MdbOnboardingConfig. onboardingService.init(steps, options);
close Closes opened step popover. onboardingService.close()
nextStep Opens next step popover. onboardingService.nextStep()
prevStep Opens previous step popover. onboardingService.prevStep()
pause Pauses Onboarding on current step when autoplay is on. onboardingService.pause()
resume Resumes Onboarding on current step when autoplay is on. onboardingService.resume() 
<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>
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();
  }
}

Advanced types

MdbOnboardingConfig

Name Type Default Description
backdrop boolean | undefined false Defines whether backdrop should be rendered
backdropOpacity number | undefined 0.4 Defines the backdrop opacity
nextLabel string | undefined 'Next' Overwrites label of the 'Next' button
prevLabel string | undefined 'Back' Overwrites label of the 'Back' button
skipLabel string | undefined 'Skip' Overwrites label of the 'Skip' button
finishLabel string | undefined 'Finish' Overwrites label of the 'Finish' button
pauseLabel string | undefined 'Pause' Overwrites label of the 'Pause' button
resumeLabel string | undefined 'Resume' Overwrites label of the 'Resume' button
btnNextClass string | undefined 'btn-primary' Overwrites class of the 'Next' button
btnPrevClass string | undefined 'btn-primary' Overwrites class of the 'Back' button
btnSkipClass string | undefined 'btn-danger' Overwrites class of the 'Skip' button
btnFinishClass string | undefined 'btn-danger' Overwrites class of the 'Finish' button
btnPauseClass string | undefined 'btn-primary' Overwrites class of the 'Pause' button
btnResumeClass string | undefined 'btn-success' Overwrites class of the 'Resume' button
customClass string | undefined '' Custom class for the popover
autoplay boolean | undefined false Defines whether autoplay is on or off
stepDuration number | undefined 4 Defines the duration of a step for the autoplay in seconds
autoscroll boolean | undefined true Defines whether window should automatically scroll into opened step position
placement 'top' | 'right' | 'bottom' | 'left' | undefined 'bottom' Defines placement of step popover
container ElementRef | null | undefined null Defines wrapper element for onboarding
delay number | undefined undefined Defines time in seconds after which Onboarding will start.
index number | undefined 1 Defines index number for step element

MdbOnboardingStep

Note: Due to its complexity, we present this advanced type in the form of a snippet rather than a table. 

export interface MdbOnboardingStep {
  id: string;
  content: string;
  backdrop?: boolean;
  backdropOpacity?: number;
  nextLabel?: string;
  prevLabel?: string;
  skipLabel?: string;
  finishLabel?: string;
  pauseLabel?: string;
  resumeLabel?: string;
  btnNextClass?: string;
  btnPrevClass?: string;
  btnSkipClass?: string;
  btnFinishClass?: string;
  btnPauseClass?: string;
  btnResumeClass?: string;
  customClass?: string | string[];
  autoplay?: boolean;
  stepDuration?: number;
  autoscroll?: boolean;
  placement?: 'top' | 'right' | 'bottom' | 'left';
  container?: ElementRef<any> | null;
  delay?: number;
  index?: number;
}