{"id":21775586,"url":"https://github.com/HeyItsBATMAN/ngx-concern","last_synced_at":"2025-07-19T13:30:43.739Z","repository":{"id":226838587,"uuid":"769771718","full_name":"HeyItsBATMAN/ngx-concern","owner":"HeyItsBATMAN","description":"A Angular library for creating simple, unstyled dialogs/modals and action-sheets/bottom-sheets.","archived":false,"fork":false,"pushed_at":"2024-03-10T02:33:10.000Z","size":405,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-03-10T03:28:43.405Z","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/HeyItsBATMAN.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-10T02:24:41.000Z","updated_at":"2024-03-10T03:28:54.353Z","dependencies_parsed_at":"2024-03-10T03:28:49.124Z","dependency_job_id":null,"html_url":"https://github.com/HeyItsBATMAN/ngx-concern","commit_stats":null,"previous_names":["heyitsbatman/ngx-concern"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HeyItsBATMAN/ngx-concern","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeyItsBATMAN%2Fngx-concern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeyItsBATMAN%2Fngx-concern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeyItsBATMAN%2Fngx-concern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeyItsBATMAN%2Fngx-concern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HeyItsBATMAN","download_url":"https://codeload.github.com/HeyItsBATMAN/ngx-concern/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeyItsBATMAN%2Fngx-concern/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265942502,"owners_count":23853294,"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-26T20:01:39.896Z","updated_at":"2025-07-19T13:30:43.379Z","avatar_url":"https://github.com/HeyItsBATMAN.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# NgxConcern\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/HeyItsBATMAN/ngx-concern/master/logo.png\" width=\"800\"\u003e\n\u003c/p\u003e\n\nA Angular library for creating simple, unstyled dialogs/modals and action-sheets/bottom-sheets.\n\n## Requirements\n\nThis was only tested on Angular 17.2.0, so I do not know if it works on older versions.\n\n## Installation\n\nInstall as usual using your package manager, e.g. when using `npm`:\n\n`npm i ngx-concern`\n\nAfterwards import in your `ApplicationConfig`:\n\n```ts\nimport type { ApplicationConfig } from '@angular/core';\nimport { withConcernTheme } from 'ngx-concern'; // Import the provider function\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    withConcernTheme('default'), // Add to providers of the ApplicationConfig\n  ],\n};\n```\n\n## Usage\n\nThe library currently provides three types of overlays:\n\n- `ActionSheetComponent`\n- `DialogComponent`\n- `FullscreenDialogComponent`\n\nImport any of them inside of the component you want to use it:\n\n```ts\nimport { Component } from '@angular/core';\n// Import the overlay components you want\nimport { ActionSheetComponent, DialogComponent, FullscreenDialogComponent } from 'ngx-concern';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  // Add them to the imports of your component\n  imports: [ActionSheetComponent, DialogComponent, FullscreenDialogComponent],\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.scss',\n})\nexport class AppComponent {}\n```\n\nAdd them to your HTML template and add content:\n\n```html\n\u003c!-- Open the overlays using their open() method --\u003e\n\u003cbutton (click)=\"actionSheet.open()\"\u003eOpen Action Sheet\u003c/button\u003e\n\u003cbutton (click)=\"dialog.open()\"\u003eOpen Dialog\u003c/button\u003e\n\u003cbutton (click)=\"fullscreenDialog.open()\"\u003eOpen Fullscreen Dialog\u003c/button\u003e\n\n\u003c!-- Add content to the overlays --\u003e\n\u003cconcern-action-sheet #actionSheet\u003e\n  \u003ch1 header\u003eBla bla\u003c/h1\u003e\n  \u003cp\u003e\n    Fugiat ad ut proident Lorem elit elit dolore quis reprehenderit veniam tempor consequat.\n    Excepteur do consectetur sunt duis esse anim mollit consectetur cillum veniam minim sit minim\n    ad. Cupidatat enim duis velit do sit fugiat anim nisi in eiusmod minim.\n  \u003c/p\u003e\n\u003c/concern-action-sheet\u003e\n\u003cconcern-dialog #dialog\u003e\n  \u003ch1 header\u003eBla bla\u003c/h1\u003e\n  \u003cp\u003e\n    Fugiat ad ut proident Lorem elit elit dolore quis reprehenderit veniam tempor consequat.\n    Excepteur do consectetur sunt duis esse anim mollit consectetur cillum veniam minim sit minim\n    ad. Cupidatat enim duis velit do sit fugiat anim nisi in eiusmod minim.\n  \u003c/p\u003e\n\n  \u003cbutton footer (click)=\"dialog.close()\"\u003eClose\u003c/button\u003e\n\u003c/concern-dialog\u003e\n\u003cconcern-fullscreen-dialog #fullscreenDialog\u003e\n  \u003ch1 header\u003eBla bla\u003c/h1\u003e\n  \u003cp\u003e\n    Fugiat ad ut proident Lorem elit elit dolore quis reprehenderit veniam tempor consequat.\n    Excepteur do consectetur sunt duis esse anim mollit consectetur cillum veniam minim sit minim\n    ad. Cupidatat enim duis velit do sit fugiat anim nisi in eiusmod minim.\n  \u003c/p\u003e\n\n  \u003cbutton footer (click)=\"fullscreenDialog.close()\"\u003eClose\u003c/button\u003e\n\u003c/concern-fullscreen-dialog\u003e\n```\n\nEvery overlay component has an `open()` and a `close()` method for opening and closing.\nYou can also close overlays by clicking on the backdrop.\n\n## Styling\n\nThere are two ways to style the overlays:\n\n- providing global CSS attributes to the `withConcernTheme` function\n- providing CSS per component\n\n### Global styling / withConcernTheme\n\nThe `withConcernTheme` can take any number of `TypeProvider`s with `InjectionToken`s to override the default theme. The value of each provider is just a `Partial\u003cCSSStyleDeclaration\u003e`.\n\n```ts\nimport type { ApplicationConfig } from '@angular/core';\nimport { CONCERN_BACKDROP_STYLE, CONCERN_DIALOG_STYLE, withConcernTheme } from 'ngx-concern';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    withConcernTheme(\n      'default',\n      {\n        provide: CONCERN_BACKDROP_STYLE,\n        useValue: {\n          backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        } satisfies Partial\u003cCSSStyleDeclaration\u003e,\n      },\n      {\n        provide: CONCERN_DIALOG_STYLE,\n        useValue: {\n          maxWidth: '80vw',\n          maxHeight: '80vh',\n          minWidth: '50vw',\n          minHeight: '50vh',\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'stretch',\n          backgroundColor: 'rgba(255, 255, 255, 0.8)',\n          backdropFilter: 'blur(4px)',\n          boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',\n        } satisfies Partial\u003cCSSStyleDeclaration\u003e,\n      },\n    ),\n  ],\n};\n```\n\n### Local styling / CSS per component\n\nIf you need to use the components in a way where a uniform style cannot be used, you can override the styles per component by providing `CSSStyleDeclaration`s to the components.\n\n```html\n\u003cconcern-action-sheet\n  #actionSheet\n  [backdropStyle]=\"{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }\"\n  [contentStyle]=\"{ backdropFilter: 'blur(4px)' }\"\n\u003e\n  \u003ch1 header\u003eBla bla\u003c/h1\u003e\n  \u003cp\u003e\n    Fugiat ad ut proident Lorem elit elit dolore quis reprehenderit veniam tempor consequat.\n    Excepteur do consectetur sunt duis esse anim mollit consectetur cillum veniam minim sit minim\n    ad. Cupidatat enim duis velit do sit fugiat anim nisi in eiusmod minim.\n  \u003c/p\u003e\n\u003c/concern-action-sheet\u003e\n```\n\n### Motivation\n\nI wanted a simpler alternative to `@angular/material` and `@angular/cdk` for my projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHeyItsBATMAN%2Fngx-concern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHeyItsBATMAN%2Fngx-concern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHeyItsBATMAN%2Fngx-concern/lists"}