# angular-onboarding

> 1. `npm i --save-dev angular-onboarding` 2. Edit your module file to import `AngularOnboardingModule` and pass a config ```typescript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

Latest version **0.1.2** (published 2018-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-onboarding
pnpm add angular-onboarding
yarn add angular-onboarding
bun add angular-onboarding
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-07-17 |
| First published | 2018-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 392 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brandon Cravener |
| Maintainers | brandoncravener |

## Links

- npm: https://www.npmjs.com/package/angular-onboarding
- Repository: https://github.com/BrandonCravener/angular-onboarding
- Homepage: https://github.com/BrandonCravener/angular-onboarding#readme
- Issues: https://github.com/BrandonCravener/angular-onboarding/issues
- npm.io page: https://npm.io/package/angular-onboarding

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.1.2 (latest) — 2018-07-17
- 0.1.1 — 2018-07-17
- 0.1.0 — 2018-07-11

## README

# angular-onboarding
## Getting Started
1. `npm i --save-dev angular-onboarding`
2. Edit your module file to import `AngularOnboardingModule` and pass a config
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AngularOnboardingModule } from 'angular-onboarding';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AngularOnboardingModule.forRoot({
      steps: [
        {
          id: 0,
          text: 'This is your home!',
          path: '/'
        },
        {
          id: 1,
          text: 'This is your dashboard!',
          path: '/dashboard'
        }
      ]
    }),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```
3. Edit your app component file to include `<ao-overlay></ao-overlay>`
4. Add `ao-step` to every component file with a element you want to showcase.
```html
<button #logoutButton>Logout</button>
<ao-step id="0" [element]="logoutButton" location="above"></ao-step>
```
5. Define a function to handel the routing it will be passed a path as a string.
6. Import `AngularOnboardingSerivce` and call `start()` with the routing handler!
```typescript
import { Component, AfterViewInit } from '@angular/core';
import { AngularOnboardingService } from 'angular-onboarding';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  constructor(private router: Router, private aoService: AngularOnboardingService) {
    aoService.navigateSubject.subscribe(path => {
      router.navigateByUrl(path);
    });
  }

  ngAfterViewInit() {
    this.aoService.start();
  }
}
```
## Docs

### Components
#### Overlay `<ao-overlay></ao-overlay>`
Essential for functionality of the library, adds the backdrop.

#### Step `<ao-step></ao-step>`
Element correlating to the steps passed to the library. 

It should be placed in the component that has the reference element in it.
| Attribute | Type        | Optional |
| --------- | ----------- | -------- |
| id        | number      | no       |
| element   | HTMLElement | no       |
| location  | string      | no       |

### Services
#### AngularOnboardingService

| Method       | Description                                 |
| ------------ | ------------------------------------------- |
| start()      | Starts / resumes the tutorial.              |
| isFinished() | Returns if the user finished the onboarding |
| reset()      | Resets all tutorial data.                   |

### Interfaces

#### Step
| Property | Type   | Optional | Extra                                      |
| -------- | ------ | -------- | ------------------------------------------ |
| id       | number | no       |                                            |
| text     | string | no       |                                            |
| route    | string | yes      | The route that the step will be located on |

#### Config
| Property  | Type   | Optional |
| --------- | ------ | -------- |
| steps     | Step[] | no       |
| padding   | number | yes      |

#### AOStorage
| Property | Type    | Optional |
| -------- | ------- | -------- |
| step     | number  | no       |
| enabled  | boolean | no       |

---
_Source: https://npm.io/package/angular-onboarding · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._