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

Stackblitz

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
}