Parent and child component compartive

Question

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.

Answer 1

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>