How to Get And Set Property value of Parent Component Into child Component in angularJs 4

How to Get And Set Property value of Parent Component

 Into child Component in angularJs 4

1).Child Component:-

i). Typescript file (add-employee.component.ts)

import { Component, OnInit,Output,

Input, EventEmitter } from

'@angular/core';

import {user} from

'../dataentity/Employee';

import {EmployeeOperation}

from '../dataentity/EmployeeOperation';

@Component({

selector: 'app-add-employee',

templateUrl:

'./add-employee.component.html',

styleUrls:

['./add-employee.component.css']

})

export class

AddEmployeeComponent

implements OnInit {

constructor() { }

User:user={userID:EmployeeOperation.getemployee.length+1,

UserImage:'../assets/batman_90804.png',userName:'',userDetail:''};

ngOnInit() {

return this.User;

}

@Input() showadduser:boolean;

@Output() changeval = new EventEmitter<boolean>();

adduser(User:user)

{

console.log(this.User);

EmployeeOperation.addEmployee(this.User);

this.User={userID:EmployeeOperation.getemployee.length,

UserImage:'../assets/batman_90804.png',userName:'',userDetail:''};

this.changeval.emit(!this.showadduser)

}

}

ii).Template File (add-employee.component.html)

<div class="card">

<div class="card-header">

Add Employee

</div>

<div class="card-body">

<form #myuser="ngForm" (ngSubmit)="adduser(myuser)">

<input type="hidden" [(ngModel)]="User.userID" id="userID"

name="userID"/>

<input type="hidden" [(ngModel)]="User.UserImage"

id="UserImage" name="UserImage"/>

<div class="form-group">

<label for="inputEmail">User Name</label>

<input type="text" class="form-control"

id="userName" placeholder="userName" name="userName"

[(ngModel)]="User.userName" required />

</div>

<div class="form-group">

<label for="inputPassword">User Detail</label>

<input type="text" class="form-control" id="userDetail"

placeholder="userDetail" name="userDetail" [(ngModel)]="User.userDetail"

required/>

</div>

<button type="submit" class="btn btn-primary" name="submit" >

Login</button>

</form>

</div>

<div class="card-footer">

</div>

</div>

iii).StyleFile (add-employee.component.css) 

This File Does not any content So its Empty

2).Parents Component:-

i). Typescript file (add-employee.component.ts)

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

import {EmployeeOperation} from '../dataentity/EmployeeOperation';

import {user} from '../dataentity/Employee';

@Component({

selector: 'app-cardlist',

templateUrl: './cardlist.component.html',

styleUrls: ['./cardlist.component.css']

})

export class CardlistComponent implements OnInit {

showadduser:boolean=false;

users:user[];

constructor() {

}

ngOnInit() {

return this.users=EmployeeOperation.getemployee;

}

Open(value:boolean){

this.showadduser=!value;

}

Move(event){

}

onNotifyclick(show:boolean){

this.showadduser=show;

}

}

ii).Template File (add-employee.component.html)

<div class="card">

<div class="row">

<div class="col-md-12">

<a class="btn btn-outline-success pull-right"

(click)='Open(showadduser)'>add employee</a>

</div>

</div>

<div id="myDiv" *ngIf="showadduser"

(mouseup)='Move($event)'>

<div class="container">

<div class="row">

<div class="col-md-12 ">

<span class="btn btn-success pull-right" (click)="Open(showadduser)"

style=" z-index: 2;position: relative;left: -33px;">x</span>

<app-add-employee [showadduser]="showadduser" (changeval)="onNotifyclick($event)">

</app-add-employee>

</div>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col-md-4" *ngFor="let user of users">

<app-carditem [userid]="user.userID"></app-carditem>

</div>

</div>

iii).StyleFile (add-employee.component.css) 

#myDiv

{

position: fixed;

top:16%;left: 32%;

z-index: 1000;

min-width: 38%;

min-height: 500px;

align-content: center;

}

@media only screen and (max-width:400px)

{

#myDiv

{

left: 6%;

width: 88%;

}

}

2).Root File (App.module.ts):-

import { HttpModule } from '@angular/http';

import { HttpClientModule } from '@angular/common/http';

import { BrowserModule } from '@angular/platform-browser';

import {Routes,RouterModule} from '@angular/router';

import {FormsModule} from '@angular/forms';

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

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

import { MenuComponent } from './menu/menu.component';

import { JambotronComponent } from './jambotron/jambotron.component';

import { SidebarComponent } from './sidebar/sidebar.component';

import { MaincotaintComponent } from './maincotaint/maincotaint.component';

import { MainsliderComponent } from './mainslider/mainslider.component';

import { CarditemComponent } from './carditem/carditem.component';

import { CardlistComponent } from './cardlist/cardlist.component';

import { FooterComponent } from './footer/footer.component';

import { CardDetailsComponent } from './card-details/card-details.component';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

import { ContactComponent } from './contact/contact.component';

import { FeedbackComponent } from './feedback/feedback.component';

import { DashbordComponent } from './dashbord/dashbord.component';

import { DashborditemComponent } from './dashborditem/dashborditem.component';

import { DashborditemlistComponent } from './dashborditemlist/dashborditemlist.component';

import { AddEmployeeComponent } from './add-employee/add-employee.component';

const ROUTES:Routes=[

{ path: '', redirectTo: '/home', pathMatch: 'full' },

{

path:'home',component:HomeComponent

},

{

path:'about',component:AboutComponent

},

{

path:'contact',component:ContactComponent

},

{

path:'feedback',component:FeedbackComponent

}

,

{

path:'dashboard',component:DashbordComponent,

children:

[

{ path: '', redirectTo: 'dashborditemlist', pathMatch: 'full' } ,

{path:'cardlist',component:CardlistComponent},

{path:'carddetails',component:CardDetailsComponent},

{path:'dashborditemlist',component:DashborditemlistComponent},

]

}

]

@NgModule({

declarations: [

AppComponent,

MenuComponent,

JambotronComponent,

SidebarComponent,

MaincotaintComponent,

MainsliderComponent,

CarditemComponent,

CardlistComponent,

FooterComponent,

CardDetailsComponent,

HomeComponent,

AboutComponent,

ContactComponent,

FeedbackComponent,

DashbordComponent,

DashborditemComponent,

DashborditemlistComponent,

AddEmployeeComponent,

],

imports: [

BrowserModule,

NgbModule.forRoot(),

HttpModule, HttpClientModule,

RouterModule.forRoot(ROUTES) ,

FormsModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }