Wednesday, May 29, 2024

How to share data between two Components in Angular 7?

Hello to all, welcome to Today, I am going to tell you, How to share data between two Components in Angular 7?

If you are new in Angular 7, then you can check my old post related to Angular 7.

I am trying this first time and this is very interesting sharing data between Angular 7 components.

I have mainly used two things in this:

  1. Services:
    • I have added custom json data in it and call this Service to Angular Components.
  2. LocalStorage:
    • This is my trick, I have saved component data in it and share one component data into other component with help of localstorage.

Here I am sharing the code and you need to add this into your Angular 7 App:

1. Very first, you need to run common below commands to add Angular 7 project on your machine:

$ npm install -g @angular/cli 

$ ng new angularsharedata //Install Angular Project

$ cd angularsharedata // Go to project folder

$ ng generate component component-second //create new component

$ ng serve //Run Project

http://localhost:4200/ //Run On local server

2. After playing with above commands,  you can see folder structure into your src/app folder like below image:


3. Now, you need to create app.service.ts file into src/app folder and below code into it:

import { Injectable } from '@angular/core'; 
export class appService {
constructor() { }
      public posts = [
      {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24},
      {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18},
      {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31}

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ComponentSecondComponent } from './component-second/component-second.component';
const appRoutes: Routes = [
    { path: 'componentsecondcomponent', component: ComponentSecondComponent }
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule {}

5. Now add below code into app.component.ts file:

import { Component,OnInit  } from '@angular/core';
import { appService } from './app.service';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [appService] 

export class AppComponent {
  title = 'angulardata';
  public data:any;
    constructor(private appservice: appService) {} 
    ngOnInit() {
     this.appservice.posts.push({id: 4, firstname: 'Linda', lastname: 'Maria', age: 30}); = this.appservice.posts;

6. Now add below code into app.component.html file:

  Welcome to {{ title }}!

7. Now add below code into src\app\component-second\component-second.component.ts file:

import { Component, OnInit } from '@angular/core';
  selector: 'app-component-second',
  templateUrl: './component-second.component.html',
  styleUrls: ['./component-second.component.css']
export class ComponentSecondComponent implements OnInit {
  constructor() {} 

  ngOnInit() { = JSON.parse(localStorage.getItem('GlobalData'));

8. Now add below code into src\app\component-second\component-second.component.html file:

<h1>Customer List</h1>
  <li *ngFor="let customer of data">
    {{ customer.firstname}}

Now run ng serve command and run http://localhost:8000/componentsecondcomponent into your browser and you will see the output like below image:

How to share data between two Components in Angular 7

This is done, if you have any query or any have any question then you can comment below.


Thank you

Notes: I learnt from this post is that, we can share or we can move all data between the components with the help of LocalStorage.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.