Parent and Child Component in Angular

Parent and Child Component 

This scenario displays the two or more component information into the common component and accesses the more component value in the single component. 

Child Component

The child component named as list folder. its a child component so we can access or display the component value into parent component page. 

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

@Component({
  selector: 'app-emplist',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})

export class listComponent implements OnInit {
constructor() { }
}

Html Page

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>DOB</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
       <tr *ngFor="let s of list; let i=index ">
          <td>{{s.firstname}}</td>
          <td>{{s.lastname}}</td>
          <td>{{s.dob}}</td>
          <td><button type="button" class="btn btn-primary"                                                                   >Edit</button>
                <button type="button" class="btn btn-danger">Delete</button></td>
        </tr>
  </tbody>
</table>

Parent component

Invokes the child component and we can pass data from two side binding. @Input use to pass the data from parent to child component and event emitter use to emit the data from child to parent

        <div class="container">
                   <app-list></app-list>  </div>

Result