Angular 6 - getting input for a function

Question

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)
   }
}

place the button inside the div

Jacopo Sciampi
– Jacopo Sciampi

2018-10-03 08:39:56 +00:00
Commented Oct 3, 2018 at 8:39 — Jacopo Sciampi
– Jacopo Sciampi, Commented Oct 3, 2018 at 8:39
you must use [(ngModel)]

Mile Mijatović
– Mile Mijatović

2018-10-03 08:42:14 +00:00
Commented Oct 3, 2018 at 8:42 — Mile Mijatović
– Mile Mijatović, Commented Oct 3, 2018 at 8:42

Edwin Bermejo · Accepted Answer · 2018-10-03 08:48:01Z

1

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;
   });
}

answered Oct 3, 2018 at 8:48

Edwin Bermejo

4423 gold badges5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

riazosama · Accepted Answer · 2018-10-03 12:00:05Z

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);
    });
  }
}

Collectives™ on Stack Overflow

Angular 6 - getting input for a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related