Question 262196 in Html Question posted in
Some basic documentation can be found here.

Html – how can I change the text inside the button when I make hover on it in angular

enter code here

enter image description here

I need to change the text inside the button when I make hover on it like these photos,
I already did the active but, I need only change the text.

<button
   type="submit"class="btn"
   *ngFor="let available of availableTime; let i = index"
   >
    {{ available.value}} 
</button>
Tags:

2

Answers


  1. 0

    An idea might be to use mouseover and mouseout events on the button element.
    In the HTML template you should do something like:

    <button (mouseover)="changeButtonText()" (mouseout)="resetButtonText()">
  {{ buttonText }}
</button>

    and in the typescript component:

    [...]
export class ExampleComponent {
  buttonText: string = 'Initial text';

  changeButtonText() {
    this.buttonText = 'New text - Hover';
  }

  resetButtonText() {
    this.buttonText = 'Initial text';
  }
}
    Login or Signup to reply.
  2. 0

    create a CSS class for the hover state of the button

    .hover-text {
  color: #fff;
}

    Then, inside component, define a variable to store the text for the hover state:

    hoverText = "Book Now";

    now using ngClass directive to apply the CSS class to the button when it is hovered and change the text to the defined variable

    <button
   type="submit"class="btn"
   *ngFor="let available of availableTime; let i = index"
   [ngClass]="{'hover-text': isHovered}"
   (mouseover)="isHovered = true"
   (mouseout)="isHovered = false"
   >
    {{ isHovered ? hoverText : available.value}} 
</button>

    when the mouse is hovered over the button the "hover-text" class will be applied and the text inside the button will change to the value of the "hoverText" variable

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search