0xD34F

Во-первых - вы явно путаете ширину с высотой. Во-вторых - [attr.viewBox]="'0 0 100 ' + bla".

Я так понимаю, список месяцев должен разворачиваться по клику на год. Добавьте свойство activeYear, в обработчике клика выполняйте соответствующее присваивание, а в список месяцев (кстати, у вас там косячок - элементом списка является не ul, а li, так что ngFor стоит переместить) добавьте *ngIf="year === activeYear". Типа так:

activeYear = null;

log(year) {
  this.activeYear = this.activeYear === year ? null : year;
}

<div class="middle-content" *ngFor="let year of years">
  <a class="middle-content_top-indent" (click)="log(year)">{{ year }}</a>
  <ul class="list-of-month" *ngIf="year === activeYear">
    <li *ngFor="let month of months">
      <span class="list-of-month__marker"></span>
      <a href="#">{{ month }}</a>
    </li>
  </ul>
</div>

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

Сам элемент - с помощью ViewChild. Ну а дальше - getComputedStyle.

А зачем тут использовать регулярные выражения? Всё гораздо проще: !!str.trim().

Впрочем, регулярное выражение тоже не сильно сложное: /[^\s]/.test(str).

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

идея была в том, чтобы поставить регулярное выражение в паттерн валидации ангуляр формы

Тогда так попробуйте: [pattern]="'.*\\S.*'".

<tr *ngFor="let monitoring of filteredMonitorings ">
    <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
</tr>

Здесь вы обходите массив, и на каждом шаге суммируете все его элементы. Конечно, результаты будут одинаковыми.

Если надо выводить отдельные элементы, то вместо общей суммы надо показывать значение из текущего объекта:

<tr *ngFor="let monitoring of filteredMonitorings ">
  <td style="text-align: center">{{ monitoring.count }} </td>
</tr>

Если надо вывести сумму - избавьтесь от ngFor:

<tr>
  <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
</tr>

Так? Ну или кастомный фильтр можно сделать.

И еще почему всегда первый элемент в опций виден как undefined ?
И если убрать ng-model то 1-ая опций undefined не будет.

Открываем документацию, и видим, что

If the viewValue of ngModel does not match any of the options, then the control will automatically add an "unknown" option, which it then removes when the mismatch is resolved.

Нет у вас в компоненте recepies одноимённого массива, он находится в recipie-list. Очевидно, этот массив надо перенести в recepies (тогда его можно будет обойти с помощью ngfor для создания экземпляров recipies-detail), а в recipie-list передавать его как параметр.

Вам тут не нужен jquery, если уже используете angular. Добавляете в компонент свойство, которое будет содержать ссылку на выбранный объект и устанавливаете его значение по клику. Добавляете элементам класс, если выбранный объект совпадает с текущим:

<div
  *ngFor="let user of users"
  [class]="active === user ? 'active' : ''"
  (click)="active = user"
>

например

А не многовато ли у вашего ngModel скобок?

А как выглядит элемент массива ticket? В смысле - есть ли у него свойство ticket, по которому вы пытаетесь фильтровать? Я бы предположил, что вы просто немного запутались в именах свойств и вместо несуществующего ticket (странно же - массив и свойства его элементов имеют одинаковые имена) должно использоваться какое-то другое свойство... например payeer, которое вы выводите в шаблоне. Или ещё что-то.

А инициализировать свойство data кто будет? Или вы думаете оно в режиме самообслуживания назначит себе что-то отличное от undefined?

Делаю вроде все по документации ангулар!

Да ну? Открываем документацию, смотрим примеры использования Injectable и... Споткнулись вы в самом начале - не смогли его правильно импортировать. У вас:

import { Injectable } from '@angular/compiler/src/core';

В документации:

import { Injectable } from '@angular/core';

При создании SVG элементов надо указывать пространство имён. Т.е., замените
this.renderer.createElement('svg');
на
this.renderer.createElement('svg', 'svg');

Ну и соответственно
this.renderer.createElement('circle');
на
this.renderer.createElement('circle', 'svg');

Мне этот механизм не понятен.

Обработка события selectedColorChange осуществляется автоматически - поскольку задана двусторонняя привязка для свойства selectedColor.

Как это можно понять, это документированная возможность?

Документированная.

Неправильно задаёте начальное значение. Вырезаем [selected], а в методе createSubForm вместо массива всех возможных значений в конструктор FormControl передаём одно. Типа так.

Есть ли причины так не делать?

Уместнее спросить - есть ли причины так делать? Мне таковые не известны. Если хотите повторно выполнить какой-то код из хука в произвольный момент - вынесите его в отдельный метод, и вызывайте этот метод.

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