alexkhismatulin

По клику либо вешаешь дополнительные стили на одно изображение и убираешь с другого, либо вешаешь/убираешь классы. Вот так.

Это лучше делать немного по-другому - вместо того, чтобы слушать изменения scope, лучше привязаться к событию инпута и исходить уже из этого. Еще одним преимуществом привязки именно к события является то, что ты можешь отменить изменение до того, как произойдет рендер. В случае наблюдения за значением в scope ты в любом случа сделаешь 2 рендера инпута: сначала отрисуешь с недопустимым символом, а затем заменишь значение на допустимое(в примере на доли секунды появляется невалидное значение, а затем снова исчезает).
Насчёт таймаута - это один из способов применить апдейты к view части. Чтобы ангуляр отрисовал новое значение, ему нужно совершить digest цикл - то есть пройти по значениям и сравнить их. $timeout - один из безопасных способов это сделать, так как после отработки он запускает digest цикл.

Вот пример того, как это можно сделать.

В твоём примере директива не нужна - ты просто делаешь watch из котроллера и меняешь значение, если нужно.

Ты забыл ссылку на контроллер:

<div>
    Status: {{status ? status : "Waiting..."}}<br>
    Finished: {{myCtrl.finished}}
</div>

Или записывай значение finished в scope вместо контроллера:

$scope.$on('on-finish', (event, endTime, id) => {
  // колбэк отрабатывает, но finished в шаблоне не обновляется
  $scope.$endTime = endTime;
  $scope.finished = status = 'Timer ' + id + ' finished at ' + endTime;
  alert(this.finished);
})

Посмотри доки по обработке ошибок в ангуляре.
В объекте ошибки есть поле error - в нем и будет лежать твой JSON:

this.service.login(form.value).subscribe(
  (res: any) => {
    if(res.token) {
      localStorage.setItem('token', res.token);
      this.router.navigateByUrl('/home');
    }
    else {
      if (res.message) {
        this.toast.error(res.message,'ERROR');
      }
    }
  },
  (err) => {
    console.log(err.error);
  }
);

Посмотри, что есть в объекте ошибки в песочнице, пригодится

Есть отличная библиотека для тостов - React-Toastify. Вполне можно использовать её или, как минимум посмотреть её исходники, если хочется сделать что-то своё.
Что касается редакса, здесь не должно быть больших сложностей - по какому-нибудь action'у дергаешь тост нужного типа и всё.

Смысл этого правила в том, чтобы в useEffect явно было видно, как зависимости влияют на выполняемые в эффекте действия. В твоём случае то, как data влияет на вызов getList в эффекте, неочевидно.

Как можно решить:

1. Добавить в getList параметр data, это сделает зависимость явной:

useEffect(() => {
  getList(data)
}, [data])

2. Если ты не хочешь следовать правилу, отключи его в .eslintrc:

{
  "plugins": ["react-hooks"],
  // ...
  "rules": {
    // ...
    "react-hooks/exhaustive-deps":  "off"
  }
}

3. Если хочешь отключить его единожды:

useEffect(() => {
  getList()
}, [data]) // eslint-disable-line

или

/* eslint-disable react-hooks/exhaustive-deps */
useEffect(() => {
  getList()
}, [data])
/* eslint-enable react-hooks/exhaustive-deps */