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%;

}

}