Попытка реализовать пользовательскую кнопку Angular 2 с «нажатым» и «нормальным» состоянием, например Android

Я пытаюсь создать пользовательский buttom, используя тег img в Angular 2, он будет похож на эту часть кода Android

Android-приложение

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/btn" />
</selector>

CSS с помощью div

#btn {
    background: url('img/btn.png');
}

#btn:active {
    background: url('img/btn_pressed.png');
}

Я пробовал использовать CSS с: active, но слишком медленный для меня.

Угловое 2 (не работает)

<img [src]="clicked ? 'img/btn.png' : 'img/btn_pressed.png'" (click)="clicked ? false : true">

Я хочу использовать привязку свойств или двустороннюю привязку данных без внешнего машинописного текста.

Как я могу установить начальное значение для переменной «clicked» и [src] без кода?