Skip to content

πŸ† 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

License

Notifications You must be signed in to change notification settings

leifermendez/ngx-copilot

Repository files navigation

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

Buy Me A Coffee

Live demo

Stackblitz

Examples
Preview 1
Preview 2

Install

npm i ngx-copilot@latest --save

npm install animate.css --save

Import

angular.json

"styles": [
  "./node_modules/animate.css/animate.min.css", 
  "./node_modules/ngx-copilot/src/lib/ngx-copilot.css",

],

app.module.ts

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

<ngx-wrapper-copilot></ngx-wrapper-copilot>

Use

Use in your component

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

<div>  

	<!--********** TEMPLATE FOR STEP 1  **********-->
	<ng-template  #step1>
		<div  class="copilot-custom">
		<h3>Step 1</h3>
		<p>Hello !</p>
			<div  class="footer-btn">
				<button  (click)="nextStep(2)"  type="button">Next Step 2!</button>
				<button  (click)="done()"  type="button">Done!</button>
			</div>
		</div>
	</ng-template>

	<!--********** TEMPLATE FOR STEP 2  **********-->
	<ng-template  #step2>
		<div  class="copilot-custom">
		<h3>Step 2</h3>
		<p>Bye</p>
			<div  class="footer-btn">
				<button  (click)="nextStep(1)"  type="button">Back Step 1!</button>
				<button  (click)="done()"  type="button">Done!</button>
			</div>
		</div>
	</ng-template>

	<!--********** BODY  **********-->	
	<div copilot
	[copilot-template]="step1" [copilot-step]="1">
	 <button >Focus 1</button>
	</div>

	<div copilot
	[copilot-template]="step2" [copilot-step]="2">
	 <button >Focus 2</button>
	</div>

</div>

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

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

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

About

πŸ† 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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published