I have a small utility that receives notifications from a web socket. Whenever the fillThemSomehow() method is called, it fetches and stores them in an array.
@Injectable()
export class WebsocketNotificationHandler {
notifications: Array<Notification>;
constructor() {
this.notifications = [];
}
fillThemSomehow(): void {}
}
A specific component utilizes this utility to obtain and exhibit the notifications:
@Component({ // selector, template, styles, pipes included })
export class NotificationsComponent {
notificationsFilter: string = '';
constructor(private _wsNotiHandler: WebsocketNotificationHandler) {}
getLastNotifications(): Array<Notification> {
return this._wsNotiHandler.notifications;
}
}
...as well as the HTML content of the component:
<input class="form-control" [(ngModel)]="notificationsFilter">
<div class="well notification" *ngFor="let notification of getLastNotifications()">
<span [innerHtml]="notification.getHtml()"></span>
<small class="pull-right">{{notification.time | dateTime}}</small>
</div>
Everything seems to be functioning smoothly at this point. Any new notifications added by the WebsocketNotificationHandler are promptly visible in the component's view. This is definitely a positive aspect.
However, when I aim to filter the displayed notifications with a custom pipe, alterations made in the service's array do not get reflected on the UI immediately (only upon typing in the input field because of the change in the notificationsFilter model). The ngFor template code now appears like this:
<div class="well notification" *ngFor="let notification of getLastNotifications() | search:notificationsFilter">
The SearchPipe has been assessed and functions as intended. My concern lies in the fact that this approach does not respond to changes in
WebsocketNotificationHandler.notificationsI'm currently working with TypeScript and Angular2 RC.1.