Standalone demo app

.github/workflows/build-and-test.yml

@@ -35,3 +35,6 @@ jobs:
 
       - name: Build demo
         run: npm run build:demo
+
+      - name: Build standalone demo
+        run: npm run build:standalone-demo

README.md

@@ -4,12 +4,12 @@
 
 **A fully animated, highly customizable, and easy-to-use notification library for Angular applications**
 
-[![Build & Test](https://img.shields.io/github/actions/workflow/status/Gramli/angular-notifier/ci.yml?style=flat-square&label=Build)](https://github.com/Gramli/angular-notifier/actions/workflows/ci.yml)
+[![Build & Test](https://img.shields.io/github/actions/workflow/status/Gramli/angular-notifier/build-and-test.yml?style=flat-square&label=Build)](https://github.com/Gramli/angular-notifier/actions/workflows/build-and-test.yml)
 [![npm version](https://img.shields.io/npm/v/gramli-angular-notifier?style=flat-square&logo=npm)](https://www.npmjs.com/package/gramli-angular-notifier)
 [![Angular](https://img.shields.io/badge/Angular-21.x-dd0031?style=flat-square&logo=angular)](https://angular.io)
 [![License](https://img.shields.io/badge/License-MIT-yellow?style=flat-square)](LICENSE)
 
-[Features](#features) • [Installation](#installation) • [Quick Start](#quick-start) • [Themes](#themes) • [API](#api) • [Customization](#customization)
+[Features](#features) • [Installation](#installation) • [Quick Start](#quick-start) • [Examples](#live-examples) • [Themes](#themes) • [API](#api) • [Customization](#customization)
 
 ![Angular Notifier Animated Preview](https://raw.githubusercontent.com/Gramli/angular-notifier/develop/docs/angular-notifier-preview.gif)
 
@@ -27,6 +27,7 @@ Angular Notifier is a notification library designed to provide elegant, non-intr
 - **Type-safe** - Written in TypeScript with full type definitions
 - **Lightweight** - Zero dependencies beyond Angular itself
 - **Production-ready** - Battle-tested and actively maintained
+- **Module & Standalone support** - Works with both traditional NgModule and modern standalone components
 
 ## Features
 
@@ -64,29 +65,60 @@ npm install gramli-angular-notifier
 
 ### 1. Import the NotifierModule
 
+#### For Module-Based Applications
+
 Add the `NotifierModule` to your root module:
 
 ```typescript
 import { NotifierModule } from 'gramli-angular-notifier';
 
 @NgModule({
   imports: [
-    NotifierModule,
-    // Or with custom configuration
+    // With custom configuration
     NotifierModule.withConfig({
       position: {
         horizontal: { position: 'right', distance: 12 },
         vertical: { position: 'top', distance: 12, gap: 10 }
       },
       theme: 'material'
-    })
+    }),
+    // Or with default configuration
+    NotifierModule.withConfig()
   ]
 })
 export class AppModule { }
 ```
-> **Note**: This library currently requires NgModule-based applications and is not yet compatible with standalone components.
 
-### 2. Add the notifier container
+> **Important**: As of version 21.1.x, you must use `NotifierModule.withConfig()` even for default configuration. Simply importing `NotifierModule` without calling `withConfig()` will not provide the required services.
+
+#### For Standalone Applications
+
+Use the `provideNotifier()` function in your application configuration:
+
+```typescript
+// main.ts or app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideNotifier } from 'gramli-angular-notifier';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // With custom configuration
+    provideNotifier({
+      position: {
+        horizontal: { position: 'right', distance: 12 },
+        vertical: { position: 'top', distance: 12, gap: 10 }
+      },
+      theme: 'material'
+    }),
+    // Or with default configuration
+    // provideNotifier()
+  ]
+};
+```
+
+### 2. AppComponent - Add the notifier container
+
+#### For Module-Based Applications
 
 Add the `<notifier-container>` component to your app component template:
 
@@ -101,6 +133,26 @@ Add the `<notifier-container>` component to your app component template:
 export class AppComponent { }
 ```
 
+#### For Standalone Applications
+
+Add the `<notifier-container>` component to your app component template and import `NotifierModule` in components that display notifications:
+
+```typescript
+import { Component } from '@angular/core';
+import { NotifierModule } from 'gramli-angular-notifier';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [NotifierModule],  // Import for components only
+  template: `
+    <router-outlet></router-outlet>
+    <notifier-container></notifier-container>
+  `
+})
+export class AppComponent { }
+```
+
 ### 3. Import styles
 
 Import the styles in your global styles file (`styles.scss` or `styles.css`):
@@ -138,6 +190,16 @@ export class ExampleComponent {
 }
 ```
 
+## Live Examples
+
+Explore complete working examples demonstrating both module-based and standalone approaches:
+
+### 📦 [Module-Based Demo](https://github.com/Gramli/angular-notifier/tree/develop/projects/angular-notifier-demo)
+Full example application using traditional NgModule architecture with `NotifierModule.withConfig()`.
+
+### ⚡ [Standalone Demo](https://github.com/Gramli/angular-notifier/tree/develop/projects/angular-notifier-standalone-demo)
+Modern standalone component example using `provideNotifier()` in application configuration.
+
 ## Themes
 
 Angular Notifier comes with three professionally designed themes:
@@ -511,11 +573,33 @@ Check that animations are enabled in your configuration:
 NotifierModule.withConfig({ animations: { enabled: true } })
 ```
 
-## Credits
+### Breaking Change in v21.x: Module imports
+
+If you're upgrading from an earlier version and see errors like "No provider for NotifierService" or notifications not appearing:
+
+**Problem**: In v21.1.x, `NotifierModule` no longer provides services by default when imported alone.
+
+**Solution**: Update your imports to use `withConfig()`:
 
-This library is a maintained fork of [angular-notifier](https://github.com/dominique-mueller/angular-notifier) by Dominique Müller. Special thanks to the original author for creating this excellent library.
+```typescript
+// Before (v20.x and earlier)
+@NgModule({
+  imports: [NotifierModule]
+})
+
+// After (v21.1.x)
+@NgModule({
+  imports: [
+    NotifierModule.withConfig()  // Use withConfig() even for default settings
+  ]
+})
+```
+
+This change was made to support proper configuration in standalone applications and ensure consistent behavior across different application architectures.
+
+## Credits
 
-Originally created by [itsdevdom](https://github.com/itsdevdom). Currently maintained by [Gramli](https://github.com/Gramli).
+Originally created by [dominique-mueller](https://github.com/itsdevdom). Currently maintained by [Gramli](https://github.com/Gramli).
 
 ## License
 

angular.json

@@ -88,6 +88,74 @@
           }
         }
       }
+    },
+    "angular-notifier-standalone-demo": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/angular-notifier-standalone-demo",
+      "sourceRoot": "projects/angular-notifier-standalone-demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "projects/angular-notifier-standalone-demo/src/main.ts",
+            "tsConfig": "projects/angular-notifier-standalone-demo/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/angular-notifier-standalone-demo/public"
+              }
+            ],
+            "styles": [
+              "projects/angular-notifier-standalone-demo/src/styles.scss"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-notifier-standalone-demo:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-notifier-standalone-demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
     }
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gramli-angular-notifier",
   "description": "A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular application.",
-  "version": "21.0.0",
+  "version": "21.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,12 +26,17 @@
     "popup",
     "angular-component",
     "angular-library",
+    "angular-standalone",
+    "standalone",
+    "standalone-components",
+    "ngmodule",
     "typescript",
     "animated",
     "customizable"
   ],
   "scripts": {
     "build:demo": "ng build angular-notifier-demo --configuration production",
+    "build:standalone-demo": "ng build angular-notifier-standalone-demo --configuration production",
     "build:library": "rimraf dist && npm run build:library:angular && npm run build:library:sass && npm run build:library:css && npm run build:library:docs && npm run build:library:package",
     "build:library:angular": "ng build angular-notifier --configuration production",
     "build:library:css": "sass projects/angular-notifier/src:dist/angular-notifier --style=expanded",
@@ -41,6 +46,7 @@
     "lint:library": "eslint projects/angular-notifier/src/**/*.ts --max-warnings 0",
     "lint:library:fix": "eslint projects/angular-notifier/src/**/*.ts --max-warnings 0 --fix",
     "start": "ng serve angular-notifier-demo",
+    "start:standalone": "ng serve angular-notifier-standalone-demo",
     "test:library": "ng test angular-notifier",
     "test:library:watch": "ng test angular-notifier --watch",
     "test:library:upload-coverage": "codecov -f coverage/coverage-final.json"

projects/angular-notifier-standalone-demo/src/app/app.config.ts

@@ -0,0 +1,23 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+
+import { provideNotifier } from 'angular-notifier';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideNotifier({
+      position: {
+        horizontal: {
+          position: 'right',
+          distance: 12,
+        },
+        vertical: {
+          position: 'bottom',
+          distance: 12,
+          gap: 10,
+        },
+      },
+      theme: 'primeng',
+    }),
+  ],
+};

projects/angular-notifier-standalone-demo/src/app/app.html

@@ -0,0 +1,66 @@
+<nav class="navbar">
+  <div class="navbar-brand">angular-notifier</div>
+  <div class="navbar-icons">
+    <a href="https://github.com/Gramli/angular-notifier" target="_blank" rel="noopener noreferrer" class="icon-link" title="View on GitHub">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+        <path
+          d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
+        />
+      </svg>
+    </a>
+    <a
+      href="https://www.npmjs.com/package/gramli-angular-notifier"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="icon-link"
+      title="View on npm"
+    >
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+        <path
+          d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"
+        />
+      </svg>
+    </a>
+  </div>
+</nav>
+
+<div class="content">
+  <h2>Show notifications</h2>
+  <button class="button button--primary" (click)="showNotification('default', 'Good evening, you lovely person!')">Default me!</button>
+  <button class="button button--primary" (click)="showNotification('info', 'This library is built on top of Angular 2.')">Info me!</button>
+  <button class="button button--primary" (click)="showNotification('success', 'Notification successfully opened.')">Success me!</button>
+  <button class="button button--primary" (click)="showNotification('warning', 'Warning! But not an error! Just a warning!')">
+    Warning me!
+  </button>
+  <button class="button button--primary" (click)="showNotification('error', 'Whoops, something went wrong. Probably.')">Error me!</button>
+  <button class="button button--primary" (click)="showCustomNotificationTemplate('info', 'This is a custom notification template')">
+    Custom notification
+  </button>
+
+  <h2>Hide notifications</h2>
+  <button class="button button--secondary" (click)="hideAllNotifications()">Hide all notifications!</button>
+  <button class="button button--secondary" (click)="hideOldestNotification()">Hide oldest notification!</button>
+  <button class="button button--secondary" (click)="hideNewestNotification()">Hide newest notification!</button>
+
+  <h2>Show & hide a specific notification</h2>
+  <button class="button button--primary" (click)="showSpecificNotification('default', 'Hello, you lovely person!', 'ID_TEST')">
+    Show notification with ID named 'ID_TEST'
+  </button>
+  <button class="button button--secondary" (click)="hideSpecificNotification('ID_TEST')">Hide notification with ID named 'ID_TEST'</button>
+
+  <div class="tip">
+    <strong>Configuration Tip:</strong> You can play with the configuration, it's located in the
+    <code>angular-notifier-demo/src/app/app.module.ts</code> file.
+  </div>
+  <div class="tip">
+    <strong>Theme Tip:</strong> Default theme is material, available themes: <strong>material, bootstrap, primeng.</strong>
+  </div>
+</div>
+
+<notifier-container></notifier-container>
+
+<ng-template #customTemplate let-notification="notification">
+  <div>
+    <strong>{{ notification.type }}:</strong> {{ notification.message }}
+  </div>
+</ng-template>