"nativescript": {
 "id": "<id>",
 "tns-ios": {
 "version": "6.5.4"
 },
 "tns-android": {
 "version": "6.5.3"
 }
 },
 "description": "NativeScript Application",
 "license": "SEE LICENSE IN <your-license-filename>",
 "repository": "<fill-your-repository-here>",
 "dependencies": {
 "@angular/animations": "8.0.0",
 "@angular/common": "8.0.0",
 "@angular/compiler": "8.0.0",
 "@angular/core": "8.0.0",
 "@angular/forms": "8.0.0",
 "@angular/http": "8.0.0-beta.10",
 "@angular/platform-browser": "8.0.0",
 "@angular/platform-browser-dynamic": "8.0.0",
 "@angular/router": "8.0.0",
 "@microsoft/applicationinsights-channel-js": "file:microsoft-applicationinsights-channel-js-2.5.8.tgz",
 "@microsoft/applicationinsights-web": "2.5.9",
 "@progress/kendo-date-math": "^1.5.1",
 "@types/file-saver": "^2.0.1",
 "compare-versions": "^3.6.0",
 "email-validator": "^2.0.4",
 "jwt-decode": "^3.1.2",
 "moment": "^2.27.0",
 "nativescript-angular": "^8.21.0",
 "nativescript-appversion": "^1.4.4",
 "nativescript-background-http": "^4.2.0",
 "nativescript-email": "^1.6.0",
 "nativescript-exit": "^1.0.1",
 "nativescript-fingerprint-auth": "^7.0.2",
 "nativescript-http-formdata": "^3.0.1",
 "nativescript-imagepicker": "^7.1.0",
 "nativescript-iqkeyboardmanager": "^1.5.1",
 "nativescript-modal-datetimepicker": "^1.2.2",
 "nativescript-multi-select": "^1.0.6",
 "nativescript-numeric-keyboard": "^4.3.1",
 "nativescript-pdf-view": "^2.2.0",
 "nativescript-permissions": "^1.3.9",
 "nativescript-phone": "^3.0.1",
 "nativescript-plugin-firebase": "^10.5.2",
 "nativescript-rater": "^2.1.2",
 "nativescript-screen-orientation": "^2.0.0",
 "nativescript-theme-core": "~1.0.4",
 "nativescript-toasts": "^1.0.3",
 "nativescript-ui-calendar": "^6.1.0",
 "nativescript-ui-listview": "^8.2.0",
 "nativescript-ui-sidedrawer": "^8.0.1",
 "password-validator": "^5.1.2",
 "reflect-metadata": "~0.1.12",
 "rxjs": "~6.3.0",
 "tns-core-modules": "^6.5.12",
 "zone.js": "0.9.1"
 },
 "devDependencies": {
 "@angular/compiler-cli": "8.0.0",
 "@nativescript/schematics": "^0.7.3",
 "@ngtools/webpack": "8.0.0",
 "chalk": "^4.1.0",
 "codelyzer": "~4.5.0",
 "minimist": "^1.2.5",
 "nativescript-dev-webpack": "^1.5.1",
 "node-sass": "4.12.0",
 "plist": "^3.0.2",
 "replace-in-file": "^6.1.0",
 "tns-android": "6.5.3",
 "tns-ios": "6.5.4",
 "tns-platform-declarations": "^6.5.12",
 "tslint": "~5.11.0",
 "typescript": "3.4.5"
 },
 "readme": "NativeScript Application"
}

public showModal(): void {
 this.onFocus();
 let options = {
 context: {
 data: data
 },
 fullscreen: true,
 viewContainerRef: this.vcRef
 };
 this.modal.showModal(ModalViewComponent, options).then(res => {
 this.getAllReports();
 });
}

<StackLayout class="form-group">
 <Label text="Supervisor" class="label m-b-0"></Label>
 <TextField hint="Select" class="input input-border" [(ngModel)]="selectedSupervisor" [text]="selectedSupervisor" (tap)="openDialog('Supervisors', supervisors)" editable="false"></TextField>
</StackLayout>

openDialog(name: string, data): void {
 this.onFocus();
 let options;
 options = {
 title: `Select ${name}`,
 actions: data.map(x => x.name),
 cancelButtonText: "Cancel",
 };
 action(options).then((result) => {
 if (result === "Cancel") {
 } else {
 if(name === 'Supervisors') {
 this.selectedSupervisor = result;
 }
 }
 });
}