Mikhail Osher

Почитайте про throttle/debounce.
В Вашем случае - debounce.

https://remysharp.com/2010/07/21/throttling-functi...
https://css-tricks.com/the-difference-between-thro...

<button ng-click="removeAddr(allowedMac)">remove</button>

var allowedMacs = [];

function removeAddr(allowedMac) {
  $http.delete('/macs/' + allowedMac.mac).then(function (response) {
    if (response.success) {
      allowedMacs.splice(allowedMacs.indexOf(allowedMac), 1);
  });
}

scopes + colors для scope

Вообще, для этого даже есть специальный HTTP Status Code.

https://developer.mozilla.org/en-US/docs/Web/HTTP/...

У меня, например, написано так. По /users/** - там signup, signin, signout, поэтому всем есть доступ.
Остальное только для авторизованных. Можете другие правила написать.

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            .antMatchers("/ping", "/users/**")
                .permitAll()
            .anyRequest()
                .hasRole("USER");
    }

Контейнеру

display: flex
flex-direction: column

Большому
flex-grow: 2

Дальнейший тюнинг уже по требованиям делать (responsive или нет, фикс размеры или нет итд)

Function bind.

::obj.method => object.method.bind(object)

Только учтите, что Function.prototype.bind всегда возвращает новую функцию.
То есть, следующий код не снимет обработчик

class Foo {
  onInit() {
    this.addListener('ready', ::this.onReady);
  }
  
  onDestroy() {
    this.removeListener('ready', ::this.onReady);
  }
  
  onReady() {
    // не будет снят в removeListener
  }
}