title: save the value of an input in a variable in angular 5
body: <p>I am new at angular and I am trying to get the value of an input and save it in a variable to pass it to my service that needs a parameter:</p>
  
  <h1>this is my html</h1>
  
  <pre><code>&lt;form class="main-form"&gt;
  
    &lt;div class="form-group col-md-4"&gt;
      &lt;label for="cedula"&gt;Numero de cedula&lt;/label&gt;
      &lt;input type="text" class="form-control" id="cedula" name="cedula [(ngModel)]="cedula" placeholder="Ingrese su numero de cedula"&gt;
     &lt;br&gt;
     &lt;button type="submit" (click)="getReservas(cedula)" class="btn btn-primary"&gt;Consultar&lt;/button&gt;
  
    &lt;/div&gt;
  
  &lt;/form&gt;
  &lt;h1&gt;Usuario Reservado&lt;/h1&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;table class="table" &gt;
    &lt;thead&gt;
      &lt;tr&gt;
  
        &lt;th scope="col"&gt;Cedula&lt;/th&gt;
        &lt;th scope="col"&gt;Nombre&lt;/th&gt;
        &lt;th scope="col"&gt;Edad&lt;/th&gt;
        &lt;th scope="col"&gt;Fecha&lt;/th&gt;
        &lt;th scope="col"&gt;Origen&lt;/th&gt;
        &lt;th scope="col"&gt;Destino&lt;/th&gt;
        &lt;th scope="col"&gt;Hora&lt;/th&gt;
        &lt;th scope="col"&gt;Telefono&lt;/th&gt;
        &lt;th scope="col"&gt;Precio&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let item of reserva"&gt;
  
        &lt;td&gt;{{item.cedula}}&lt;/td&gt;
        &lt;td&gt;{{item.nombre}}&lt;/td&gt;
        &lt;td&gt;{{item.edad}}&lt;/td&gt;
        &lt;td&gt;{{item.fechar}}&lt;/td&gt;
        &lt;td&gt;{{item.origenr}}&lt;/td&gt;
        &lt;td&gt;{{item.destinor}}&lt;/td&gt;
        &lt;td&gt;{{item.hora}}&lt;/td&gt;
        &lt;td&gt;{{item.telefono}}&lt;/td&gt;
        &lt;td&gt;{{item.precior}}&lt;/td&gt;
  
      &lt;/tr&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h2>this is my component</h2>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Router} from '@angular/router';
  
  import {ReservasService} from './reservas.service';
  import {ReservasModel} from './../modelo/reservas.model';
  
  @Component({
    selector: 'app-reservas',
    templateUrl: './reservas.component.html',
    styleUrls: ['./reservas.component.css'],
    providers:[ReservasService]
  })
  export class ReservasComponent implements OnInit {
      private reserva:Array&lt;ReservasModel&gt;;
      private cedula:String;
    constructor(private rs:ReservasService) { }
  
    ngOnInit() {
      this.loadRes();
    }
  
  private loadRes():void{
      this.rs.getReservas(this.cedula).subscribe(res=&gt;{
          this.reserva=res;
  
      });
  }
  }
  </code></pre>
  
  <h3>my service</h3>
  
  <pre><code>import { Injectable } from '@angular/core';
  import  {HttpClient} from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  import {ReservasModel} from './../modelo/reservas.model';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class ReservasService {
  
    constructor(private http:HttpClient) { }
  
    public getReservas(cedula:String):Observable&lt;ReservasModel[]&gt;{
  
      return this.http.get&lt;ReservasModel[]&gt;("http://localhost:8080/getConsultarCc?cc="+cedula);
  
    }
  }
  </code></pre>
  
  <p>what am I doing wrong, I would thank whoever can help me.</p>
  
  <p>try this form but I get error:<a href="https://stackoverflow.com/a/39959287/10543023">https://stackoverflow.com/a/39959287/10543023</a> and <a href="https://es.stackoverflow.com/a/5845">https://es.stackoverflow.com/a/5845</a></p>