0xD34F

например

Можно ли использовать `dashboard` селектор в `dashboard.scss`.

Нельзя.

Читайте документацию, так всё сказано:

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

Замените в beforeDialog (это в /app/dialogs/dialogs.service.ts)

return dialogRef.beforeClose();

на

return dialogRef.afterClosed();

А то у вас сейчас следующий диалог открывается до того, как будет закрыт предыдущий, соответственно (как это мне видится, оговорюсь - с angular material не знаком), сначала новый диалог при открытии блокирует и так уже заблокированный скролл, затем старый диалог при закрытии скролл разблокирует.

А в чём проблема-то? Заводите переменную, которая отвечает за количества колонок, привязываете её к вашему mat-grid-list в качестве значения параметра cols, и меняете как вам там нужно. Примерно так.

Проблема в том, что если элемент пометить #name и после этого пытаться в родительском элементе получать его через @ViewChild, то элемент не находится потому что, как я выше говорил, элементы появляются и пропадают динамически

Можно поступить следующим образом: через ViewChild получайте элемент в дочернем компоненте, а в родительском - экземпляры дочерних компонентов через ViewChildren, из которых и доставайте, что вам надо. Выглядеть это может так.

Помогите пожалуйста написать учебный пример чтобы было видно действие и выгода инкапсуляции стилей. Мой вариант тут.

"Помогите"? Да вы и сами справились. Только зачем-то сами же всё и поломали.

непонятно какое действие осуществляет метааргумент encapsulation: ViewEncapsulation.None

Это отключение инкапсуляции стилей компонента.

Есть корневой элемент и есть вложенный элемент. В каждом из них я отключил инкапсуляцию, но в результате к обоим применяются стили из первого. Где логика?

Кажется, вы забыли о том, что у вас в стилях дочернего компонента background закомментирован - потому и применяется стиль из родительского компонента. Уберите комментирование - и оба элемента будут стилизованы в соответствие с правилом из дочернего компонента.

А ещё лучше - прекратите вдобавок отключать инкапсуляцию, и тогда элементы из разных компонентов будут стилизованы каждый по-своему, несмотря на то, что имя класса - одно и то же. Собственно, в этом и состоит, как вы там выразились? - "выгода инкапсуляции" - вы можете в каждом из компонентов определять собственные правила стилей, не беспокоясь о том, что они будут пересекаться со стилями других компонентов.

при нажатии значение меняется у объекта для фильтрации... но не обновляет таблицу

Как сказано в документации по поводу pure пайпов:

Angular ignores changes within (composite) objects.

Наверное, пайп FilterdataPipe стоит сделать impure.

Кроме того, сама фильтрация - даже не знаю, что и сказать, настолько бредово устроена.

Ну и ещё у вас имя одного из свойств - department, а соответствующий фильтр называется departament (откуда-то вылезла a после первой t). И с city тоже непонятно - свойство вложенное, не знаете, что делать, поэтому даже и не начали реализовывать соответствующий фильтр?

Насколько я понял, вам нужно что-то вроде этого, да?

Наверное, стоит использовать animateChild:

import { query, animateChild } from '@angular/animations';

animations: [
  trigger('parentAnimation', [
    transition(':leave', [
      query('@itemAnim', [
        animateChild()
      ])
    ])
  ]),
  trigger('itemAnim', [
    transition(':enter', [
      animate(500)
    ]),
    transition(':leave', [
      group([
        animate('0.5s ease', style({ transform: 'translateY(-20%)', 'height':'0px' })),
        animate('0.5s 0.2s ease', style({ opacity: 0 }))
      ])
    ])
  ])
]

Очевидно, надо перебрать все поля, вместо проверки какого-то конкретного. Например, так:

class FilterPipe implements PipeTransform {
  transform(items: any[], term): any {
    const keys = items.length ? Object.keys(items[0]) : null;

    return term && keys
      ? items.filter(item => keys.some(key => item[key].toString().indexOf(term) !== -1))
      : items;
  }
}

$scope.user = $rootScope.myData

скопированы данные

Не скопированы. При присваивании объектов копируются не значения, а ссылки. Копирование, это чуть посложнее:

$scope.user = Object.assign({}, $rootScope.myData)

Или

$scope.user = { ...$rootScope.myData }

Ну, так, например.

.mergeMap(() => this.httpClient.get('https://api.github.com/users'), (event, users) => ({ event, users }))

Очевидно же - у каждого item'а должно быть собственное свойство, отвечающее за отображение элемента:

$scope.items = [ 1, 2, 3, 4, 5, 6, 7, 8 ].map(n => ({
  value: n,
  show: false,
}));

<li ng-repeat="item in items">
  <a ng-click="item.show = !item.show">toggle</a>
  <div ng-show="item.show">
    hello, world!!
  </div>
  {{ item.value }}
</li>

[innerHTML]="question?.title || ''"

Кажется, забыли присоединить контроллер - не вижу нигде ng-controller="plantCtrl".

Наверное, теряется контекст.

Попробуйте
.catch(this.handleError)
заменить на
.catch(err => this.handleError(err))

Да так же, как и везде - добавляете атрибут type="password".