CODEWITHSUNDEEP
angularangular8angular-ngmodel
Anonymous
Anonymous

Reputation: 23

how to bind value on button click with [(ngModel)]

Here is my code which i am trying,

 <select id="myid" [(ngModel)]="updateId" class="form-control">
 <option value="U-001" >day </option>  
 <option value="U-002" >week</option>
 </select>

Am able to change the updateId and it's working fine with above code. But, i don't need any select drop down functionality. i want same functionality with button click. i have two buttons now as below

<div class="container">
<p> selected {{updateId}} </p>
    <button type="button home-button" id="button1" >Home</button>
    <button type="button contact-button" id="button2">Contact Us</button>
</div>

i want to bind the value whichever button user selects. Suppose if button1 clicks, it should bind ngmodel i.e updateId with "U-001"

Please suggest me how to achieve without any

Upvotes: 0

Views: 7799

Answers (2)

Barremian
Barremian

Reputation: 31125

Not exactly sure what you're looking for, but you could assign values to variables in the event handlers.

<button type="button home-button" (click)="updateId='U-001'" id="button1" >Home</button>
<button type="button contact-button" (click)="updateId='U-002'" id="button2">Contact Us</button>

Update: Set background color

There are multiple ways to set the styling of an element dynamically in Angular. For starters, you could look into ngClass and ngStyle. Here I've declared an object buttons = { button1: false, button2: false } with the keys being the corresponding element IDs that you've defined already. Then we could send the ID using template reference variables (#buttonHome and #buttonContact here) to an event handler like onClick(buttonHome.id). In the handler, we loop through the buttons and flip the flag if the button is pressed. Finally we disable all button colors using the blur event.

Controller

export class AppComponent  {
  updateId: string;
  buttons = { button1: false, button2: false }

  onClick(buttonId) {
    Object.keys(this.buttons).forEach(key => {
      if (key === buttonId) {
        this.buttons[key] = true;
      } else {
        this.buttons[key] = false;
      }
    });
  }

  onBlur() {
    Object.keys(this.buttons).forEach(key => {
      this.buttons[key] = false;
    });
  }
}

CSS

button {
  cursor: pointer;
  height: 40px;
  width: 80px;
  border: none;
  margin: 2px;
}

button,.unselected {
  background-color: lightblue;
}

button,.selected {
  background-color: lightgreen;
}

Template

<button 
  #buttonHome 
  [ngClass]="buttons.button1 ? 'selected' : 'unselected'" 
  type="button home-button" 
  (click)="updateId=='U-001'; onClick(buttonHome.id)" 
  (blur)="onBlur()" 
  id="button1"
>Home</button>

<button 
  #buttonContact 
  [ngClass]="buttons.button2 ? 'selected' : 'unselected'"  
  type="button contact-button" 
  (click)="updateId='U-002'; onClick(buttonContact.id)" 
  (blur)="onBlur()" 
  id="button2"
>Contact Us</button>

Working example: Stackblitz

Since we're looping the collection of buttons for each button press and blur event, it might be slower if too many buttons are involved.

Upvotes: 2

Wasim
Wasim

Reputation: 724

In HTML

<button type="button home-button" (click)="Update('U-001')" id="button1" >Home</button>

<button type="button contact-button" (click)="Update('U-002')" id="button2">Contact Us</button>

In .ts class

public updateId;

Update(value : string)
{
     this.updateId = value;
}

Upvotes: 0

Related Questions