https://github.com/leifermendez/ngx-copilot

🏆 The most expected has arrived, a package for Angular that facilitates us to improve the experience of our users when guiding them in our interface
https://github.com/leifermendez/ngx-copilot

angular angular-stepper angular-wizard copilot copiloto ngx-copilot ngx-tour nodejs pwa pwa-apps stepper ui-design ux-design wizard wizard-steps

Last synced: 17 days ago
JSON representation

🏆 The most expected has arrived, a package for Angular that facilitates us to improve the experience of our users when guiding them in our interface

• Host: GitHub
• URL: https://github.com/leifermendez/ngx-copilot
• Owner: leifermendez
• License: apache-2.0
• Created: 2020-06-25T14:38:46.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-02-23T14:36:21.000Z (over 3 years ago)
• Last Synced: 2024-10-11T09:47:11.259Z (about 1 month ago)
• Topics: angular, angular-stepper, angular-wizard, copilot, copiloto, ngx-copilot, ngx-tour, nodejs, pwa, pwa-apps, stepper, ui-design, ux-design, wizard, wizard-steps
• Language: TypeScript
• Homepage: https://ngx-copilot.stackblitz.io/
• Size: 82 KB
• Stars: 83
• Watchers: 3
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# Angular Copilot (ngx-copilot)

The most expected has arrived, a package for Angular that facilitates us to improve the experience of our users when guiding them in our interface

    



---

[Live demo](https://ngx-copilot.stackblitz.io/)

[Stackblitz](https://stackblitz.com/edit/ngx-copilot)



Examples







	



### Install

`npm i ngx-copilot@latest --save`

`npm install animate.css --save`

### Import

__angular.json__

```json

"styles": [

  "./node_modules/animate.css/animate.min.css", 

  "./node_modules/ngx-copilot/src/lib/ngx-copilot.css",

],

```

__app.module.ts__

```typescript

import {BrowserModule} from '@angular/platform-browser';  

import {NgModule} from '@angular/core';  

import {AppComponent} from './app.component';  

/** IMPORT **/

import { NgxCopilotModule } from  'ngx-copilot'; 👈

  

@NgModule({  

  declarations: [  

    AppComponent  

  ],  

  imports: [  

    BrowserModule,  

	NgxCopilotModule 👈

  ],  

  providers: [],  

  bootstrap: [AppComponent]  

})  

export class AppModule {  

}

```

__app.component.html__

```html

```

### Use

Use in your component

```typescript

import  {Component,  OnInit}  from  '@angular/core'; 

import  {NgxCopilotService}  from  'ngx-copilot';

@Component({  

  selector: 'app-root',  

  templateUrl: './app.component.html',  

  styleUrls: ['./app.component.css']  

})  

export class AppComponent implements  OnInit {  

	constructor(private  copilot:  NgxCopilotService){}

	

	ngOnInit() {

		this.copilot.checkInit();

	}

	

	/*Re initialize in specify step*/

	initPosition  = (stepNumber:any) =>  this.copilot.checkInit(stepNumber);

	

	/*Next Step*/

	nextStep = (stepNumber:any) =>  this.copilot.next(stepNumber);

	

	/*Finish*/

	done= () =>  this.copilot.removeWrapper();

}

```

### Template

```html

  


	

	

		


		
Step 1

		
Hello !

			


				Next Step 2!

				Done!

			

		

	


	

	

		


		
Step 2

		
Bye

			


				Back Step 1!

				Done!

			

		

	


		

	


	 Focus 1

	


	


	 Focus 2

	




```

### Customize


When the `copilot` is active add a class in your body:

__ngx-copilot-active__: Is actived

__ngx-copilot-active-step-(NUMBER STEP)__: Is actived with number step

![](https://i.imgur.com/zqMXbE8.png)

If you want change of overlay color insert in your styles.css: 

```css

:root{

	--zoneColor:rgba(114, 113, 160, 0.5) !important

}

```