added combobox for selecting lender

src/app/app.component.scss

 
 .appbar,
 .k-appbar-sticky{
-    /* z-index: 1000; */
+     z-index: 1000;
 }
 .k-notification-group{
   z-index:1000;

src/app/loan-edit/basicinfo/basicinfo.component.html

             <fieldset class="k-form-fieldset">
               <kendo-formfield>
                 <kendo-label [for]="LoanId" text="Loan ID"></kendo-label>
-                <input kendoTextBox #LoanId  readonly name="LoanId" [(ngModel)]="Loan.Id" [ngModelOptions]="{standalone: true}"/>
+                <input kendoTextBox #LoanId  readonly name="LoanId"
+                       [(ngModel)]="Loan.Id" [ngModelOptions]="{standalone: true}"
+                       [placeholder]="'Automatically generated'"
+                />
 
                 <kendo-formhint>Unique transaction
                   ID from SuperCredit (Auto generated when save, cannot be changed) </kendo-formhint>
               <kendo-formfield>
                 <kendo-label [for]="Lender" text="Lender Organization (Funding Agency)">
                 </kendo-label>
-                <kendo-textbox name="Lender" [(ngModel)] = "Loan.Lender"  #Lender  [clearButton]="true" > </kendo-textbox>
+
+                <kendo-combobox name="Lender"
+                                [(ngModel)] = "Loan.Lender"  #Lender
+                                [data]="lenderListView | async"
+                                [allowCustom]="true"
+                                [loading]="lenderNameService.loading">
+                </kendo-combobox>
                 <kendo-formhint>info determined by trail income info</kendo-formhint>
                 <kendo-formerror>Error: Lender is required (info determined by trail income info) </kendo-formerror>
               </kendo-formfield>
               <div class="vertical-spacer"></div>
 
               <kendo-formfield>
-                <kendo-label [for]="LenderLoanNumber" text="Lender Organization">
+                <kendo-label [for]="LenderLoanNumber" text="Lender's Loan identification">
                 </kendo-label>
                 <kendo-textbox name="LenderLoanNumber" [(ngModel)] = "Loan.LenderLoanNumber"  #LenderLoanNumber  [clearButton]="true" > </kendo-textbox>
                 <kendo-formhint>Can not be empty especially when having income</kendo-formhint>
                 <kendo-label [for]="Settlement" [optional]="false" text="Settlement Date"></kendo-label>
                 <kendo-datepicker #Settlement name="Settlement"
                                   [(ngModel)]="Loan.Settlement"
+                                  [format]="'dd/MM/yyyy'"
                                   [min]="minSettlement" [max]="maxSettlement">
                 </kendo-datepicker>
                 <kendo-formhint>Date settled or expected to be settled</kendo-formhint>

src/app/loan-edit/basicinfo/basicinfo.component.ts

 import {LoanModel} from '../../models/loan.model';
 import {LoanSingleService} from '../../service/loan.single.service';
 import {HttpErrorResponse} from '@angular/common/http';
+import {LenderNameService} from '../../service/lender-name.service';
+import {Observable} from 'rxjs';
 
 
 @Component({
   styleUrls: ['./basicinfo.component.scss']
 })
 export class BasicinfoComponent implements OnInit {
-
-  constructor( private service: LoanSingleService) { }
+  public lenderListView: Observable<string[]>;
+  constructor( private service: LoanSingleService, public lenderNameService: LenderNameService) {
+    this.lenderListView = this.lenderNameService;
+    this.lenderNameService.query();
+  }
 
   @Input() Loan: LoanModel;
   @Output() NotifyNext = new EventEmitter<boolean>();
     {text: '4 - Approved :   Approved by lender', value: 'Approved' },
     {text: '5 - Settled :   Settlement date finalized.', value: 'Settled'},
     {text: '6 - Finished :   Fully paid, terminated, or switched)', value: 'Finished'},
+    {text: '7 - Aborted :   Ended before any income has made)', value: 'Aborted'},
   ];
 
   ngOnInit(): void {

src/app/loan-edit/trail-income/trail-income.component.html

 
         <kendo-formfield>
           <kendo-label [for]="Lender" text="Fund Supplier's Name"></kendo-label>
-          <input #Lender name="Lender" kendoTextBox [(ngModel)]="Loan.Lender" [readonly]="Loan.PayIn.length>0"/>
+          <kendo-combobox name="Lender"
+                          [(ngModel)] = "Loan.Lender"  #Lender
+                          [data]="lenderListView | async"
+                          [allowCustom]="true"
+                          [loading]="lenderNameService.loading">
+          </kendo-combobox>
           <kendo-formhint>Unique Name for a fund provider (readonly after income data is available)</kendo-formhint>
           <kendo-formerror>Error: Lender name is required</kendo-formerror>
         </kendo-formfield>

src/app/loan-edit/trail-income/trail-income.component.ts

 import {AuthService} from '../../service/auth.service';
 import {PayInModel} from '../../models/pay-in.model';
 import {Router} from '@angular/router';
+import {LenderNameService} from '../../service/lender-name.service';
+import {Observable} from 'rxjs';
 
 
 const createFormGroup = dataItem => new FormGroup({
   public showBalance = true;
   public showOffsetBalance = true;
 
+  public lenderListView: Observable<string[]>;
+
   constructor(private ls: LoanSingleService,
               private auth: AuthService,
-              private router: Router) { }
+              private router: Router,
+              public lenderNameService: LenderNameService) {
+    this.lenderListView = this.lenderNameService;
+    this.lenderNameService.query();
+  }
   ngOnInit(): void {
     // this.Loan.PayIn
   }