{"id":20684468,"url":"https://github.com/4gray/ngx-whats-new","last_synced_at":"2025-04-22T13:13:59.187Z","repository":{"id":46878258,"uuid":"354868094","full_name":"4gray/ngx-whats-new","owner":"4gray","description":"A simple library for creating multi-modal windows","archived":false,"fork":false,"pushed_at":"2024-10-28T13:10:07.000Z","size":2203,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-28T16:49:17.425Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/4gray.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-05T14:48:41.000Z","updated_at":"2024-10-28T13:10:11.000Z","dependencies_parsed_at":"2023-02-13T04:01:38.376Z","dependency_job_id":null,"html_url":"https://github.com/4gray/ngx-whats-new","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4gray%2Fngx-whats-new","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4gray%2Fngx-whats-new/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4gray%2Fngx-whats-new/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4gray%2Fngx-whats-new/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4gray","download_url":"https://codeload.github.com/4gray/ngx-whats-new/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224975658,"owners_count":17401255,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T22:22:03.265Z","updated_at":"2024-11-16T22:22:03.810Z","avatar_url":"https://github.com/4gray.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Nov 29, 2024](/content/2024/11/29/README.md)","Modals"],"readme":"# NgxWhatsNew\n\nNgx-whats-new is an angular module with a multi-modal component that is typically used to present new features of your application.\n\n![ngx-whats-new screencast](screencast.gif)\n\n```\n    npm i ngx-whats-new\n```\n\n## Usage example:\n\n[Codesandbox example](https://codesandbox.io/s/ngx-whats-new-demo-nxc8b?file=/src/main.ts)\n\nImport the component:\n\n```typescript\nimport { NgModule } from \"@angular/core\";\nimport { NgxWhatsNewComponent } from \"ngx-whats-new\";\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [NgxWhatsNewComponent],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nUse `\u003cngx-whats-new\u003e` in your component:\n\napp.component.html\n\n```html\n\u003cbutton (click)=\"openDialog()\"\u003eOpen Dialog\u003c/button\u003e\n\n\u003cngx-whats-new\n  #whatsNew\n  (opened)=\"onOpen()\"\n  (closed)=\"onClose()\"\n  (navigation)=\"onNavigation($event)\"\n  [items]=\"modals\"\n  [options]=\"options\"\n/\u003e\n```\n\napp.component.ts\n\n```typescript\n    @ViewChild('whatsNew') private readonly modal?: NgxWhatsNewComponent;\n\n    /** Options for the modal */\n    public options: DialogOptions = {\n      enableKeyboardNavigation: true,\n      clickableNavigationDots: true,\n      disableClose: false,\n      customStyle: {\n        width: '500px',\n        backgroundColor: '#fff',\n        borderSize: '1px',\n        textColor: '#222',\n        borderRadius: '10px',\n        boxShadow: '0px 0px 10px 5px #999',\n      },\n    };\n\n    /** definition of all modals to show */\n    modals = [\n      {\n        title: 'Whats new in v1.0.0',\n        html: 'Lorem ipsum dolor sit amet, consectetur adipiscing el aspect et just.\u003cbr /\u003e\u003ca href=\"http://google.com\"\u003etest\u003c/a\u003e ',\n        image: {\n          height: 500,\n          src: 'https://picsum.photos/500',\n          altText:\n            'In v1.0.0, lorem ipsum dolor sit amet.',\n        },\n        button: {\n          text: 'Okay',\n          textColor: '#fff',\n          bgColor: '#333',\n          position: 'center',\n        },\n      },\n      ...\n    ];\n\n    public openDialog(): void {\n      this.modal?.open();\n    }\n\n    public onOpen(): void {\n      console.log('Dialog opened');\n    }\n\n    public onClose(): void {\n      console.log('Dialog closed');\n    }\n\n    public onNavigation($event: NavigationEvent) {\n      console.info('Previous item:', $event.previousItem);\n      console.info('Current item:', $event.currentItem);\n    }\n```\n\n\u003e [!NOTE]\n\u003e Optionally, you could use `@if` to conditionally render the component. Like so:\n\u003e\n\u003e app.component.html\n\u003e\n\u003e ```html\n\u003e @if (isDialogVisible) {\n\u003e   \u003cngx-whats-new\n\u003e     #whatsNew\n\u003e     (opened)=\"onOpen()\"\n\u003e     (closed)=\"onClose()\"\n\u003e     (navigation)=\"onNavigation($event)\"\n\u003e     [items]=\"modals\"\n\u003e     [options]=\"options\"\n\u003e   /\u003e\n\u003e }\n\u003e ```\n\u003e\n\u003e app.component.ts\n\u003e\n\u003e ```typescript\n\u003e   public isDialogVisible: boolean | undefined;\n\u003e\n\u003e   public openDialog(): void {\n\u003e     isDialogVisible = true;\n\u003e   }\n\u003e\n\u003e   public onClose(): void {\n\u003e     isDialogVisible = false;\n\u003e   }\n\u003e ```\n\n## Available Options:\n\nGeneral options:\n\n```typescript\ninterface DialogOptions {\n  disableClose?: boolean;\n  enableKeyboardNavigation?: boolean;\n  clickableNavigationDots?: boolean;\n  customStyle: {\n    width?: string;\n    boxShadow?: string;\n    backgroundColor?: string;\n    textColor?: string;\n    borderRadius?: string;\n    borderSize?: string;\n  };\n}\n```\n\nOptions of a single modal window:\n\n```typescript\ninterface WhatsNewItem {\n  title?: string;\n  text?: string;\n  html?: string;\n  image?: {\n    src: string;\n    height?: number;\n    bgColor?: string;\n    altText: string;\n  };\n  button?: {\n    text: string;\n    textColor: string;\n    bgColor: string;\n    position?: \"left\" | \"center\" | \"right\";\n  };\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4gray%2Fngx-whats-new","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4gray%2Fngx-whats-new","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4gray%2Fngx-whats-new/lists"}