Setting up button value dynamically according to dropdown selection in Angular 2

I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button.

The CSS code for styling the dropdown is provided below:

.common_select_box {
width: 100%;
}

.common_select_box button {
border: thin #cfdadd solid;
border-radius: 0 !important;
width: 100%;
text-align: left;
padding: 7.45px 12px;
border-radius: 1.5px !important;
}

.common_select_box button .caret {
display: inline-block;
width: 0;
height: 0;
margin-right: 2px;
vertical-align: middle;
border-top: 6px dashed;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
top: 14px;
right: 5px;
}

.common_select_box ul.dropdown-menu {
border: 1px solid #cfdadd;
border-radius: 2px;
box-shadow: none !important;
width: 100%;
padding: 0px;
}

.common_select_box ul.dropdown-menu li {
padding: 5px 15px;
font-size: 12px;
list-style-type:none;
}

.common_select_box ul.dropdown-menu li:hover {
background: #edf1f2 !important;
}

Clicking on Option 1 should set its value on the button.

I would appreciate any assistance. Thank you!

htmlcssangular

Answer №1

This solution is effective,

<div class="common_select_box">
<div class="input-group-btn dropdown {{dropdown1? 'open':''}}" 
(click)="dropdown1=!dropdown1">
    <button type="button" class="btn btn-default font_size_12 no_box_shadow 
ticket_info_subline_text_color" dropdown-toggle=""
        aria-haspopup="true" aria-expanded="false">{{selectedNav}}<span 
class="caret" style="color: #bfbfbf;"></span> </button>
<ul class="dropdown-menu">
 <li (click)="setNav(item)" *ngFor="let item of navs">{{item}}</li>
  </ul>

within the .ts file

export class PropertyComponent {
selectedNav: any; navs = ['option 1', 'option 2', 'option 3']
ngOnInit() {
    this.selectedNav = 'select value';
}
setNav(nav){
    this.selectedNav = nav;
}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a dynamic form with Angular 5 that includes a conditional required textarea

When the checkbox is clicked, a textarea will appear and is required [required]="otherVendorsChecked == true ? true : false". Even if I select the checkbox and then deselect it, the textarea input remains required. Any ideas on what could be going wrong? ...

angulartextarearequired

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

htmlcssvb.net

The function Jquery .stop does not exist

I am encountering an issue with the magicline.stop function while attempting to implement an underline sliding effect for my navbar. I have tried to troubleshoot the problem but have been unsuccessful so far. Below is the code snippet: <nav class=" ...

javascripthtmljquery

I am looking to expand the width of the Bootstrap container specifically for the Max width

I need to adjust the width of the Bootstrap container to be responsive on all devices, especially maximizing the width on larger screens. Can anyone provide guidance on how to achieve this? Thank you in advance. To view my website, please follow this link ...

htmlcssbootstrap-4

Designing a slider to display a collection of images

I am currently working on a slider project using HTML, javascript, and CSS. I'm facing an issue where only the first two images (li) are being displayed and it's not transitioning to the other (li) elements. Below is the HTML code snippet: <se ...

javascriptcsshtml

The AngularJS page on my website is currently stuck in the mobile version, and strangely, the Google Chrome console is

When browsing our AngularJS website in mobile view on Google Chrome, it gets stuck and becomes unresponsive. The developer console does not show any error messages during this time. To replicate the issue, switch to mobile view, click on the "All top compa ...

javascriptjquerycssangularjsgoogle-chrome

The website is failing to adapt properly to smaller screen sizes

I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...

htmlcss

By default, the first table row is displayed when using table grouping in AngularJS

I am attempting to display only the first tr in the table and hide all other tr elements by default. I have tried using ng-show and ng-hide but it does not seem to be working as expected. This is not originally my plunker; I used it for reference on group ...

htmlcssangularjs

Inspect HTML elements using Jinja2 placeholders

I am a beginner in the world of web development, currently learning how to create Flask webapps. I am using Atom along with some addons like PreviewHTML to help me visualize live previews of my HTML code. However, I am facing an issue where I cannot see a ...

pythonhtmlflaskjinja2atom-editor

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

javascripthtml

I'm encountering some strange blank white space when I view my webpage on a phone or Safari. It seems to be affecting the CSS grid and flexbox of images

Currently, I am engaged in a 180-day challenge to create webpages on . For website number 9, the task at hand is to showcase 8 images in a grid layout. Surprisingly, this layout appears flawlessly on my Mac when using Chrome but encounters issues displayin ...

htmlcssflexbox

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

javascriptcssreactjstypescript

Retrieving Firebase data asynchronously with Angular and Firestore

Apologies if the title is a bit off, but I'm reaching out here because I'm feeling quite lost and unable to locate what I need online. To be honest, I'm not entirely sure what exactly I'm searching for. Here's my situation: I have ...

angularfirebaseasynchronousgoogle-cloud-firestore

The art of connecting with Angular 2 router and Components

Here are the elements I have: <app-scrollable-area (scrolledDown)="..." class="scrollable-y"> <router-outlet></router-outlet> </app-scrollable-area> I'm wondering how to communicate this event (scrolledDown) to inside ...

angular

Tips for displaying a loading indicator above a form

I've been struggling to figure out how to display a loading indicator on top of my form without messing up the styling... My goal is to show the loading indicator when any action, like deleting an item or changing quantity, is triggered in React.js + ...

javascriptcssreactjsoverlaymobx-react

Images are failing to load in Ionic 3

Currently working on developing an Ionic application and troubleshooting the use of the camera native plugin. The script functions flawlessly in a fresh project, but encounters issues within the current project environment. Initially suspected a problem w ...

javascriptangulartypescriptionic-frameworkbase64

Tips for aligning a flex element child vertically

I am trying to achieve a layout where there are 3 divs vertically centered in one flex container with flex-direction:column. However, I need the 3rd div to be positioned at the bottom of the container. To better illustrate what I am looking for, you can v ...

cssflexbox

AngularJS - Oops! Looks like we encountered an error: [$injector:modulerr]

I have a client-server application and I am facing an issue with this error message: "Uncaught Error: [$injector:modulerr]". Despite searching for solutions, none of them seem to be fixing the problem. Here is my client-side code: angular.module('m ...

javascriptangularjshtmlsocket.io

A unique and dynamic design concept for my website: a zigzagging structure

I am trying to achieve a layout similar to the one at the provided link, with variable sized div tags on the left and right edges. Can someone please assist me in styling the left and right sides accordingly? Key styles I have used: .rightside { margin-l ...

htmlcss

How to effectively utilize `MutationObserver` for monitoring the properties of an `HTMLElement` instead of focusing on its attributes

By using the MutationObserver.observe() method, I am able to monitor changes in a specific attribute. For instance, if I have a Div element and the attribute value is modified, then the designated callback function will be executed. However, if the propert ...

javascripthtml