Angular Services For Sharing Data Between Components

The service that we have created we will add within the providers:[] section as I have added DataService in the above example.

Now, if everything is completed above, you can run the application using two steps.

Step 1. Open the node js command window and move to the location where you have added the application.

Step 2. Execute the command ng serve

When the application runs successfully you should see the below output.

You can see above, the data shows what we have added with the first component and assigns the value within the constructor as,

public size: number;
public square: number;

constructor(private _dataService: DataService) {
    this.size = 16;
    this.square = Math.sqrt(this.size);

    this._dataService.setOption('size', this.size);
    this._dataService.setOption('square', this.square);
}

Service Method

private data = {};

setOption(option, value) {
  debugger;
  this.data[option] = value;
}

Now, I am using the setOption method within the constructor which is the service method. Here setOption method sets the above size and square value in the service data object.

I have added an anchor also for navigating from the first component to the second component so when we click on the above and go to the second component link it will navigate to the second component and in the second component I am using the getOption service method for getting the data value in the second component within the constructor as,

public data;

constructor(_dataService: DataService) {
  debugger;
  this.data = _dataService.getOption();
}

Service Method

getOption() {
  return this.data;
}

Now when we click on the anchor link and go to the second component it should show the below output,

So you can see the first component values are shared with the second component using the service.

The entire application code is.

• data.service.ts

  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class DataService {
  
    private data = {};
  
    setOption(option, value) {
      debugger;
      this.data[option] = value;
    }
  
    getOption() {
      return this.data;
    }
  }
  

• app.component.ts

  import { Component, OnInit } from '@angular/core';
  import { DataService } from "./data.service";
  
  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
  })
  export class AppComponent implements OnInit {
    public title: string = 'Sharing data using service';
  
    constructor() {
  
    }
  
    ngOnInit() {
  
    }
  }
  

• app.component.html

  <div style="text-align:center">
    <h1>
      {{title}}
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    
    <router-outlet></router-outlet>
  </div>
  

• app.first.component.ts

  import { Component, OnInit } from '@angular/core';
  import { DataService } from "./data.service";
  
  @Component({
    selector: 'app-root',
    templateUrl: 'app.first.component.html',
  })
  export class FirstComponent implements OnInit {
    public size: number;
    public square: number;
  
    constructor(private _dataService: DataService) {
      this.size = 16;
      this.square = Math.sqrt(this.size);
      this._dataService.setOption('size', this.size);
      this._dataService.setOption('square', this.square);
    }
  
    ngOnInit() {
  
    }
  }
  

• app.first.component.html

  <hr>
  <h1 style="color:#253535">First Component</h1>
  <div style="text-align:center">
      <div>
          <table>
              <tr>
                  <td>
                      Size is :
                  </td>
                  <td>
                      {{ size }}
                  </td>
              </tr>
              <tr>
                  <td>
                      Square is:
                  </td>
                  <td>
                      {{ square }}
                  </td>
              </tr>
              <tr>
                  <td>
                  </td>
                  <td>
                      <a [routerLink]="['second']">go to second component</a>
                  </td>
              </tr>
          </table>
      </div>
      <hr>
  

• app.second.component.ts

  import { Component, OnInit } from '@angular/core';
  import { DataService } from "./data.service";
  
  @Component({
    selector: 'grid',
    templateUrl: 'app.second.component.html',   
  })
  
  export class SecondComponent {
    public data;
  
    constructor(_dataService: DataService) {
      debugger;
      this.data = _dataService.getOption();
    }
  }
  

• app.second.component.html

  <hr>
  <h1 style="color:brown">Second Component</h1>
  
  <div style="text-align: left">
      <table>
          <tr>
              <td>
                  Size is:
              </td>
              <td>
                  {{ data.size }}
              </td>
          </tr>
          <tr>
              <td>
                  Square is:
              </td>
              <td>
                  {{ data.square }}
              </td>
          </tr>         
      </table>
  </div>
  <hr>
  

• app.routing.ts

  import { ModuleWithProviders } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { FirstComponent } from './app.first.component';
  import { SecondComponent } from './app.second.component';
  
  const appRoutes: Routes = [
      { path: '', component: FirstComponent },
      { path: 'second', component: SecondComponent },
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  

• app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { FirstComponent } from './app.first.component';
  import { SecondComponent } from './app.second.component';
  import { DataService } from './data.service';
  import { routing } from './app.routing';
  
  @NgModule({
    declarations: [
      AppComponent, FirstComponent, SecondComponent,
    ],
    imports: [
      BrowserModule, routing
    ],
    providers: [DataService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• style.css

  /* You can add global styles to this file, and also import other style files */
  
  table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
    font-size: 22px;
  }
  
  table tr:nth-child(odd) {
    background-color: #ADE9CB;
  }
  
  table tr:nth-child(even) {
    background-color: #E2AAAA;
  }
  

So, these are the above files that I am using with the application. You can also download the application by zip file which I have shared with this article.

Conclusion

As we know, sharing data within the component while components are separate is a very important concept in Angular and most of the time we need it as per our requirement. I hope you liked this -- please share it if you did.