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 Dynamic Upload multiple files with extra detail of model in asp.net core

 How To Dynamic Upload multiple files with extra detail of model in asp.net core  1). firstly create Model File  namespace MyModel {     pub...

Popular Posts