0xD34F

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

MutationObserver

вот так

Существует ли где-то пример с этим куском кода, но на чистом js?

теперь существует

Никак. Строки в js иммутабельны. Создавайте новую:

str = str[0].toUpperCase() + str.slice(1);
// или
str = str.replace(/^./, m => m.toUpperCase());
// или
str = Array.from(str, (n, i) => i ? n : n.toUpperCase()).join('');

Никак. Поменяйте инпут и лейбл местами.

UPD. Теперь можно:

.main-footer__box:has(input:focus) label {
  color: red;
}

Добавьте элементам currentPageItems булево свойство, которое будет информировать о наличии ошибки. Назначайте src в зависимости от значения этого свойства. Устанавливайте его в true при обработке события error.

https://jsfiddle.net/L5qp2okt/

Сложить допустимые значения в массив, посмотреть, присутствует ли в этом массиве проверяемое значение:

const names = [ 'DIV', 'P', 'SPAN', ... ];
if (names.includes(el.nextSibling.nodeName)) {
  ...

Получить значение атрибута; получить индекс значения атрибута в массиве; если индекс равен -1 - добавить значение в массив, в противном случае - удалить:

const active = [];

document.addEventListener('click', ({ target: t }) => {
  const value = t.dataset['data-атрибут'];
  if (value) {
    const index = active.indexOf(value);
    if (index === -1) {
      active.push(value);
    } else {
      active.splice(index, 1);
    }
  }
});

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

document.addEventListener('click', ({ target: t }) => {
  if (t.dataset['data-атрибут']) {
    t.classList.toggle('active');
  }
});

const active = Array
  .from(document.querySelectorAll('.active'), n => n.dataset['data-атрибут'])
  .join(', ');

https://jsfiddle.net/uqh4xenr/

Убрать key с элементов .d_day и .li_day. Элементам .d_day добавить общую обёртку, ей в качестве key указать currentPage. Заменить transition-group на transition.

each val, index in [ ... ]
  li
    a(class=index == 0 ? 'active' : '')

UPD. https://codepen.io/anon/pen/PrMmBx?editors=1100

https://codepen.io/anon/pen/aeoYXY

Что знаем и что хотим узнать:

const sourceKey = 'population';
const sourceVal = 2870528;
const targetKey = 'name';

Узнаём:

const [ val ] = jp.query(cities, `$[?(@.${sourceKey} == ${sourceVal})].${targetKey}`);

Одно непонятно - зачем тут jsonpath? Без него проще:

const val = (cities.find(n => n[sourceKey] === sourceVal) || {})[targetKey];

Потому что

'use strict';

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Может кто то знает как решить эту проблему?

Это не проблема. Всё так, как и должно быть.

mounted: {
  submit: () => {

methods: {
  submit() {
    ...

Когда как:

By default null and undefined are subtypes of all other types.

<...>

However, when using the --strictNullChecks flag, null and undefined are only assignable to any and their respective types

<table>
  <thead>
    <tr>
      <th v-for="day in nameOfDays">{{ day }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="week in getCalendar">
      <td v-for="day in week" class="day">{{ day }}</td>
    </tr>
  </tbody>
</table>

.day:hover {
  background: red;
  color: white;
}

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

как числа которые относятся к прошлому и будущему месяцу сделать серыми а не черными в отличии чисел нынешнего месяца?

<tr v-for="(week, i) in getCalendar">
  <td v-for="day in week" :class="classes(i, day)">{{ day }}</td>
</tr>

methods: {
  classes(week, day) {
    return [
      'day',
      ((!week && day > 7) || (week > 2 && day < 7)) && 'other-month',
    ];
  },
  ...

.other-month {
  ...

:disabled="currentPage === 0"

Ну и какой в этом смысл? 0 - это январь, что, нельзя переключаться на предыдущий год? Уберите.

if(this.currentPage % 11 == 0){

Да ну? Так вы будете с февраля переключаться на декабрь. Проверяйте, что номер текущего месяца меньше нуля.

if(this.currentPage+1 % 11 == 0){

И это тоже работает не так, как вам кажется. Во-первых - чтобы получить нулевой остаток от деления, currentPage должен быть равен 10, т.е., после октября у вас будет идти январь. А во-вторых - приоритет операторов, погуглите что это такое. Реально тут вычисляется остаток от деления единицы на одиннадцать, а не суммы, т.е. (учитывая, что currentPage не должен быть отрицательным) условие никогда не будет истинным. Проверяйте, что номер текущего месяца превышает максимальный (декабрь, 11).

this.currentPage == 11;

this.currentPage == 0;

Кто-то неспособен различить операторы присваивания и сравнения.

подскажите пожалуйста что я неправильно делаю

Да всё правильно делаете - не зная язык, пытаетесь осваивать фреймворк.

Синусы, косинусы, перевод из градусов в радианы. Например.