How can I maintain the state of the progress dialog throughout my Angular 2 application?

Use the architectural flow pattern to create frontend interfaces:

https://facebook.github.io/flux/ (just read about it, don't actually use the facebook API).

The pattern has proven to be very useful for maintaining application state across multiple components, especially for large scale applications.

The idea is simple - in a stream architecture, data is always sent in one direction:

This is true even if an action is activated in the UI:

In your Angular2 app, the dispatcher is your Observers implemented in your service (any component that injects the service can subscribe to it) and the store is a cached copy of the data to aid in firing events.

Here's an example ToDoService that implements the Flux architecture:

import { Injectable } from '@angular/core';
import {Http } from '@angular/http';
import { BehaviorSubject, Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';

export interface ToDo {
    id: number;
    name:string;
    isComplete: boolean;
    date: Date;
}

@Injectable()
export class ToDoService {
    public todoList$:Observable<ToDo[]>;
    private subject: BehaviorSubject<ToDo[]>;
    private store: {
        todos: ToDo[];
    }

    public constructor(private http:Http) { 
        this.subject = new BehaviorSubject<ToDo[]>([]);
        this.todoList$ = this.subject.asObservable();
        this.store = {
            todos: []
        };
    }

    public remove(todo:ToDo) {
        this.http.delete(`http://localhost/todoservice/api/todo/${todo.id}`)
            .subscribe(t=> {
                this.store.todos.forEach((t, i) => {
                    if (t.id === todo.id) { this.store.todos.splice(i, 1); }
                });
                let copy = this.copy(this.store).todos;
                this.subject.next(copy);

            });
    }

    public update(todo:ToDo): Promise<ToDo> {
        let q = this.http.put(`http://localhost/todoservice/api/todo/${todo.id}`, todo)
            .map(t=>t.json()).toPromise();
        q.then(x=> {

                this.store.todos.forEach((t,i) => {
                    if (t.id == x.id) { Object.assign(t, x); }
                    let copy = this.copy(this.store).todos;
                    this.subject.next(copy);
                });
            });
        return q;

    }

    public getAll() {
        this.http.get('http://localhost/todoservice/api/todo/all')
            .map(t=>t.json())
            .subscribe(t=> {
                this.store.todos = t;
                let copy = Object.assign({}, this.store).todos;
                this.subject.next(copy);

            });
    }

    private copy<T>(t:T):T {
        return Object.assign({}, t);
    }

}

      

        
        
        
      

    

Several things can be noticed about this service:

• The service keeps a cached copy of the data store { todos: ToDo[] }
  
  
• It provides Observable that components can subscribe (if interested)
• It uses a BehaviourSubject that is private to its implementation. A BehaviorSubject will give the initial value when signed. This is handy if you want to initialize an Observable with an empty array to start with.
• Whenever a method is called that mutates the data store (delete or update), the service forces the web service call to update its persistent store, and then updates the data store in the cache before releasing the updated list ToDo[]
  
  to all its subscribers
• A copy data is emitted from the service to prevent unexpected data from propagating in the opposite direction (this is important to maintain the flow pattern).

Any component that DI introduces to Service has the ability to subscribe to the todoList$

observable.

The next component we use asynchronous channel instead of directly subscribe to todoList$

:

Component.ts

ngOnInit() {
    this.todoList$ = this.todoService.todoList$;
}

      

        
        
        
      

    

Component.html

<li class="list-group-item" *ngFor="let item of todoList$ | async">
     {{ item.name }}
</li>

      

        
        
        
      

    

Whenever a method is called that changes its internal storage, the service updates all of its components, regardless of which component initiated the change.

The Flux pattern is a great template for managing complex user interfaces and reducing communication between components. Instead, the communication between the Service and the Component, and the interaction is basically that the component subscribes to the service.