CODEWITHSUNDEEP
angularangular5angular4-router
Anand
Anand

Reputation: 645

Angular4 select options and show data in UI from REST calls

I need to create a webpage with dropdown having values ALL , Test1 & Test 2 respectively.

Now if user is selecting :

 All ---> localhost:8080/testcases

 Test1 --> localhost:4200/testcases?module=Test1

 Test2 ->localhost:4200/testcases?module=Test2

I have created below module.component.ts:

import { Component, OnInit } from '@angular/core';
import { Testcase } from '../testcase';
import { DataService } from '../data.service';

@Component({
   selector: 'app-module',
   templateUrl: './module.component.html',
   styleUrls: ['./module.component.css']
})
export class ModuleComponent implements OnInit {
testCases: Testcase[];
types= ["ALL", "Test1", "Test2"];

getTestcases() {
  return this.dataService.getTestcases().then(testCases => this.testCases = testCases);
 }

 constructor(private dataService: DataService) {}

 ngOnInit() {

 }

 }

corresponding html file:

   <div> type:
         <select>
               <option *ngFor="let i of type">{{i}}</option>
         </select>
   </div>

Here, getTestcases() is returning me all the correct response for

localhost:4200/testcases(If I am calling this from corresponding testcase component),but I am not sure here in module component how to use with this dropdown

call,Since its my first interaction with Angular4,I am totally stuck and unable

to move further,need your suggestions

Upvotes: 0

Views: 50

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222702

You mean

 <select>
       <option *ngFor="let i of types">{{i}}</option>
 </select>

Upvotes: 1

Related Questions