Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ng5-bootstrap-product-tour
Advanced tools
Readme
This is a product tour library built with Angular (2+).
NgxBootstrapProductTourModule
is an implementation of the tour ui that uses ngx-bootstrap popovers to display tour steps.
For Angular 4 use package version 1.0.6
For Angular 5 use package version 2.0.x
npm i ngx-bootstrap-product-tour ngx-bootstrap bootstrap
NgxBootstrapProductTourModule.forRoot()
into your app moduleRouterModule
is imported in your app moduleAdd <ngx-bootstrap-product-tour></ngx-bootstrap-product-tour>
to your root app component
Define anchor points for the tour steps by adding the tourAnchor
directive throughout your app.
<div tourAnchor="some.anchor.id">...</div>
Define your tour steps using tourService.initialize(steps)
this.tourService.initialize([{
anchorId: 'some.anchor.id',
content: 'Some content',
title: 'First',
}, {
anchorId: 'another.anchor.id',
content: 'Other content',
title: 'Second',
}]);
Start the tour with tourService.start()
Demo page can be found here and it's source code here.
The TourService
controls the tour. Some key functions include
Function | Description |
---|---|
start() | Starts the tour |
startAt(stepId: number | string) | Start the tour at the step with stepId or at the specified index |
end() | Ends the tour |
pause() | Pauses the tour |
resume() | Resumes the tour |
next() | Goes to the next step |
prev() | Goes to the previous step |
Each step can have the following properties.
Name | Type | Default | Description |
---|---|---|---|
stepId | string | "" | A unique identifier for the step |
anchorId | string | required | The anchor to which the step will be attached |
title | string | "" | The title of the tour step |
content | string | "" | The content text of the tour step |
route | string | UrlSegment[] | undefined |
nextStep | number | string | undefined |
prevStep | number | string | undefined |
placement | 'top' | 'bottom' | 'right' | 'left' | 'top' | Where the tour step should placed with respect to the anchor. |
preventScrolling | boolean | false | Tour steps automatically scroll to the middle of the screen, if they are off the screen when shown. Setting this value to true will disable the scroll behavior. |
containerClass | string | "" | Css class for popover container. |
orphan | boolean | false | Tour popover will be placed in the center of the screen, must have anchorId but it won't be shown next to that element. |
promise | promise<any> | "" | Step shows after promise has been resolved. |
delay | number | 0 | Time in milliseconds before showing the tour step. |
backdrop | boolean | false | Shows/hides backdrop. You need to set backgroud color and z-index on class .tour-backdrop and higher z-index on .tour-step-backdrop. |
You can set default values in the TourService.initialize
function.
this.tourService.initialize(steps, {{ '{' }}
route: '',
placement: 'left',
preventScrolling: true,
});
Any value explicitly defined in a step will override the default value.
The TourService
emits events that can be subscribed to like this:
this.tourService.initialize$.subscribe((steps: IStep[]) => {{ '{' }}
console.log('tour configured with these steps:', steps);
});
Name | Payload | Emitted When |
---|---|---|
stepShow$ | IStep | A step is shown |
stepHide$ | IStep | A step is hidden |
initialize$ | IStep[] | The tour is configured with a set of steps |
start$ | IStep | The tour begins |
end$ | any | The tour ends |
pause$ | IStep | The tour is paused |
resume$ | IStepI | The tour resumes |
anchorRegister$ | string | An anchor is registered with the tour |
anchorUnregister$ | string | An anchor is unregistered from the tour |
You can also customize the tour step template by providing an <ng-template>
inside the <ngx-bootstrap-product-tour>
The default template is equivalent to this:
<ngx-bootstrap-product-tour>
<ng-template #tourStep>
<p class="tour-step-content">{{tourService.currentStep.content}}</p>
<div class="tour-step-navigation">
<button *ngIf="tourService.hasPrev(tourService.currentStep)" class="btn btn-sm btn-default" (click)="tourService.prev()">« Prev</button>
<button *ngIf="tourService.hasNext(tourService.currentStep)" class="btn btn-sm btn-default" (click)="tourService.next()">Next »</button>
<button class="btn btn-sm btn-error" (click)="tourService.end()">End</button>
</div>
</ng-template>
</ngx-bootstrap-product-tour>
FAQs
Angular product tour using ngx-bootstrap popover (Only for NG5)
The npm package ng5-bootstrap-product-tour receives a total of 0 weekly downloads. As such, ng5-bootstrap-product-tour popularity was classified as not popular.
We found that ng5-bootstrap-product-tour demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.