How to make a dropdown using input tag in angular 6

Question

Currently I am using a drop down button which is kind of odd. But I kind of ran out of options and hoping that you guys can help me out of this. I have already tried the traditional way of using the "select" tag but the issue I am facing is that I need to customise the dropdown body which I am not able to do. The .html snippet is like this,

              <div class="month-selector btn-group">
                <button type="button" data-toggle="dropdown">
                  Dropdown button
                </button>
                <ul class="dropdown-menu scrollable-menu" role="menu">
                  <li>
                    <div class="item">Select Category</div>
                  </li>
                  <hr class="style-hr">
                  <li>
                    <div class="item">General Inquiries</div>
                  </li>
                </ul>
              </div>

The .ts file is like this.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-case-accordian',
  templateUrl: './case-accordian.component.html',
  styleUrls: ['./case-accordian.component.scss']
})
export class CaseAccordianComponent implements OnInit {
constructor(){}
  ngOnInit() {}
}

What changes do I need to fo in .ts file so as to make the selected value reflect back in place of "Dropdown button". Any help is appreciated since I am new to Angular 6. Thanks in advance.

so when you click an element from the list you want the change be reflected on "Dropdown button"? IE: Click on "Select category" and then the text "Dropdown button" change in "Select category"? — Jacopo Sciampi
– Jacopo Sciampi, Commented Oct 15, 2018 at 9:52
What if I want to use *ngFor in the future then how should I use it and how to use [(ngModel)]? — abhijith
– abhijith, Commented Oct 15, 2018 at 9:59

Jacopo Sciampi · Accepted Answer · 2018-10-15 09:56:19Z

1

Edit your component.ts like this:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-case-accordian',
  templateUrl: './case-accordian.component.html',
  styleUrls: ['./case-accordian.component.scss']
})
export class CaseAccordianComponent implements OnInit {
customText = "Dropdown button";
constructor(){}
  ngOnInit() {}

valueClick(value: string){
  this.customText = value;
}
}

then your html

   <div class="month-selector btn-group">
                <button type="button" data-toggle="dropdown">
                  {{customText}}
                </button>
                <ul class="dropdown-menu scrollable-menu" role="menu">
                  <li>
                    <div class="item" (click)="valueClick('Select Category')">Select Category</div>
                  </li>
                  <hr class="style-hr">
                  <li>
                    <div class="item"  (click)="valueClick('General Inquiries')">General Inquiries</div>
                  </li>
                </ul>
              </div>

answered Oct 15, 2018 at 9:56

Jacopo Sciampi

3,5142 gold badges27 silver badges52 bronze badges

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

1 Comment

abhijith Over a year ago

how can I implement the same by giving it to a parent div?

Collectives™ on Stack Overflow

How to make a dropdown using input tag in angular 6

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related