A Sample application displaying Parent and Child communication

Create a project in Angular using Angular CLI and create two component named filter and table

ng new DemoApplication
ng g c filter
ng g c table

Edit app.module.ts file as below : Adding forms module :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { FilterComponent } from './filter/filter.component';
import { TableComponent } from './table/table.component';

@NgModule({
  declarations: [
    AppComponent,
    FilterComponent,
    TableComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit app.component.html as below :

<div class="container">
  <app-filter
  (mammelAdded)="onMammelAdded($event)"
  (birdAdded)="onBirdAdded($event)"
  ></app-filter>
  <hr>
    <app-table *ngFor="let animal of animals"
    [animalElement]="animal"></app-table>
</div>

Edit app.component.ts as below :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  animals = [
    {
      animalName: 'Cheeta',
      category: 'Mammal'
    }
  ];
  onMammelAdded(animalData: {animalName: string, category: string}) {
    this.animals.push({
      animalName: animalData.animalName,
      category: 'Mammel'
    });
  }
  onBirdAdded(animalData: {animalName: string, category: string}) {
    this.animals.push({
      animalName: animalData.animalName,
      category: 'Bird'
    });
  }
}

Edit filter.component.html as below :

<div class="row">
  <div class="col-xs-12">
    <h3>Add new Animal !</h3>
    <label>Animal Name</label>
    <input type="text" class="form-control" [(ngModel)]="animalName" >
    <br>
    <button type="button" class="btn btn-success btn-sm mr-1" (click)="onBirdAdded()">Add Bird</button>
    <button type="button" class="btn btn-info btn-sm mr-1" (click)="onMammelAdded()">Add Mammal</button>
  </div>
</div>

Edit filter.component.ts file as below :

<div class="row">
  <div class="col-xs-12">
    <h3>Add new Animal !</h3>
    <label>Animal Name</label>
    <input type="text" class="form-control" [(ngModel)]="animalName" >
    <br>
    <button type="button" class="btn btn-success btn-sm mr-1" (click)="onBirdAdded()">Add Bird</button>
    <button type="button" class="btn btn-info btn-sm mr-1" (click)="onMammelAdded()">Add Mammal</button>
  </div>
</div>

Edit table.component.html as below :

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Animal Name</th>
      <th scope="col">Animal Category</th>
    </tr>
  </thead>
<tbody>
  <tr>
    <!-- <td>{{i+1}}</td> -->
    <td>{{animalElement.animalName}}</td>
    <td>{{animalElement.category}}</td>
  </tr>
</tbody>
</table>

Edit table.component.ts as below :

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  @Input()
  animalElement: {animalName: string, category: string};

  constructor() { }

  ngOnInit() {
  }
}

The output of the application looks like below :