Professional Documents
Culture Documents
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>