title: Alerts and navbar module/component/service: how to decouple views?
body: <p>So I used to have this function in <code>app.component.ts</code>:</p>
  
  <pre><code>addNewAlert() {
      this.appService.navbarPadding += 81;
      this.alertsService.alerts.push({
        type: 'info',
        msg: 'INFO'
      });
  }
  </code></pre>
  
  <p>But it doesn't belong there. Does it belong on the service? - Probably not, the service is meant to be decoupled from the view. - Can I import <code>alerts.component.ts</code> into my other <code>Component</code>s?</p>
  
  <h3>navbar.component.ts</h3>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { AppService } from '../app.service';
  import { Subscription } from 'rxjs';
  
  @Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
  })
  export class NavbarComponent implements OnInit, OnDestroy {
    navbarPadding: number;
    subNavbarPadding: Subscription;
  
    constructor(public appService: AppService) { }
  
    ngOnInit() {
      this.subNavbarPadding = this.appService.navbarPaddingChange.subscribe(val =&gt;
        this.navbarPadding = val
      );
    }
  
    ngOnDestroy() {
      this.subNavbarPadding.unsubscribe();
    }
  }
  </code></pre>
  
  <h3>alerts.service.ts</h3>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { IAlert } from './alert';
  
  @Injectable()
  export class AlertsService {
    public alerts: Array&lt;IAlert&gt; = [];
  
    public add(alert: IAlert): void {
      this.alerts.push(alert);
    }
  
    public close(i: number): void {
      this.alerts.splice(i, 1);
    }
  }
  </code></pre>
  
  <h3>alerts.component.ts</h3>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import { IAlert } from './alert';
  import { AlertsService } from './alerts.service';
  import { AlertComponent } from 'ng2-bootstrap';
  
  @Component({
    selector: 'app-alerts',
    templateUrl: './alerts.component.html',
    providers: [AlertComponent],
    styleUrls: ['./alerts.component.css']
  })
  export class AlertsComponent implements OnInit {
    @Input() public type: string = 'warning';
    @Input() public dismissible: boolean;
    @Input() public dismissOnTimeout: number;
  
    public alerts: Array&lt;IAlert&gt;;
  
    constructor(private alertsService: AlertsService) {
    }
  
    ngOnInit() {
      this.alerts = this.alertsService.alerts;
    }
  
    addAlert(alert: IAlert) {
      this.alertsService.add(alert);  // Add to padding here?
    }
  
    closeAlert(i: number) {
      this.alertsService.close(i);   // Remove padding here?
    }
  }
  </code></pre>