selected only one value dropdown on custom dropdown Angular

Question

I using my own custom dropdown which I need to using selected only one value , it supposed to be when I clicked Dropdown1, div will displayed Dropdown1, when I clicked Dropdown2 it will replaced Dropdown1 in div. this is stackblitz link I created,

ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  savedCards = [];
  show = false;
  hasSelected: boolean;

    savedCreditCards = [
    { id: '001', viewValue: 'Dropdown1' },
    { id: '002', viewValue: 'Dropdown2' },
    { id: '003', viewValue: 'Dropdown3' },
    { id: '004', viewValue: 'Dropdown4' },
  ];

  ngOnInit() {
  }

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

  selectDropdownCard(card) {
    this.savedCards.find((item) => item.id === card.id) ?
      this.savedCards = this.savedCards.filter((item) => item.id === card.id) :
      this.savedCards.push(card);
    this.show = false;
    this.hasSelected = true;
  }

}

html

  <div class="div1" (click)="selectSavedCard()">
    <div *ngIf='!hasSelected'>
      <div>
        <p>dropdown</p>
      </div>
    </div>
    <div *ngFor="let card of savedCards">
      <div>
        <p>{{card.viewValue}}</p>
      </div>
    </div>
  </div>
  <div class="div2" *ngIf="show">
    <div *ngFor="let card of savedCreditCards" (click)="selectDropdownCard(card)">
      <div>
        <p>{{card.viewValue}}</p>
      </div>
    </div>
  </div>

I know it can be done with set savedCards array as empty but I believe it not the best practice, Need opinion and suggestion,

if you want only one selected options then why is savedCards an array? — Luca Regazzi
– Luca Regazzi, Commented Aug 24, 2019 at 8:39
but to show all the options in the dropdown you are using the other array — Luca Regazzi
– Luca Regazzi, Commented Aug 24, 2019 at 8:44
if I set savedCards a string, how do I filter card.id, also I had try to make it a string, it didnt work — hafizi hamid
– hafizi hamid, Commented Aug 24, 2019 at 8:47

alt255 · Accepted Answer · 2019-08-24 08:52:50Z

1

To show only single card which was selected, instead of pushing it into array. Just create a new array with single item. Which means in your selectDropdownCard method

replace this this.savedCards.push(card); with this.savedCards = [card];

answered Aug 24, 2019 at 8:52

alt255

3,6262 gold badges17 silver badges22 bronze badges

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

1 Comment

hafizi hamid Over a year ago

I see, I didnt realised that I push an array, this should be acceptable answer

Luca Regazzi · Accepted Answer · 2019-08-24 08:56:24Z

0

You are using an array to store something that should have only a single value. You should define savedCard as a simple object, remove the ng-for used to cicle through the savedCards in the html and save just the clicked card.

I updated your example here

answered Aug 24, 2019 at 8:56

Luca Regazzi

1,4051 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

selected only one value dropdown on custom dropdown Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related