Display loading image while switching img src attribute using angular 2+

I'm starting to use angled 2+ and I'm having a little problem

In an application that I'm developing I'm changing the atirbuto src of the image by a variable that controls the url of the image q should be displayed

I would like to display a loading image when I change the src value of the image, it would be something like

How can I do this? Is there an event that fires when the image starts loading?

UPDATE 1. I made some changes I got something that is functional, in case someone has a better solution I'm grateful. follow code

component.html

<img src='/assets/img/loading.
     [style.display]="!loading ? 'none' : 'block'"/>

<img [src]="modeloSelecionado.modelo_imagem"
     class="img-responsive"
     [style.display]="loading ? 'none' : 'block'"
     (loadstart)="loading = true"
     (load)="loading = false" /> 

component.ts

private _loading: boolean = true;

public get loading(): boolean {
    return this._loading;
}

public set loading(value: boolean) {
    this._loading = value;
}