CODEWITHSUNDEEP
angular
hylian
hylian

Reputation: 560

Angular 6 - getting input for a function

I'm trying to get input from a text box and pass it to a function, I keep getting the error _co.randomCode is not a function.

Only just started working with Angular and have tried a couple of different things but am stuck on this one.

app.component.html

<div class="form-group">
        <input #randomCode class="form-control landing-code-input" placeholder="123456">
</div>
<button (click)="get_screen(randomCode.value)" class="btn btn-lg btn-assign-to-tap">Assign</button>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private items : Item[] = [];
  title = 'site';
  randomCode = '';

  private itemsObservable : Observable<Item[]> ;

  constructor(private dataService: DataService) {

  this.dataService.get_screen(this.randomCode).subscribe((res : Item[])=>{
    this.items = res;
     console.log(res);
  });
  }
}

data.service.ts

export class DataService {

  apiUrl:string = "http://localhost/api/v1";
  constructor(private httpClient : HttpClient) {

   }

   get_screen(randomCode) {
     return this.httpClient.get(this.apiUrl + randomCode)
   }
}

Upvotes: 0

Views: 195

Answers (2)

riazosama
riazosama

Reputation: 535

The easiest way is to use ngModel. ngModel is used in Angular for two-way binding. That is, whatever you type in your input, you can access that in your .ts class. This is how you would achieve it.

app.component.html

<div class="form-group">
        <input [(ngModel)]="randomCode" class="form-control landing-code-input" placeholder="123456">
</div>
<button (click)="get_screen()" class="btn btn-lg btn-assign-to-tap">Assign</button>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private items : Item[] = [];
  title = 'site';
  randomCode: string;

  private itemsObservable : Observable<Item[]> ;

  constructor(private dataService: DataService) {
  }

    get_screen() {
     this.dataService.get_screen(this.randomCode).subscribe((res : Item[])=>{
     this.items = res;
     console.log(res);
    });
  }
}

Upvotes: 0

Edwin Bermejo
Edwin Bermejo

Reputation: 442

define a get_screen function in your class then pass the data to your service function "this.dataService.get_screen"

// function inside AppComponent Class
getScreen(code) {
   this.dataService.get_screen(code).subscribe((res : Item[])=>{
      this.items = res;
   });
}

Upvotes: 1

Related Questions