Create A Onboarding Screen Module for Angular Applications | ngx-onboarding

ngx onboarding is a customizable built-in library for Angular that can be used to direct your visitors through your web application. The setup library gives you the ability to add a tutorial directly to your angular app.

angular onboarding library, onboarding js, onboarding screens, javascript onboarding library, onboarding screen android github, onboarding screen angular native


  • Define multiple steps in each view.
  • Highlight each step.
  • Configurable in which position (top, bottom, left, or right) the info text should be displayed.
  • Multi-language support
  • If the setting is enabled, the buttons to go to the next step and to turn off the setting become visible.
  • If the user sees an onboard view, it will be stored by default in the browser’s local storage.
  • Possibility to reset and run setup again.

How to make use of it:


$ npm install @rosen-group/ngx-onboarding --save

1. Add a rosen-onboarding component anywhere to your main component, for example, app. component.


2. Add material icons reference to index.html.

<link href="//" rel="stylesheet">

3. Add OnboardingModule and its dependencies to your module.

imports: [

4. Add some styles, for example to app.component.css()

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

Property descriptions

PropertyTypeDefault valueDescription
selectorstringnullThe CSS selector, which identifies the html element you want to describe
groupstringnullGroups in the same view will be displayed together
positiontop / bottom / right / leftbottomPositioning of the headline and details
textAlignleft / right / centercenterAlignment of the headline and details
headlinestringnullHeadline text for a single onboarding item
detailsstringnullDetails text for a single onboarding item
descriptionsArraynullCollection of additional translations for headline and detail text
— languagestringnullLanguage key, e.g. en or de, related to your translation definition
— headlinestringnullTranslated headline text for a single onboarding item
— detailsstringnullTranslated details text for a single onboarding item

Create A Onboarding Screen On Your App, ngx-onboarding Plugin/Github, onboarding screen design

See Demo And Download

Official Website(rosen-group): Click Here

This superior jQuery/javascript plugin is developed by rosen-group. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…