How to Create Typescript Property Class and also Create Operation Class and import and user Property Class into Operation class

How to Create Typescript Property Class and also Create Operation Class and import and user Property Class into Operation class


1).Create Property Class :- (Employee.ts)

  Here I am Creating a class Name User and Define Property in Type script Stype With There type 

export class user
{
userID:number;
userName:string;
userDetail:string;
UserImage:string;

}


2).Create Operation Class:-(EmployeeOperation.ts)

Now I am Creating Operation Class where I am  Importing typescript class of user By Using Import Keyword

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

export class EmployeeOperation
{
//Default List You may be used leave it empty if you dont want to show at first time
public static getemployee:user[]=
[
{userID:1,userName:"raj",userDetail:"raj hello",
UserImage:"../assets/batman_90804.png"},
{userID:2,userName:"ronak vaishnav",userDetail:"ronak hello",
UserImage:"../assets/batman_90804.png"},
{userID:3,userName:"rahul",userDetail:"rahul hello",
UserImage:"../assets/batman_90804.png"},
{userID:4,userName:"rakesh",userDetail:"rakesh hello",
UserImage:"../assets/batman_90804.png"},
{userID:5,userName:"rohit",userDetail:"rohit hello",
UserImage:"../assets/batman_90804.png"},
{userID:6,userName:"amit shah",userDetail:"amit hello",
UserImage:"../assets/batman_90804.png"},
{userID:7,userName:"narendra Mdi",userDetail:"narendra hello",
UserImage:"../assets/batman_90804.png"},
{userID:8,userName:"Sonia gadhi",userDetail:"Sonia hello",
UserImage:"../assets/batman_90804.png"},
{userID:9,userName:"Rahul Gandhi",userDetail:"rakesh hello",
UserImage:"../assets/batman_90804.png"}
];

public static getemployeeByID(userID)
{
return this.getemployee.find(t=>t.userID==userID);
}
//add item into list
public static addEmployee(User:user)
{
let s=this.getemployeeByID(User.userID);
if(s==undefined && User.userName!="")
{
this.getemployee.push(User);
}

}

//remove Item Into list
public static removeEmployee(userID:number)
{
let s=this.getemployeeByID(userID);
if(s!=undefined)
{
let index = this.getemployee.indexOf(s);
if (index > -1)
{
this.getemployee.splice(index, 1);
}
}
}

//Update Item Into list
public static UpdateEmployee(User:user)
{
let s=this.getemployeeByID(User.userID);
if(s!=undefined)
{
let index = this.getemployee.indexOf(s);
if (index > -1)
{
this.getemployee.splice(index, 1);
this.getemployee.push(User);
}

}
}


}


3).Finaly Used In angularJs:-(Itemlist.ts)

Now You Need To Import Both Operation class And Property class into your Component Class and then Use Id as follow . It is a component class of item List its is
 (itemlist.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;
}
}

4).AngularJs Template file Used In Itemlist.ts File In angularJs:-
(CardList.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>


5).AngularJs Style file:-(CardList.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%;
}
}

No comments:

Post a Comment

Thank You For Your Great Contribution

Featured Post

Sql dynamic query With Join And search using like query with multiple column

Sql dynamic query With Join And search using like query with multiple column declare @keyword varchar(100) DECLARE @sqlCommand va...

Popular Posts