Angular2 Refresh Data After Action

Question

I have an Angular 2 application that I am supporting. I am very, very green with Angular 2 but trying to take as many tutorials as possible.

The UI page typescript module calls a REST service and loads a table at init and displays the data. I have an Angular component that is part of that UI page that calls another REST service that makes changes to the same data. The update is controlled via a button on the page. After that update occurs I need for the data being displayed to be refreshed. Since the ts component that "drives" the entire page is separate from the component that makes the update I'm not sure how to make this happen.

I have a file called message.component.ts. This file contains

import { OnInit, Component } from "@angular/core";
import { MessageService } from "./message.service";
import { ExchangeMessage } from "../shared/models/exchange-message";
import { HelperUtils } from "../shared/services/helper.service";

@Component({
    selector: "message-search",
    templateUrl: "./message.component.html"
})
export class MessageComponent implements OnInit {
    // Table config
    public messages: ExchangeMessage[];
    public selectedMessage: ExchangeMessage;
    public length: number = 0;
    public createdDateFrom: Date;
    public createdDateTo: Date;
    public constructor(private messageService: MessageService,
                       private preferenceService: PreferenceService) {
    }
    public ngOnInit(): any {
        this.searchForMessage();
    }
    public searchForMessage() {
        this.archivedSearch = this.searchForArchived;
        this.messageService.search(this.createdDateFrom, this.createdDateTo)
            .subscribe(messages => {
            this.messages = messages.data;
            this.length = messages.count;
        }, error => console.error(error));
    }
    public selectMessage(message: ExchangeMessage): void {
        this.selectedMessage = message;
    }
}

And the message.component.html file contains:

<div class="page-content">
    <div class="page-header pull-left">
        <h1>
            <i class="fa fa-briefcase" aria-hidden="true"></i>
            <strong>
                <span>Message Viewer</span>
            </strong>
        </h1>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h5>
                                <i class="fa fa-search" aria-hidden="true"></i>
                                Message Search
                            </h5>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main">
                                <form (ngSubmit)="searchForMessage()" #messageSearchForm="ngForm">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-4">
                                            <div class="form-group">
                                                <date-range [(dateModel)]="createdDateFrom" [label]="'Created Date/Time From'" [isToDate]="false" [isRequired]="searchForArchived"></date-range>
                                            </div>
                                            <div class="form-group">
                                                <date-range [(dateModel)]="createdDateTo" [label]="'Created Date/Time To'" [isToDate]="true" [isRequired]="searchForArchived"></date-range>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div class="pull-right">
                                                <button type="submit" class="btn btn-primary" [disabled]="!messageSearchForm.valid">
                                                    <i class="fa fa-search" aria-hidden="true"></i>
                                                    <span>Search</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h5><i class="fa fa-table"></i>Messages</h5>
                            <div class="widget-toolbar" >
                                <div class="widget-button" *ngIf="selectedMessage && selectedMessage.outboundText">
                                    <message-actions [message]="selectedMessage"></message-actions>
                                </div>
                            </div>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main no-padding">
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover table-condensed table-selectable no-margin"
                                           [mfData]="messages" #mf="mfDataTable">
                                        <thead>
                                            <tr>
                                                <th>Message ID</th>
                                                <th>Message Type</th>
                                                <th>Inbound Message Format</th>
                                                <th>I/O</th>
                                                <th>Processing Status</th>
                                                <th>To</th>
                                                <th>From</th>
                                                <th>Retry Count</th>
                                                <th>Created Date/Time</th>
                                                <th>Last Updated Date/Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr *ngFor="let message of mf.data" (click)="selectMessage(message)" [ngClass]="{'active' : message == selectedMessage}">
                                                <td>{{message.exchangeId}}</td>
                                                <td>{{message.messageType}}</td>
                                                <td>{{message.messageFormat}}</td>
                                                <td>{{message.incomingOutgoingIndicator}}</td>
                                                <td>{{message.processingStatus}}</td>
                                                <td>{{message.to}}</td>
                                                <td>{{message.from}}</td>
                                                <td>{{message.retryCount}} / {{maxRetryCount}}</td>
                                                <td>{{formatDate(message.createdDate)}}</td>
                                                <td>{{formatDate(message.updatedDate)}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And the second component message-actions.component.ts which is used in the html as contains:

import { Component, Input } from "@angular/core";
import { Action } from "../shared/manage-actions/action";
import { MessageService } from "./message.service";
import { ExchangeMessage } from "../shared/models/exchange-message";
import { NotificationService } from "../shared/services/notification.service";
import { ErrorDTO } from "../shared/models/error-dto";

@Component({
    selector: 'message-actions',
    template: '<manage-actions [actions]="messageActions"></manage-actions>'
})
export class MessageActionsComponent {
    private _message: ExchangeMessage;
    public messageActions: Array<Action> = [];
    constructor(private messageService: MessageService,
                private notificationService: NotificationService) {}
    @Input()
    set message(message: ExchangeMessage) {
        this._message = message;
        this.messageActions = [];
        if (this._message) {
            // Add Resubmit action
            this.messageActions.push(new Action('Resubmit', () => this.resubmitMessage());
        }
    }
    public resubmitMessage(): void {
        if (this._message) {
            this.messageService.resubmitMessage(this._message.exchangeId).subscribe(response => {
                    this.notificationService.success(response.message);
                },
                error => {
                    if (error.status === 400) {
                        let errorDto: ErrorDTO = error.json();
                        this.notificationService.error(errorDto.message);
                    } else {
                        console.error(error);
                    }
                });
        }
    }
    get message() {
        return this._message;
    }
}

When I select a row from the table the "Resubmit" button activates. If I click that button it runs the resubmit method in message-actions.component which executes the message service that updates that entry on the database. Once that happens I need to run the searchForMessage method in message.component.

I don't have a clue how to make that happen. Please help.

Answer 1

Please have a look in the official Angular 2 cookbook: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

You should create a service that is shared between message-actions.component and message.component. Basically, message-actions.component will fire an event that message.component is subscribing to(read Subscriptions and Observables). Whenever an event is detected by message.component, it can then run the necessary code to refresh your data.