angular 4 typeahead display only property that has a match in array of objects?

Question

I have an array of json and two typeahead channels and shows. The value of show depend on the value of channel selected.

allChannelShow = [    
{"channel":"tv","showname":["America","Friends","Night"]}, 
{"channel":"radio","showname":["360","pop","News","Special","Prime Time"]}, 
{"channel":"stream","showname":["All In","Reports","Deadline","series","Morning","Live","drama","comedy"]}   
]

my .html file

<div class="container">       
   <label for="channel">Channel 
     <input formControlName="channel" [typeahead]="allChannelShow" typeaheadOptionField="channel" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" 
      placeholder="Enter a channel name" required>                                  
   </label>              
</div>
<div class="container">     
  <label>Show                               
    <div *ngIf="channel"> 
      <input formControlName="show" [typeahead]="allChannelShow" typeaheadOptionField="showname" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" placeholder="Enter a show name" required>
</div>   </label> </div>

So if I select :
radio, the second typeahead shows will have a select list with these items:
["360","pop","News","Special","Prime Time"]
And I will be able to select a specific a show like News or 360 or pop not the whole list if I select :
tv, the second typeahead shows will have a select list with these items: [ {"channel":"tv","showname":["America","Friends","Night]
I will be able to select a specific show like friends not the whole list

How can I make it happen?

Update Here is the code for what I have now.

Can you provide a stackblitz.com of what you've tried so far? — Kim Kern
– Kim Kern, Commented Jul 23, 2018 at 16:17

Kim Kern · Accepted Answer · 2018-07-24 16:21:18Z

Create a method that returns the show names for a given channel name:

getShowNames(channel: string): string[] {
  const channelEntry = this.allChannelShow.find(c => c.channel === channel);
  return channelEntry ? channelEntry.showname : [];
}

Assign a template variable to your input so you can retrieve its value

<input #channelInput formControlName="channel" [typeahead]="allChannelShow" typeaheadOptionField="channel" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0">
       ^^^^^^^^^^^^^

Set the autocomplete values dynamically with the method and the currently selected channel.

<input formControlName="show" [typeahead]="getShowNames(channelInput.value)" typeaheadOptionField="showname" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" placeholder="Enter a show name" required>
                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Try it out in this stackblitz.

Collectives™ on Stack Overflow

angular 4 typeahead display only property that has a match in array of objects?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related