CODEWITHSUNDEEP
javascriptangulardata-bindingngforangular-ng-if
devo_dev
devo_dev

Reputation: 101

Angular dropdown/ databinding

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

Upvotes: 1

Views: 1189

Answers (3)

devo_dev
devo_dev

Reputation: 101

With kind thanks to the help from Indrkumara and user3250 Here is a final version of the sport selector dropdown I was trying to create

https://stackblitz.com/edit/angular-sport-select-revision-6

hopefully it'll help anyone else coming from Angularjs/v1 and wanting to get up to speed with the new version of Angular (v6 as of this moment)

Upvotes: 1

Indrakumara
Indrakumara

Reputation: 1645

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"];

Upvotes: 1

User3250
User3250

Reputation: 3421

I created a Stacblitz here: https://stackblitz.com/edit/angular-fst8lm-dakynu

Variable listItems isn't a boolean hence below condition wouldn't be true.

<!-- this shows nothing-->
<div *ngIf="listItems == true" >

Changing to <div *ngIf="listItems.length>0" >, works updated in Stackblitz.

To get selected sport you needed a variable and selectionChange event of combo box as below:

HTML:

<kendo-combobox (selectionChange)="changeSport($event)" [data]="listItems" [allowCustom]="allowCustom">
</kendo-combobox>

.ts:

changeSport(e){
  console.log(e);

  this.selectedSport = this.sportdata.find(f=>f.sportname == e);
  console.log(this.selectedSport);
}

Hope, this gives a better understanding of what needs to be done.

Upvotes: 1

Related Questions