Notification
A library for declarative use of
diff --git a/apps/demo/src/app/pages/home/home-page.component.ts b/apps/demo/src/app/pages/home/home-page.component.ts
index 6ddd41dd4..3e4eae3b1 100644
--- a/apps/demo/src/app/pages/home/home-page.component.ts
+++ b/apps/demo/src/app/pages/home/home-page.component.ts
@@ -1,12 +1,13 @@
import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {DemoPath} from '@demo/constants';
import {WEB_AUDIO_SUPPORT} from '@ng-web-apis/audio';
import {GEOLOCATION_SUPPORT} from '@ng-web-apis/geolocation';
import {INTERSECTION_OBSERVER_SUPPORT} from '@ng-web-apis/intersection-observer';
import {MIDI_SUPPORT} from '@ng-web-apis/midi';
+import {NOTIFICATION_SUPPORT} from '@ng-web-apis/notification';
import {PAYMENT_REQUEST_SUPPORT} from '@ng-web-apis/payment-request';
import {PERMISSIONS_SUPPORT} from '@ng-web-apis/permissions';
import {RESIZE_OBSERVER_SUPPORT} from '@ng-web-apis/resize-observer';
-import {DemoPath} from '@demo/constants';
@Component({
selector: `home-page`,
@@ -25,5 +26,6 @@ export class HomePageComponent {
@Inject(MIDI_SUPPORT) readonly midiSupport: boolean,
@Inject(WEB_AUDIO_SUPPORT) readonly audioSupport: boolean,
@Inject(PERMISSIONS_SUPPORT) readonly permissionsSupport: boolean,
+ @Inject(NOTIFICATION_SUPPORT) readonly notificationSupport: boolean,
) {}
}
diff --git a/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.html b/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.html
index 2d4e9754c..03121eb78 100644
--- a/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.html
+++ b/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.html
@@ -1 +1,17 @@
-
+
+
+
+
+
+
+
diff --git a/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.ts b/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.ts
index 9dbf71aa1..bd59dfb50 100644
--- a/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.ts
+++ b/apps/demo/src/app/pages/notification/examples/01-getting-permission/index.ts
@@ -1,5 +1,6 @@
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {NotificationService} from '@ng-web-apis/notification';
+import {PermissionsService} from '@ng-web-apis/permissions';
@Component({
selector: 'notification-page-example-1',
@@ -7,10 +8,16 @@ import {NotificationService} from '@ng-web-apis/notification';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationPageExample1 {
- constructor(private readonly notificationAPIService: NotificationService) {}
+ readonly notificationPermissionState$ =
+ this.permissionsService.state('notifications');
+
+ constructor(
+ private readonly notificationService: NotificationService,
+ private readonly permissionsService: PermissionsService,
+ ) {}
requestPermission(): void {
- this.notificationAPIService.requestPermission().subscribe({
+ this.notificationService.requestPermission().subscribe({
next: permission =>
console.info(
'Permission status:',
diff --git a/apps/demo/src/app/pages/notification/examples/02-create-notification/index.ts b/apps/demo/src/app/pages/notification/examples/02-create-notification/index.ts
index 783fc45a1..745246c2c 100644
--- a/apps/demo/src/app/pages/notification/examples/02-create-notification/index.ts
+++ b/apps/demo/src/app/pages/notification/examples/02-create-notification/index.ts
@@ -8,15 +8,15 @@ import {filter, switchMap} from 'rxjs/operators';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationPageExample2 {
- constructor(private readonly notificationAPIService: NotificationService) {}
+ constructor(private readonly notificationService: NotificationService) {}
sendNotification(): void {
- this.notificationAPIService
+ this.notificationService
.requestPermission()
.pipe(
filter(permission => permission === 'granted'),
switchMap(() =>
- this.notificationAPIService.open('Web APIs for Angular', {
+ this.notificationService.open('Web APIs for Angular', {
body: 'High quality lightweight wrappers for native Web APIs for idiomatic use with Angular',
icon: 'assets/images/web-api.svg',
}),
diff --git a/apps/demo/src/app/pages/notification/examples/03-close-notification/index.ts b/apps/demo/src/app/pages/notification/examples/03-close-notification/index.ts
index 48b549d68..285ebf0f7 100644
--- a/apps/demo/src/app/pages/notification/examples/03-close-notification/index.ts
+++ b/apps/demo/src/app/pages/notification/examples/03-close-notification/index.ts
@@ -9,15 +9,15 @@ import {filter, switchMap, takeUntil} from 'rxjs/operators';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationPageExample3 {
- constructor(private readonly notificationAPIService: NotificationService) {}
+ constructor(private readonly notificationService: NotificationService) {}
sendNotification(): void {
- this.notificationAPIService
+ this.notificationService
.requestPermission()
.pipe(
filter(permission => permission === 'granted'),
switchMap(() =>
- this.notificationAPIService.open('Close me, please!', {
+ this.notificationService.open('Close me, please!', {
requireInteraction: true,
}),
),
diff --git a/apps/demo/src/app/pages/notification/examples/04-listen-notification-events/index.ts b/apps/demo/src/app/pages/notification/examples/04-listen-notification-events/index.ts
index f85106439..60309f2bd 100644
--- a/apps/demo/src/app/pages/notification/examples/04-listen-notification-events/index.ts
+++ b/apps/demo/src/app/pages/notification/examples/04-listen-notification-events/index.ts
@@ -9,15 +9,15 @@ import {filter, switchMap} from 'rxjs/operators';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationPageExample4 {
- constructor(private readonly notificationAPIService: NotificationService) {}
+ constructor(private readonly notificationService: NotificationService) {}
sendNotification(): void {
- this.notificationAPIService
+ this.notificationService
.requestPermission()
.pipe(
filter(permission => permission === 'granted'),
switchMap(() =>
- this.notificationAPIService.open(`Click me, please`, {
+ this.notificationService.open(`Click me, please`, {
body: `Then open console and investigate property "target"`,
requireInteraction: true,
data: `Randomly generate number: ${Math.random().toFixed(2)}`,
diff --git a/apps/demo/src/app/pages/notification/notification-page.module.ts b/apps/demo/src/app/pages/notification/notification-page.module.ts
index a90c5b86f..2643d98aa 100644
--- a/apps/demo/src/app/pages/notification/notification-page.module.ts
+++ b/apps/demo/src/app/pages/notification/notification-page.module.ts
@@ -1,7 +1,9 @@
+import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
import {TuiButtonModule, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiBadgeModule} from '@taiga-ui/kit';
import {NotificationPageExample1} from './examples/01-getting-permission';
import {NotificationPageExample2} from './examples/02-create-notification';
import {NotificationPageExample3} from './examples/03-close-notification';
@@ -10,7 +12,9 @@ import {NotificationPageComponent} from './notification-page.component';
@NgModule({
imports: [
+ CommonModule,
TuiAddonDocModule,
+ TuiBadgeModule,
TuiButtonModule,
TuiNotificationModule,
RouterModule.forChild([{path: '', component: NotificationPageComponent}]),