in progress

@overflow/notification/container/badge/badge-container.component.html

@@ -0,0 +1,2 @@
+<of-notification-badge [notificationPage]="notificationPage$ | async" 
+ ></of-notification-badge>

@overflow/notification/container/badge/badge-container.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
+import { Store, select } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import * as ListStore from '../../store/notification';
+import { NotificationSelector } from '../../store';
+import { AuthSelector } from '../../../member/store';
+import { Member } from '@overflow/commons-typescript/model/member';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
+import { Notification } from '@overflow/commons-typescript/model/notification';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'of-notification-badge-container',
+    templateUrl: './badge-container.component.html',
+})
+export class NotificationBadgeContainerComponent implements OnInit {
+    notificationPage$: Observable<Page<Notification>>;
+
+    constructor(
+        private store: Store<ListStore.State>,
+        private route: ActivatedRoute
+    ) {
+        this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
+    }
+
+    ngOnInit() {
+        this.getNotifications();
+    }
+
+
+    getNotifications() {
+        this.store.select(AuthSelector.select('member')).subscribe(
+            (member: Member) => {
+                const pageParams: PageParams = {
+                    pageNo: 0,
+                    countPerPage: 10,
+                    sortCol: 'id',
+                    sortDirection: 'descending',
+                };
+                this.store.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    }
+
+    markAllasRead() {
+        this.store.select(AuthSelector.select('member')).subscribe(
+            (member: Member) => {
+                const pageParams: PageParams = {
+                    pageNo: 0,
+                    countPerPage: 10,
+                    sortCol: 'id',
+                    sortDirection: 'descending'
+                };
+                this.store.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    }
+
+    notificationSelected(notification: Notification) {
+        // this.router.navigate([notification.url]);
+        alert('redirect to ' + notification.url);
+    }
+}

@overflow/notification/container/index.ts

@@ -1,5 +1,7 @@
 import { NotificationListContainerComponent } from './list/list-container.component';
+import { NotificationBadgeContainerComponent } from './badge/badge-container.component';
 
 export const CONTAINER_COMPONENTS = [
+  NotificationBadgeContainerComponent,
   NotificationListContainerComponent,
 ];