Tengo un formulario, el cual tiene un botón de guardar cambios, si el formulario es correcto el botón se pone activo, si el formulario no es correcto el botón se pone disabled, quiero que si el botón está activo y el usuario quiere navegar a otro componente o cerrar la pestaña del navegador le alerte ede guardar los cambios
<button class="btn btn-block btn-sm btn-success" [disabled]="f.invalid">Guardar cambios</button>
Alguna idea? He visto que con Javascript se puede controlar el cerrado de la pestaña, pero nada de los componentes