Is it possible for you to utilize components and services to accomplish this task? With Angular2 components, you can separate your "logic" and template code into two distinct files, allowing you to freely modify your template (UI/theme) without impacting the functionality. You can also create an alert service to handle communication between different components and the alert component. Here is a sample implementation:
For an Alert component, you can have separate files named alert.html and alert.ts - the UI code goes in alert.html and logic resides in alert.ts. Your code structure would resemble the following:
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;
alertMessage: String;
constructor(private alertService: CustomAlertService) {
this.alertSubscription = this.alertService.alertMessage$.subscribe(
message =>
this.alertMessage = message;
);
}
ngOnDestroy() {
this.alertSubscription.unsubscribe();
}
}
Referencing the alert service, here's a brief overview. For more detailed explanation check out Stack Overflow article: 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$: Observable<string>;
private _observer: Observer;
constructor() {
this.alertMessage$ = new Observable(observer =>
this._observer = observer).share();
}
setAlertMessage(alert: String) {
this._observer.next(alert)
}
}
Your team members can simply include the CustomAlert component at a high level in the application. In specific components where they need to display an alert, they can inject the CustomAlertService and update the alert message using setAlertMessage(), which will trigger the CustomAlert component to render the alert...