in Angular2, how to decouple UI module with logic

Question

I am new on Angular2, and I am required to build a module upon UI components such as @angular/material, so that my teammate can only care about the API exposes to them, rather than the UI framework I use.

For example, when they want to use an alert function, they can simply use import { Alert } from './Alert', and somehow use in their code, ignoring what UI framework is. Even though we change its UI framework(or theme), the business logic can remain the same.

I've googled a lot about extending the UI components, making a shared NgModule with components. And still not sure about how to make it. Especially working with @angular/material.

Your help is appreciated!

score 0 · Answer 1 · edited May 23 '17 at 12:32

Are you sure you cannot simply use components and services to achieve this? When you create an Angular2 component you can have your "logic" and the template code in two different files and therefore can always modify your template (UI/theme) as you wish without affecting the "logic". You can then create an alert service to manage communication between other components and your alert component. Here is an example...

For a component Alert you could have two separate files altert.html and alert.ts - all your UI (html) code goes inside alert.html and all logic shall be in alert.ts... Your code would then look something like below:

ALERT TEMPLATE: alert.html

  <div id="card-alert" *ngIf="alertMessage != "" && alertMessage != null">
      <p>ALERT: {{ alertMessage }}</p>
  </div>

ALERT LOGIC: alert.ts

    import {Component} from '@angular/core';
    import {CustomAlertService} from './alert.service';

    @Component({
      selector: 'alert',
      templateUrl: './alert.html'
    })
    export class CustomAlert {
      alertSubscription: any; // this will allow you to reference the subscription in order to be able to unsubscribe later 

      alertMessage: String;

      constructor(private alertService: CustomAlertService) { // you could also have an alert service hooked up here 
        this.alertSubscription = this.alertService.alertMessage$.subscribe(
            message => 
            this.alertMessage = message; // update current alert message to be displayed
            );
      }

    ngOnDestroy() {
    // you want to unsubscribe when component is destroyed to prevent potential memory leak 
   this.alertSubscription.unsubscribe();
   }
    }

Now for the alert service, see below. I will not explain much on this because it has been done so well by mark in this SO article here: Delegation: EventEmitter or Observable in Angular2.

ALERT LOGIC (services): alert.service.ts

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';

@Injectable()
export class CustomAlertService {
    alertMessage$: Obersvable<string>;
    private _observer: Observer;

    constructor() {
    this.alertMessage$ = new Observable(observer =>
      this._observer = observer).share(); 
}

    setAlertMessage(alert: String) {
      this._observer.next(alert)
    }

}

So your colleagues will simply include your CustomAlert component at some high level within the application. Inside the specific component where they want display an alert, then can simply inject the CustomAlertService and update the alert message by calling the setAlertMessage() on the CustomAlertSercice which will in turn notify your CustomAlert component which will render the alert...

in Angular2, how to decouple UI module with logic

1 Answers1