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 post formdata or http.context.form data from angular 6 to asp.net mvc web api or api using Token based authentication with header

how to post formdata or http.context.form data from angular 6 to asp.net mvc web api or api using Token based authentication with header  ...

Popular Posts