CODEWITHSUNDEEP
typescriptangular6
abhijith
abhijith

Reputation: 127

How to make a dropdown using input tag in angular 6

Have something like this but the issue is when I click on any options it is not getting selected and the name is not getting changed to the option name. 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.

Upvotes: 0

Views: 2737

Answers (1)

Jacopo Sciampi
Jacopo Sciampi

Reputation: 3432

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>

Upvotes: 1

Related Questions