0xD34F

(click)="openLink($event, item.key)" ---> (click)="item.isOpen = !item.isOpen"

[class.open]="item.key == activeSelection" ---> [class.open]="item.isOpen"

А что, сгруппировать массив data по значениям свойства type - нет, никак? А компонент аккордеона отдельный сделать - тоже никак? Предлагаю всё-таки подумать в эту сторону. Ну а пока - говнокод:

app.component:

opened = {}

get currentTabItems() {
  return this.data.filter(n => n.type === this.tabs[this.activeTab].toLowerCase());
}

<app-navbar [tabs]="tabs" [(activeTab)]="activeTab"></app-navbar>
<app-faq
  *ngFor="let item of currentTabItems;"
  [item]="item"
  [opened]="opened[item.type] === item"
  (toggle)="opened[item.type] = $event ? item : null"
></app-faq>

faq.component:

@Input() opened;
@Output() toggle = new EventEmitter();

<div class="faq__box" [class.isOpen]="opened" (click)="toggle.emit(!opened)">

Почему же? Смысл есть - так вы станете говнокодером.

Пытаться осваивать фреймворк без знания языка всё равно что получать высшее образование не имея среднего - на блестящие результаты можете не рассчитывать.

UPD. Вынесено из комментариев:

мне ж понятно будет

Не будет. Начните с изучения языка.

updateCount(item, change) {
  item.count += change;
}

<button (click)="updateCount(item,  1)">+</button>
<button (click)="updateCount(item, -1)">-</button>

Сделайте поиск дефолтного значения по странице с документаций - увидите, как нужный вам параметр называется на самом деле.

[(ngModel)]="timeFrom"

??

Оберните кнопки в mat-radio-group, которой добавьте [(ngModel)]="filterType" (а с самих кнопок уберите). Ну и пусть изначально filterType будет равен "0" или "1", в зависимости от того, какая из кнопок у вас должна быть активна.

withLatestFrom

UPD. https://stackblitz.com/edit/angular-govuo1

Примерно так. Примерно, да - для некоторых значений ширины/высоты придётся вручную подгонять left/top у ::after.

Добавляем mat-select, делаем его значением массив отображаемых столбцов. Как-то так.

Всё как обычно, вешаете делегированный обработчик клика, смотрите откуда события приходят:

document.addEventListener('click', function(e) {
  const t = e.target;
  if (t.matches('button.apply-button') && t.closest('blabla')) {
    // ...
  }
});

[attr.aria-valuenow]="skill.percent"

В качестве стейта будет объект, содержащий в себе значения всех счётчиков:

const initialState = {
  first: 0,
  second: 0,
};

Экшена достаточно и одного, помимо типа будет указываться имя счётчика:

class CounterAction implements Action {
  constructor(public type: ActionTypes, public payload: string) {}
}

Соответственно, в редьюсер передаём CounterAction, и обновляем указанный счётчик:

function counterReducer(state = initialState, action: CounterAction) {
  switch (action.type) {
    case ActionTypes.Increment:
      return {
        ...state,
        [action.payload]: state[action.payload] + 1,
      };
  ...

Далее, в компоненте покажем счётчики:

<div *ngFor="let item of count$ | async | keyvalue">
  <button (click)="increment(item.key)">Increment</button>
  <div>Current Count: {{ item.value }}</div>
  <button (click)="decrement(item.key)">Decrement</button>
  <button (click)="reset(item.key)">Reset Counter</button>
</div>

Ну и попросим их обновиться:

increment(key) {
  this.store.dispatch(new CounterAction(ActionTypes.Increment, key));
}
...

https://stackblitz.com/edit/angular-ms9wfw?file=sr...

Вызов метода компонента из другого метода (в отличие от шаблона) требует явного обращения к экземпляру компонента - вы забыли this перед preventDefaults в методе handleDrop.

Приноровился к angular 2+

Если это правда, то чтения официальной документации вам будет более чем достаточно. Понимание начнёт приходить вот прям сразу.

если я правильно вас понял...

например