custom dropdown only displayed selected value Angular

Question

I using custom dropdown using div,when I got object response cards from API, I need to iterate data using custom dropdown, problem is after selected, the next clicked dropdown only show selected value ( supposed to be array object), this is what I had tried:

ts file

  selectSavedCard() {
    this.show = !this.show;
  }

  selectDropdownCard(card) {
    this.myData.cards.find((item) => item.cardId === card.id) ?
    this.myData.cards = this.myData.cards.filter((item) => item.cardId === card.id) :
    this.myData.cards= [card];
    this.show = false;
    this.hasSelected = true;
    this.selectedCard = card;
    this.show1 = true;
  }

html file

  <div class="div1" (click)="selectSavedCard()" [(ngModel)]="selectedCard" ngDefaultControl>
    <div *ngIf='!hasSelected'>
      <div>
        <p>dropdown</p>
      </div>
    </div>

<!-- to bind selected card -->
<ng-container *ngIf="show1">
      <div  *ngFor="let card of myData.cards">
      <div>
        <p>{{card.cardNumberMasked}}  dropdown</p>
      </div>
    </div>
</ng-container>
  </div>

    <div class="div2" *ngIf="show">
    <div *ngFor="let card of myData.cards" (click)="selectDropdownCard(card)">
      <div>
        <p>{{card.cardNumberMasked}}</p>
      </div>
    </div>
  </div>

this is my stackblitz demo, for the first clicked dropdown, it worked well (it show all array) after selected card, clicked drodpdown, (it only show selected card, supposed to be show all array), hope can make u guys understand and give me suggestion to solve this.

Can you please elaborate What you are trying to achieve here — jitender
– jitender, Commented Sep 25, 2019 at 10:15
using custom dropdown, I try to get selected value, then after the second attempt I try, the dropdown only show for the selected value only (supposed to be show all the value ) — coder
– coder, Commented Sep 25, 2019 at 10:25

Adrita Sharma · Accepted Answer · 2019-09-25 10:31:00Z

1

You have filtered and modified this.myData.cards to have only one item:

 selectDropdownCard(card) {
     this.myData.cards= [card];
  }

Therefore it displays only single item.

To push the selected item, you don't need to modify myData , you can simply display it without for loop.

<ng-container *ngIf="show1">
    {{selectedCard.cardNumberMasked}} dropdown
</ng-container>

Removing this.myData.cards= [card]; will display all items

Forked Stackbiltz

edited Sep 25, 2019 at 10:31

answered Sep 25, 2019 at 10:13

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

coder Over a year ago

yeah, but another problem happen, if I removed this.myData.cards= [card]; , then selected card will not push, it will push all the cards

Adrita Sharma Over a year ago

Where do you want to push selected card? your question wasn't clear

coder Over a year ago

from dropdown, get selected value and display it on dropdown default component,

Adrita Sharma Over a year ago

Check the demo I shared, do you want like this?

Adrita Sharma Over a year ago

Sure. Check it.

Collectives™ on Stack Overflow

custom dropdown only displayed selected value Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related