fetch data to html Div - Listbox using angular directives

Question

Hello C# Corner,

Below is my Typescript class with arrays. I want to fetch availableFilter .Name  and operations arrays from Typescript class below and fetch it from Html page Listbox div:-

class CommonCode {

public operations: OperationsDictionary = new OperationsDictionary([]);

public availableFilters: FieldsDictionary = new FieldsDictionary([]);

constructor() {

//load the operations

this.operations.add("eq", new Operation(OperationType.eq, 'eq', 'equal to'));

this.operations.add("ge", new Operation(OperationType.ge, 'ge', 'greater than or equal'));

this.operations.add("gt", new Operation(OperationType.gt, 'gt', 'greater than'));

this.operations.add("le", new Operation(OperationType.le, 'eq', 'less than or equal'));

this.operations.add("lt", new Operation(OperationType.lt, 'eq', 'less than'));

this.operations.add("ne", new Operation(OperationType.ne, 'ne', 'not equal'));

//load the standard fields used in filtering

this.availableFilters.add("EnterpriseProjectType", new PWAField({

Id: "EnterpriseProjectType", Name: "Enterprise Project Type", FieldType: FieldType.Enumerated,

Description: "Enterprise Project Type", InternalName: "EnterpriseProjectType"}, EntityType.Project, false));

this.availableFilters.add("ProjectCost", new PWAField({

Id: "ProjectCost", Name: "Project Cost", FieldType: FieldType.Cost,

Description: "Project Cost", InternalName: "ProjectCost"}, EntityType.Project, false));

this.availableFilters.add("ProjectWork", new PWAField({

Id: "ProjectWork", Name: "Project Work", FieldType: FieldType.Numeric,

Description: "Project Work", InternalName: "ProjectWork"}, EntityType.Project, false));

this.availableFilters.add("Owner", new PWAField({

Id: "Owner", Name: "Project Owner", FieldType: FieldType.Enumerated,

Description: "Project Owner", InternalName: "ProjectOwnerName"}, EntityType.Project, false));

this.availableFilters.add("ProjectStartDate", new PWAField({

Id: "ProjectStartDate", Name: "Project Start Date", FieldType: FieldType.Date,

Description: "Project Start Date", InternalName: "ProjectStartDate"}, EntityType.Project, false));

this.availableFilters.add("ProjectFinishDate", new PWAField({

Id: "ProjectFinishDate", Name: "Project Finish Date", FieldType: FieldType.Date,

Description: "Project Finish Date", InternalName: "ProjectFinishDate"}, EntityType.Project, false));

this.availableFilters.add("ProjectRemainingWork", new PWAField({

Id: "ProjectRemainingWork", Name: "Remaining Work", FieldType: FieldType.Numeric,

Description: "Remaining Work", InternalName: "ProjectRemainingWork"

}, EntityType.Project, false));

this.availableFilters.add("ProjectRemainingWork", new PWAField({

Id: "ProjectRemainingWork", Name: "Remaining Work", FieldType: FieldType.Numeric,

Description: "Remaining Work", InternalName: "ProjectRemainingWork"

}, EntityType.Project, false));

this.availableFilters.add("WorkflowPhase", new PWAField({

Id: "WorkflowPhase", Name: "Workflow Phase", FieldType: FieldType.Enumerated,

Description: "Workflow Phase", InternalName: "WorkflowPhase"

}, EntityType.Project, false));

this.availableFilters.add("Stage", new PWAField({

Id: "Stage", Name: "Stage", FieldType: FieldType.Enumerated,

Description: "Stage", InternalName: "Stage"

}, EntityType.Project, false));

}

}

<div class="Container">

 fetch the availableFilters.Name and operations arrays to html page using angularJS directives inside here

</div>