Communication between components using data service in angular

 We can establish communication between components using data service. To understand this concept  lets take below example. Here we can add user with there status and display users in active/inactive list. we can also change the status of any existing user.

Lets start to build our example.

Step 1 : Create user.model.ts

export class User{

    status : string;

    user : string;

    constructor(user : string , status : string){

        this.user = user;

        this.status = status;

    }

}

Step 2 : Generate components

ng g c create-user

ng g c active-user

ng g c inactive-user

Step 3 : create-user.comopnent.ts

import { Component, OnInit} from '@angular/core';

import { AccountService } from '../services/account.service';

import { User } from '../shared/user.model';

@Component({

  selector: 'app-create-user',

  templateUrl: './create-user.component.html',

  styleUrls: ['./create-user.component.css']

})

export class CreateUserComponent implements OnInit {

  userName: string = '';

  status: string = '';

  constructor(private accountService: AccountService) { }

  ngOnInit(): void {

  }

  onAdd() {

    this.accountService.onAdd({ user: this.userName, status: this.status });

  }

  onRemove() {

    this.accountService.onRemove({ user: this.userName, status: this.status });

  }

}

Step 4 : create-user.component.html

<div class="container">

    <div class="row">

        <div class="col-xs-12">

            <label for="UserName">User Name</label>

            <input type="text" for="userName" [(ngModel)]="userName" class="form-control">

            <label for="Status">Status</label>

            <select class="form-control" for="status" [(ngModel)]="status">

                <option>Active</option>

                <option>Inactive</option>

            </select>

        </div>

        <div class="col-xs-5">

            <span class="span">

                <button type="button" class="btn btn-primary" 

                (click)="onAdd()">Add</button></span>

            <span><button type="button" class="btn btn-warning"

                    (click)="onRemove()">Remove</button></span>

        </div>

    </div>

</div>

Step 5 : Build active-user.component.ts

import { Component, Input, OnInit} from '@angular/core';

import { AccountService } from '../services/account.service';

@Component({

  selector: 'app-active-user',

  templateUrl: './active-user.component.html',

  styleUrls: ['./active-user.component.css']

})

export class ActiveUserComponent implements OnInit {

  @Input()

  activeUser!: string;

  constructor(private accountService : AccountService) { }

  ngOnInit(): void {

  }

  onSetInActiveUser(user: string) {

    this.accountService.onSetInActiveUser(user);

  } 

}

Step 6 : active-user.component.html

<li class="list-group-item">

    {{activeUser}} |

    <a href="#" (click)="onSetInActiveUser(activeUser)">Set to Inactive</a>

</li>

Step 7 : inactive-user.component.ts

import { Component, Input, OnInit } from '@angular/core';

import { AccountService } from '../services/account.service';

@Component({

  selector: 'app-inactive-user',

  templateUrl: './inactive-user.component.html',

  styleUrls: ['./inactive-user.component.css']

})

export class InactiveUserComponent implements OnInit {

  @Input() inActiveUser !: string;

  constructor(private accountService : AccountService ) { }

  ngOnInit(): void {

  }

  onSetActiveUser(user: string) {

    this.accountService.onSetActiveUser(user);

  }

}

Step 7 : inactive-user.component.html

<li class="list-group-item">

    {{inActiveUser}} |

    <a href="#" (click)="onSetActiveUser(inActiveUser)">Set to Active</a>

</li>

Step 8 : account.service.ts

import { User } from "../shared/user.model";

export class AccountService {

  activeUserList: string[] = ['Max', 'Chris'];

  inActiveUserList: string[] = ['Rode', 'Chin'];

  onSetInActiveUser(user: string) {

    this.activeUserList = this.activeUserList.filter(ele => ele !== user);

    this.inActiveUserList.push(user);

  }

  onSetActiveUser(user: string) {

    this.inActiveUserList = this.inActiveUserList.filter(ele => ele !== user);

    this.activeUserList.push(user);

  }

  onAdd(item: User) {

    if (item.status === 'Active') this.activeUserList.push(item.user);

    else this.inActiveUserList.push(item.user);

  }

  onRemove(item: User) {

    if (item.status === 'Active') this.activeUserList = this.activeUserList.filter(e => e !== item.user);

    else this.inActiveUserList = this.inActiveUserList.filter(e => e !== item.user);

  }

}

Step 9 : app-component.ts

import { Component, OnInit } from '@angular/core';

import { AccountService } from './services/account.service';

import { User } from './shared/user.model';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  title = 'ServiceAssignment';

  activeUserList : string[] = [];

  inActiveUserList : string[] = [];

  constructor(public accountService: AccountService) { }

  ngOnInit(){

     this.activeUserList = this.accountService.activeUserList;

     this.inActiveUserList = this.accountService.inActiveUserList;

  }

}

Step 10 : app-component.html

<app-create-user></app-create-user> 

<div class="container">

    <hr />

    <label for="ActiveUsers">Active Users</label>

    <ul class="list-group">

        <app-active-user 

        *ngFor="let acu of this.accountService.activeUserList" 

        [activeUser]="acu"></app-active-user>

    </ul>

    <label for="InactiveUsers">Inactive Users</label>

    <ul class="list-group">

        <app-inactive-user 

        *ngFor="let incu of this.accountService.inActiveUserList" 

        [inActiveUser]="incu"></app-inactive-user>           

    </ul>

</div>