Display loading image when changing img src attribute using angular 2+

Question

I’m starting to use 2+ angler and I’m having a little problem

In an application I am developing I am changing the image atirbuto src for a variable that controls the image url 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

1. Click to change image;
2. Start the loading image;
3. Image that should be displayed starts to be loaded
4. Image that should be displayed ends being loaded
5. Some loading;
6. Image appears where it should.

How can I do that ? Is there any event that is triggered when the image starts to load?

UPDATE 1. I made some changes got something that is functional, in case someone has a better solution I am grateful. follows 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.

private _loading: boolean = true;

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

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