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 { }

No comments:

Post a Comment

Thank You For Your Great Contribution

Featured Post

How To Design Certificate using Html css And Format for print landscape and portrait Mode page Design

How To Design Certificate using Html CSS And Format for print landscape and portrait Mode page Design OUTPUT:- HTML AND CSS...

Popular Posts