0

I am fetching my data from api in service. Now i have to do input search filter by name.

Here is my code Service:

export class ListService {
      listUrl = 'https://swapi.co/api/planets';
      constructor(private http: HttpClient) {}

      getList(): Observable<Dummy> {
        return this.http.get<Dummy>(this.listUrl);
      }
    }

Main Component:

 export class MainComponent implements OnInit {
      public planetList: Planet[] = [];

      constructor(private listService: ListService) {}

      ngOnInit() {
        this.listService.getList().subscribe(list => {
          this.planetList = list.results;
        });
      }
onSearchValueChanges(inputElement: HTMLInputElement) {}

Main Component HTML:

<input
      #searchInput
      type="text"
      (keyup)="onSearchValueChanges(searchInput)"
      placeholder="Search"
    />
    <app-list [planetsList]="planetList"></app-list>

List Component:

    export class ListComponent implements OnChanges{
      @Input() planetsList: Planet[] = [];

    ngOnChanges() {
     console.log(this.planetsList)
    }
   }

Is the best option to filter this.planetlist array in Main Component? Or maybe should I use RxJS filter? If so how to do it?

Thanks for answers in advance!

bafix2203
  • 541
  • 7
  • 25

1 Answers1

-2

You can create a custom pipe by referring docs angular pipe Question seems same like filtering in list

Saima Haji
  • 185
  • 1
  • 5
  • Could you help mi with that? – bafix2203 Jul 04 '19 at 10:12
  • Before help let me clear the question again: You have list eg: [A, B, C, D] and you have input box in which you enter A, So you have to filter the list and output should be [A]. Am I right? – Saima Haji Jul 04 '19 at 11:08
  • Yes, there is a link to api in my question - i want to enter name in input box ant filter the list by name – bafix2203 Jul 04 '19 at 12:37
  • https://stackoverflow.com/questions/46780843/angular-4-filter-search-custom-pipe this link has a solution to your problem. If you do not get it let me know will create stackblitz – Saima Haji Jul 04 '19 at 14:52
  • 1
    Those who voted it down please let me know the reason so that i can improve on it. – Saima Haji Jul 04 '19 at 14:53