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>
