Create a child parent component in angular. Create JSON files with following Data parent.json
"Id":10001. "name":"John"
"Id":10002, "name":"Sam
"Id":10003, "name":"Tom"
"Id":10004, "name":"Tom"
child.json
"Id":10001. "age 20
lo 10002 "age":"50"
"id":10003. "age": "25"
}} Fetch the parent.json file over an http "get" method, and show the name in drop down of parent
component
On selection of name in drop down send id to child component. Child component will fetch the child. json file over http call, compare the id and show the age of the person in child component If the id is not present in the child.json will send message to parent component which will be
displayed in parent component
"No data present Create a service, 2 components(parent and child)
Note: Please conot share nodemodule.
Following is the code sample, instead of "of" rxjs operator you can call actual json files
Parent component.
import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
parentData = [];
selected = "";
ngOnInit(): void {
this.getParentJson().subscribe(
(data) => {
this.parentData = data;
}
)
}
getParentJson() {
return of([
{
id: 100,
name: 'Abc',
},
{
id: 101,
name: 'Xyz',
},
{
id: 102,
name: 'Efg',
},
]);
}
childCallback(ev){
console.log(ev); // YOU WILL RECEIVE MESSAGE FROM CHILD COMPONENT
}
}
Parent component html
<select [(ngModel)]="selected">
<option *ngFor="let p of parentData" [value]="p.id">
{{p.name}}
</option>
</select>
<app-child-select [idVal]="selected" (callback)="childCallback($event)"></app-child-select>
Child Component
import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { of } from 'rxjs';
@Component({
selector: 'app-child-select',
templateUrl: './child-select.component.html',
styleUrls: ['./child-select.component.css']
})
export class ChildSelectComponent implements OnInit, OnChanges {
@Input() idVal:any = "";
@Output() callback = new EventEmitter();
data = [];
selected = "";
constructor() { }
ngOnInit() {
}
ngOnChanges(e){
console.log(e.idVal);
if(!e || !e.idVal || !e.idVal.currentValue){
this.data = [];
this.callback.emit({status: 'NO_ID_VALUE'});
return;
}
const v = e.idVal.currentValue;
this.loadData(v);
}
loadData(id){
this.getChildJson(id).subscribe(
(r) => {
this.data = r;
if(this.data.length === 0){
this.callback.emit({status: 'NO_DATA_FOUND'});
}
}
)
}
getChildJson(id) {
const arr = [
{
id: 100,
age: 10,
},
{
id: 100,
age: 20,
},
{
id: 101,
age: 25,
},
];
return of(arr.filter(e => e.id == id));
}
}
Child component html
<select [(ngModel)]="selected">
<option *ngFor="let p of data" [value]="p.id">
{{ p.age }}
</option>
</select>