You are on page 1of 4

Parent to child:

App.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent
{
  
  data:string[]=[];
  submitData(v)
  {
    this.data.push(v);
   
  }

}
App.component.html:

<div class="row">
  <div class="col-sm-6">
    
    <h2 class="bg-primary text-white">Employee registration form</h2>
    <div class="jumbotron">
      <form #r="ngForm" (ngSubmit)="submitData(r.value)">
        <div class="form-group">
          <label for="e ">Enter Eno</label>
          <input type="number" name="Eno" id="e" ngModel>
        </div>

        <div class="form-group">
          <label for="n">Enter Ename</label>
          <input type="text" name="Ename" id="n" ngModel>
        </div>

        <div class="form-group">
          <label for="s">Enter salary</label>
          <input type="number" name="salary" id="s" ngModel>
        </div>

        <div class="text-center">
          <button class="btn btn-primary" type="submit">Register</button>
        </div>
      </form>
    </div>
    
  </div>
<div class="col-sm-6">
  <h2 class="bg-primary text-white">Employee Details</h2>
  <div class="jumbotron">
    <table class="table tableborderd">
      <thead>
        <tr>
          <th>Eno</th>
          <th>Ename</th>
          <th>salary</th>
          
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let v of data">
          <td>{{v.Eno}}</td>
          <td>{{v.Ename}}</td>
          <td>{{v.salary}}</td>
          

        </tr>
      </tbody>
    </table>

    <app-child [dataFromParent]=data></app-child>
    

  </div>
</div>
</div>
Child.component.ts:

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

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

  constructor() { }

  ngOnInit() {
  }
  @Input() dataFromParent:string;
}

Child.component.html:

 <div class="container">
    
        <div>
            {{dataFromParent}}
        </div>
    
    </div> 

You might also like