🚧 feat: injecting a service into another service

Author: Cibele Martins

src/app/account.service.ts

@@ -1,3 +1,11 @@
+// injectable
+import { Injectable } from "@angular/core";
+
+// other service
+import { LoggingService } from "./logging.service";
+
+@Injectable()
+
 export class AccountService {
 
  accounts = [
@@ -15,11 +23,17 @@ export class AccountService {
  }
  ];
 
+ constructor(private logging: LoggingService) {
+
+ }
+
  onAccountAdded(name: string, status: string) {
  this.accounts.push({name: name, status: status});
+ this.logging.changeStatus(status)
  }
 
  onStatusChanged(id: number, newStatus: string) {
  this.accounts[id].status = newStatus;
+ this.logging.changeStatus(newStatus)
  }
 } 

src/app/account/account.component.ts

@@ -6,7 +6,7 @@ import { AccountService } from '../account.service';
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.css'],
- providers: [LoggingService]
+ // providers: [LoggingService]
 })
 export class AccountComponent {
  @Input() account: {name: string, status: string};
@@ -18,7 +18,7 @@ export class AccountComponent {
 
  onSetTo(status: string) {
  this.accountService.onStatusChanged(this.id, status)
- this.logging.changeStatus(status)
+ // this.logging.changeStatus(status)
  }
 
 }

src/app/app.component.ts

@@ -5,7 +5,6 @@ import { AccountService } from './account.service';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
- providers: [AccountService]
 })
 export class AppComponent {
 

src/app/app.module.ts

@@ -7,6 +7,10 @@ import { AppComponent } from './app.component';
 import { AccountComponent } from './account/account.component';
 import { NewAccountComponent } from './new-account/new-account.component';
 
+// servic es
+import { AccountService } from './account.service';
+import { LoggingService } from './logging.service';
+
 @NgModule({
  declarations: [
  AppComponent,
@@ -17,7 +21,7 @@ import { NewAccountComponent } from './new-account/new-account.component';
  BrowserModule,
  FormsModule,
  ],
- providers: [],
+ providers: [AccountService, LoggingService],
  bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/new-account/new-account.component.ts

@@ -6,7 +6,7 @@ import { AccountService } from '../account.service';
  selector: 'app-new-account',
  templateUrl: './new-account.component.html',
  styleUrls: ['./new-account.component.css'],
- providers: [LoggingService]
+ // providers: [LoggingService]
 })
 export class NewAccountComponent {
 
@@ -22,6 +22,6 @@ export class NewAccountComponent {
 
  this.accountService.onAccountAdded(accountName, accountStatus)
 
- this.logging.changeStatus(accountStatus)
+ // this.logging.changeStatus(accountStatus)
  }
 }