Angular dropdown/ databinding

Question

I am trying to figure out how to dynamically select a text field from a dropdown. I've got a link to a stackblitz sketch. Ideally I want to pull the data from an array or a json file. I've tried making different filter / keyvalue pipes and databinding in various ways - here is my most current sketch

https://stackblitz.com/edit/angular-fst8lm

basically I want to select a sport from the dropdown list and the to populate a div based on info in the array (only one selected sport at a time - I can spit out all the data but seem to have trouble getting the ngFor/ ngIf directives working) - I used to be able to do this easily with Angular1/ Angularjs but am just getting up to speed the current version of Angular - I've gone through the docs and other SO queries but couldn't find anything pertinent - weird as it seems such a simple issue - any advice appreciated

here is part of the component.ts from the stackblitz link

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `

    <div class="example-wrapper">
    <p>Favorite sport:</p>
    <kendo-combobox [data]="listItems" [allowCustom]="allowCustom">
    </kendo-combobox>
    </div>

    <!-- this shows nothing-->
    <div *ngIf="listitems == true" >
    <div *ngFor="let data of sportdata">

    <h1>Sport name: {{data.sportname}}</h1>
    <h2>Sport rules: {{data.sportrules}}</h2>
    <h3>Notable athletes: {{data.sportPersons}}</h3>
    </div>
    </div>

    <!-- this shows something-->
    <div *ngFor="let data of sportdata">

    <h1>Sport name: {{data.sportname}}</h1>
    <h2>Sport rules: {{data.sportrules}}</h2>
    <h3>Notable athletes: {{data.sportPersons}}</h3>
    </div>


  `
})
export class AppComponent {
    public allowCustom: boolean = true;
    public listItems: Array<string> = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];

    public sportdata = [
      {
        position: 1, sportname: 'Basetball', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 2, sportname: 'Basketball', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 3, sportname: 'Cricket', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 4, sportname: 'Field Hockey', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 5, sportname: 'Football', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 6, sportname: 'Table Tennis', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 7, sportname: 'Tennis', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 8, sportname: 'Volleyball', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },

    ]
}

edit . I am also looking to do this without using kendo UI hence this stackblitz sketch Is there a way to do this with a non kendo dropdown? https://stackblitz.com/edit/angular-spor-select-revise-3-sans-kendo

Answer 1

I have modified your code : https://stackblitz.com/edit/angular-fst8lm-6zsqum

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: any): any {
        if (!items || !filter) {
            return [];
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.sportname.indexOf(filter) !== -1);
    }
}

mainly introduce a filter and ngModel data binding

 <p>Favorite sport:</p>
    <kendo-combobox [data]="listItems" [(ngModel)]="selectedSport" [allowCustom]="allowCustom">
    </kendo-combobox>
    </div>

 <!-- this shows something-->
    <div *ngFor="let data of sportdata | myfilter : selectedSport">

    <h1>Sport name: {{data.sportname}}</h1>
    <h2>Sport rules: {{data.sportrules}}</h2>
    <h3>Notable athletes: {{data.sportPersons}}</h3>
    </div>

And AppComponent

export class AppComponent {
    public allowCustom: boolean = true;
    selectedSport:any
    public listItems: Array<string> = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];