# ngx-whats-new

> Ngx-whats-new is an angular module with a multi-modal component that is typically used to present new features of your application.

Latest version **0.5.0** (published 2024-10-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-whats-new
pnpm add ngx-whats-new
yarn add ngx-whats-new
bun add ngx-whats-new
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2024-10-28 |
| First published | 2021-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 111.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | 4gray |
| Maintainers | 4gray |
| Keywords | angular, modal, popup, dialog |

## Links

- npm: https://www.npmjs.com/package/ngx-whats-new
- Repository: https://github.com/4gray/ngx-whats-new
- Issues: https://github.com/4gray/ngx-whats-new/issues
- npm.io page: https://npm.io/package/ngx-whats-new

## Dependencies (1)

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

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.5.0 (latest) — 2024-10-28
- 0.4.0 — 2023-01-23
- 0.3.0 — 2022-07-19
- 0.2.0 — 2022-07-09
- 0.1.0 — 2021-07-05
- 0.0.1 — 2021-04-10

## README

# NgxWhatsNew

Ngx-whats-new is an angular module with a multi-modal component that is typically used to present new features of your application.

![ngx-whats-new screencast](screencast.gif)

```
    npm i ngx-whats-new
```

## Usage example:

[Codesandbox example](https://codesandbox.io/s/ngx-whats-new-demo-nxc8b?file=/src/main.ts)

Import the component:

```typescript
import { NgModule } from "@angular/core";
import { NgxWhatsNewComponent } from "ngx-whats-new";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [NgxWhatsNewComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

Use `<ngx-whats-new>` in your component:

app.component.html

```html
<button (click)="openDialog()">Open Dialog</button>

<ngx-whats-new
  #whatsNew
  (opened)="onOpen()"
  (closed)="onClose()"
  (navigation)="onNavigation($event)"
  [items]="modals"
  [options]="options"
/>
```

app.component.ts

```typescript
    @ViewChild('whatsNew') private readonly modal?: NgxWhatsNewComponent;

    /** Options for the modal */
    public options: DialogOptions = {
      enableKeyboardNavigation: true,
      clickableNavigationDots: true,
      disableClose: false,
      customStyle: {
        width: '500px',
        backgroundColor: '#fff',
        borderSize: '1px',
        textColor: '#222',
        borderRadius: '10px',
        boxShadow: '0px 0px 10px 5px #999',
      },
    };

    /** definition of all modals to show */
    modals = [
      {
        title: 'Whats new in v1.0.0',
        html: 'Lorem ipsum dolor sit amet, consectetur adipiscing el aspect et just.<br /><a href="http://google.com">test</a> ',
        image: {
          height: 500,
          src: 'https://picsum.photos/500',
          altText:
            'In v1.0.0, lorem ipsum dolor sit amet.',
        },
        button: {
          text: 'Okay',
          textColor: '#fff',
          bgColor: '#333',
          position: 'center',
        },
      },
      ...
    ];

    public openDialog(): void {
      this.modal?.open();
    }

    public onOpen(): void {
      console.log('Dialog opened');
    }

    public onClose(): void {
      console.log('Dialog closed');
    }

    public onNavigation($event: NavigationEvent) {
      console.info('Previous item:', $event.previousItem);
      console.info('Current item:', $event.currentItem);
    }
```

> [!NOTE]
> Optionally, you could use `@if` to conditionally render the component. Like so:
>
> app.component.html
>
> ```html
> @if (isDialogVisible) {
>   <ngx-whats-new
>     #whatsNew
>     (opened)="onOpen()"
>     (closed)="onClose()"
>     (navigation)="onNavigation($event)"
>     [items]="modals"
>     [options]="options"
>   />
> }
> ```
>
> app.component.ts
>
> ```typescript
>   public isDialogVisible: boolean | undefined;
>
>   public openDialog(): void {
>     isDialogVisible = true;
>   }
>
>   public onClose(): void {
>     isDialogVisible = false;
>   }
> ```

## Available Options:

General options:

```typescript
interface DialogOptions {
  disableClose?: boolean;
  enableKeyboardNavigation?: boolean;
  clickableNavigationDots?: boolean;
  customStyle: {
    width?: string;
    boxShadow?: string;
    backgroundColor?: string;
    textColor?: string;
    borderRadius?: string;
    borderSize?: string;
  };
}
```

Options of a single modal window:

```typescript
interface WhatsNewItem {
  title?: string;
  text?: string;
  html?: string;
  image?: {
    src: string;
    height?: number;
    bgColor?: string;
    altText: string;
  };
  button?: {
    text: string;
    textColor: string;
    bgColor: string;
    position?: "left" | "center" | "right";
  };
}
```

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