0

Angular 5 with .NET (C#)

I am trying to incorporate the Typeahead control provided by ng-bootstrap. Given below is the requirement: - A typeahead control called Category - On selecting one of the items in the Category list, another control should be populated (Subcategory)

My doubt is:

  1. How do I get the typeahead to accept a key/value pair (or like an object eg: Category with Id, Name as its properties) so that I can get the key corresponding to the category value that is clicked. This categoryid will then be used to populate the subcategory field.

    Category

The above given is the control that I am using and the .ts file has the following:

@ViewChild('category') category: NgbTypeahead;
focus$ = new Subject<string>();
click$ = new Subject<string>();
search = (text$: Observable<string>) =>
  text$
  .debounceTime(200).distinctUntilChanged()
  .merge(this.focus$)
  .merge(this.click$.filter(() => !this.category.isPopupOpen()))
  .map(term => (term === '' ? this.categories : this.categories.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10));

The 'categories' field gets populated by extracting the Category.Name from an api call which actually returns a Category object with Name and Id.

Currently, I am getting the value and then finding the id corresponding to it in the Category object that was returned by the api. But this results in maintaining a lot of extra objects.

Started working on Angular5 (Angular for that matter) just a week back. Any inputs are greatly appreciated.

This was done by referring the example at: https://ng-bootstrap.github.io/#/components/typeahead/api

Fra
  • 21
  • 7
  • You could try use `[(ngModel)]` it will represent your object. For example `[(ngModel)]=myobject` then on your .ts file you can read the properties `myobject.id`. Also try the `selectItem` event in order to get your object when it is selected, for example `(selectItem)="onItemSelected($event)"`. Could you also share your template? Cheers – Daniel C. Jan 10 '18 at 00:03
  • Even if the ngmodel was set as myObejct, how do I get the id of the chosen item. Say suppose I have 2 items in my object: Id: 1, name: "test1"... id:2. name;"test2". How do I get he value '2' when I choose test2 automatically without having to search the object for a matching name. @DanielC. – Fra Jan 10 '18 at 04:42
  • Just make sure that `this.categories` is populated with `id` and `name` values. Rest api should return something like `{id: 1, name: "item1"}, {id:2, name:"item2"}`, and then your selected value will be a representation of one element of this.categories. – Daniel C. Jan 10 '18 at 14:31
  • For more info see the template for result example: https://ng-bootstrap.github.io/#/components/typeahead/examples – Daniel C. Jan 10 '18 at 14:42
  • Thank you so much @DanielC. completely missed on that example. Since I did not want the extra template, didnt even bother to look, my bad. Thank you once again. – Fra Jan 10 '18 at 18:21

0 Answers0