Skip to content

abbas-mgz/ngx-web-tour

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

8 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

ngx-web-tour demo

๐ŸŽฏ NgxWebTour

A beautiful, modern, and fully customizable product tour library for Angular applications. Create engaging user onboarding experiences with smooth animations and professional UI.

Angular TypeScript License

โœจ Features

  • ๐ŸŽจ Beautiful Modern UI - Professional design with smooth animations
  • ๐ŸŽฏ Smart Auto-Positioning - Automatically finds the best position for tooltips
  • ๐ŸŒˆ Backdrop & Highlight - Focus user attention with backdrop overlay
  • ๐Ÿ“Š Progress Tracking - Visual progress bar and step counter
  • ๐ŸŽฎ Full Control - Next, Previous, Done buttons with customizable text
  • ๐Ÿ“ฑ Fully Responsive - Works perfectly on all screen sizes
  • ๐Ÿ”„ Observable State - Track tour progress with RxJS observables
  • โš™๏ธ Highly Customizable - Configure every aspect of the tour
  • ๐Ÿš€ Multiple Tours - Support for multiple independent tours
  • ๐Ÿ’ช Type Safe - Full TypeScript support with IntelliSense
  • ๐Ÿชถ Lightweight - Zero external dependencies (except Angular & RxJS)
  • ๐ŸŒ i18n Ready - Built-in support for 13+ languages

๐Ÿ“ฆ Installation

npm install @abbasmgz/ngx-web-tour

๐Ÿš€ Quick Start

1. Import Module

import { NgxWebTourModule } from '@abbasmgz/ngx-web-tour';

@NgModule({
  imports: [NgxWebTourModule],
})
export class AppModule {}

2. Add Tour Directive

<button
  tour="welcome-tour"
  tourTitle="Get Started"
  tourText="Click here to begin your journey!"
  [tourPriority]="1"
>
  Start
</button>

<div
  tour="welcome-tour"
  tourTitle="Dashboard"
  tourText="View all your data in one place"
  [tourPriority]="2"
  tourPosition="bottom"
>
  Your Dashboard
</div>

3. Start the Tour

import { TourService } from '@abbasmgz/ngx-web-tour';

@Component({...})
export class AppComponent {
  constructor(private tourService: TourService) {}

  startTour() {
    this.tourService.start('welcome-tour');
  }
}

That's it! ๐ŸŽ‰

๐Ÿ“– Documentation

๐ŸŽจ Screenshots & Demo

Beautiful Tooltip Design

Professional, modern tooltips with:

  • Smooth animations and transitions
  • Auto-positioning to fit viewport
  • Progress indicator
  • Customizable buttons
  • Close button option

Backdrop Highlight

Focus attention with:

  • Overlay backdrop
  • Highlighted element with pulse animation
  • Click-outside to close option

๐Ÿ”ง Configuration Options

this.tourService.configure({
  backdrop: true,
  backdropColor: 'rgba(0, 0, 0, 0.7)',
  closeOnBackdropClick: true,
  showProgress: true,
  allowClose: true,
  nextBtnText: 'Next โ†’',
  prevBtnText: 'โ† Back',
  doneBtnText: 'โœ“ Done',
  animationDuration: 300,
});

๐Ÿ“Š Track Tour State

this.tourService.state$.subscribe(state => {
  console.log('Active:', state.isActive);
  console.log('Step:', state.currentStep + 1, '/', state.totalSteps);
  console.log('Tour:', state.tourName);
});

๐ŸŽฏ Directive Inputs

Input Type Default Description
tour string - Tour identifier (required)
tourText string - Step description (required)
tourTitle string - Step title (optional)
tourPriority number 0 Step order
tourPosition string 'auto' Tooltip position
tourShowProgress boolean true Show progress bar
tourAllowClose boolean true Show close button

๐Ÿ› ๏ธ Development

Build Library

npm run build

Run Tests

npm test

๐Ÿค Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

๐Ÿ“„ License

MIT License - feel free to use in your projects!

โญ Show Your Support

If you find this library useful, please give it a โญ on GitHub!


Made with โค๏ธ for the Angular community

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors