How can I change an icon on hover in Angular?

Question

I have an angular component that I want to change the icon on hove to a different one. Here is the markup:

  <app-pill-cta-icon color="white" [name]="'Request an Appointment'" [text]="'Request an Appointment'" (mouseout)='[imgsrc]="'../assets/black-calendar.svg'"' (mouseover)='[imgsrc]="'../assets/white-calendar.svg'"'></app-pill-cta-icon>

from the ts file:

@Component({
  selector: "app-pill-cta-icon",
  // templateUrl: "./pill-cta-icon.component.html",
  template: `
    <a
      href="{{ url }}"
      type="button"
      class="pill-cta-icon {{ color }}-cta btn {{ modifiers }}"
      name="{{ name }}"
      aria-label="button"
      role="button"
    >
      <p class="btn-text">
        <span class="icons" *ngIf="imgsrc"
          ><img src="{{ imgsrc }}" width="24"/></span
        >{{ text }}
      </p>
    </a>
  `,
  styleUrls: ["./pill-cta-icon.component.scss"]
})

export class PillCtaIconComponent implements OnInit {
  @Input() url: string;
  @Input() name: string;
  @Input() text: string;
  @Input() color: string;
  @Input() imgsrc: string;
  @Input() modifiers: string;

  constructor() {}

  ngOnInit() {}
}

But that doesn't seem to work. I can't immediately tell what's missing.

Answer 1

The way you do it, is not supported by Angular. In the component where you use the app-pill-cta-icon component, I would add a parameter, where you store the current URL of the image, in the example it has the name imageSource . Then you can do the following:

<app-pill-cta-icon color="white" 
  [name]="'Request an Appointment'"
  [text]="'Request an Appointment'"
  [imgsrc]="imageSource"
  (mouseout)="imageSource = '../assets/black-calendar.svg'"
  (mouseover)="imageSource = '../assets/white-calendar.svg'">
</app-pill-cta-icon>