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
Examples
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
}