<div>
  <form>
<div class="form-group">
  <label for="LogLocation-input">Select Your Location </label>
  <select type="text" id="LogLocation" name="LogLocation-input" [(ngModel)]="teacherLocInput" (ngModelChange)="basedOnLoc($event)" class="form-control">
<option *ngFor="let loc of teacherLocationsData" [value]="loc.location">
  {{ loc.location }}
</option>
  </select>
</div>

<div class="form-group">
  <label for="TeacherName-input">Enter Teacher Name </label>
  <select type="text" id="TeacherName" name="TeacherName-input" [(ngModel)]="loggingInfo.ClassTimesTeacherName" class="form-control">
    <option *ngFor="let nam of filteredTeacherNames">
      {{ nam.name }}
    </option>
  </select>
</div>


      <button type="button" class="btn btn-primary" (click)="addOrUpdateLoggingRecord($event);">Save</button>

      <h2 *ngIf="!loggingInfo || loggingInfo.id === undefined">Add record</h2>

      <h2 *ngIf="loggingInfo && loggingInfo.id !== undefined">Update record (ID: )</h2>

  </form>
 </div>

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { TimeService } from '../time.service';


@Component({
  selector: 'app-update',
  templateUrl: './update.component.html',
  styleUrls: ['./update.component.css']
})
export class UpdateComponent implements OnInit {
  @Output() loggingCreated = new EventEmitter<any>();
  @Input() loggingInfo: any;
  public buttonText = 'Save';
  public teacherLocationsData: Array<any>;
  public teacherNameData: Array<any>;
  public filteredTeacherNames: Array<any>;

  private _teacherLocInput: string;
  get teacherLocInput(): string {
    return this._teacherLocInput;
  }
  set teacherLocInput(value: string) {
  this._teacherLocInput = value;
  this.filteredTeacherNames = this.filterTeachers(value);
}

filterTeachers(teacherLocInput: string) {
  return this.teacherNameData.filter(teacher => teacher.location === this.teacherLocInput);
}


  constructor(private timeService: TimeService) {
    this.clearAllInfo();
    timeService.getTeacherLocation().subscribe((importLocations: any) => this.teacherLocationsData = importLocations);
 }

  ngOnInit() {
    // not sure if needed
    this.teacherNameData;

  }

basedOnLoc(val:any) {
  // not sure if this is calling API
this.customFunction(val);
}

// gets called on the change event of location selected
customFunction(val:any) {
  this.teacherLocInput = val;
  this.timeService.getTeacherName().subscribe((importTeacherName: any) => this.teacherNameData = importTeacherName);
}



  private clearAllInfo = function() {
    // Create an empty logging object
    this.loggingInfo = {
      id: undefined,
      date: '',
      ClassTimesStudentID: '',
      ClassTimesStudentName:'',
      ClassTimesSubjects: '',
      ClassTimesLogLocation: '',
      ClassTimesTeacherID: '',
      ClassTimesTeacherName: '',
      ClassTimesLogOff: '',
      timeInSeconds: 0,
      distanceInMeters: 0
    };
  };

  public addOrUpdateLoggingRecord = function(event) {
    this.loggingCreated.emit(this.loggingInfo);
    this.clearAllInfo();
    console.log(this.LoggingIfo);
  };


}