title: Angular 6 HTTP GET sending an ID Param
body: <p>In the HTML page, a user enters an ID number.  I'm trying to figure out how to get that one user profile (from my SQL database) that matches the ID entered, with an HTTP GET call to my API.
  I've researched how this process has evolved with new versions of Angular, so I think I need to send with params with Angular 6 (?).
  Can Angular return this object to the same HTML component?</p>
  
  <p>I have been able to GET the whole object of ALL users, but not one user matching the ID entered (tried using getters/setters w/ID, but did not work).
  Since I already have the whole object, maybe there is a different way to match the ID entered to the ID in all users object?</p>
  
  <p>HTML...</p>
  
  <pre><code>   &lt;div class="col-sm-6 form-group"&gt;
      &lt;label for="name"&gt;Student ID 1&lt;/label&gt;
      &lt;input type="text" id="ClassTimesStudentID" name="ClassTimesStudentID" required [(ngModel)]="ClassTimesStudentID"
        class="form-control"&gt;
    &lt;/div&gt;
  
    &lt;button class="button" type="button" (click)="getCheckInByID()"&gt;Enter&lt;/button&gt;
  
   &lt;!-- This should show the record Id of the one user --&gt;
      &lt;div  *ngFor="let day of userFromID" class="col-sm-6 form-group"&gt;
        &lt;label for="id-input"&gt;Record Id &lt;/label&gt;
        &lt;input type="text" name="studentRowRecordID" [(ngModel)]="day.studentRowRecordID" 
          [(ngModel)]="ClassTimesRowId" class="form-control"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Component.ts...</p>
  
  <pre><code> import { Component, OnInit, ViewChild } from '@angular/core';
   import { NgForm } from '@angular/forms';
   import { DataStorageService } from 'src/app/shared/data-storage.service';
  
   @Component({
     selector: 'app-logout',
     templateUrl: './logout.component.html',
     styleUrls: ['./logout.component.css']
   })
  
   export class LogoutComponent implements OnInit {
     public allCheckIns: Array&lt;any&gt;;
     public userFromID: Array&lt;any&gt;;
  
    constructor(private dataStorageService: DataStorageService) {
       dataStorageService.getCheckInList().subscribe((importCheckIns: any) =&gt; 
       this.allCheckIns = importCheckIns);
       console.log('checkins ' + this.allCheckIns);
      }
  
      ngOnInit() {
     }
  
   getCheckInByID() {
       this.dataStorageService.getCheckInByID().subscribe((importOne: any) =&gt; 
   this.userFromID = [importOne]);
       console.log('one user ' + this.userFromID);
      }
  
   }
  </code></pre>
  
  <p>data-storage.service.ts...</p>
  
  <pre><code> import { Injectable } from '@angular/core';
   import { Http, Response } from '@angular/http';
   import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
   import 'rxjs/Rx';
  
    @Injectable()
    export class DataStorageService {
     private headers: HttpHeaders;
     private accessPointUrl: string = 'http://localhost:59673/api/ClassTimes';
  
      ClassTimesStudentID: any;
  
  
     constructor(private http: HttpClient, private httpClient: HttpClient,) {
     this.headers = new HttpHeaders({'Content-Type': 'application/json; 
     charset=utf-8'});
      }
  
    // This works, returns all users
       public getCheckInList() {
       return this.http.get(this.accessPointUrl, {headers: this.headers});
     }
  
     // This is where I need the most help
      public getCheckInByID() {
        let data = this.ClassTimesStudentID;
       return this.http.get(this.accessPointUrl, {params: data}, {headers: 
       this.headers});
     }
  </code></pre>