0xD34F

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

Вот здесь url имеет значение null:

await axios.get(url)

Или здесь - state.url является null:

await axios.get(state.url)

Могу даже предположить, откуда этот null берётся. Второй вариант, со стейтом. В мутации getFullArticle (кстати, почему get? - вы тут данные не запрашиваете, а кладёте в стейт, правильнее было бы set) помимо прочего выполняется соответствующее присваивание:

state.url = article.previous

Т.е., как я понимаю, получаете данные статьи, в том числе - ссылку на соседнюю статью. В какой-то момент, у очередной статьи не оказывается соседней, вместо ссылки в previous сидит null.

Что делать - во-первых, проверять непосредственно перед запросом, чем является state.url. Во-вторых, вообще не давать пользователю возможности запрашивать данные, если state.url кривой. Для этого в компоненте сделайте вычисляемое свойство, которое в зависимости от корректности state.url будет принимать значение true или false, и пусть это свойство отвечает за отключение кнопки или сокрытие ссылки или как там у вас организован запрос новых данных.

Рекурсия, конечно же. Функция принимает ul и текущий уровень. Берутся все элементы до следующего с текущим уровнем, оборачиваются в ul, затем следует рекурсивный вызов: свежесозданный ul, текущий уровень + 1.

Например - это если как вы хотели делать, что некорректно, т.к. получается, что ul содержит дочерние ul:

function wrap(ul, level = 0) {
  const
    currLevel = `.level-${level}`,
    nextLevel = `.level-${level + 1}:first`;

  let $li = null;
  while (($li = $(ul).children(nextLevel)).length) {
    const $ul = $('<ul></ul>');
    $ul.append($li.nextUntil(currLevel).addBack().last().after($ul).end());
    wrap($ul, level + 1);
  }
}

Правильно будет добавлять новые ul в li текущего уровня, находящиеся перед элементами следующего уровня:

function wrap(ul, level = 0) {
  const
    currLevel = `.level-${level}`,
    nextLevel = `.level-${level + 1}:first`;

  let $li = null;
  while (($li = $(ul).children(nextLevel)).length) {
    const $ul = $('<ul></ul>');
    $li.prev().append($ul);
    $ul.append($li.nextUntil(currLevel).addBack());
    wrap($ul, level + 1);
  }
}

в бровзере этот метод (на чистом js) срабатывает должным образом

Чё-то я в это не верю.

не знаю, как сделать этот пайп рабочим

Да обычным slice'ом строку нарежьте:

`(${value.slice(0, 2)}) ${value.slice(2, 5)}-${value.slice(5, 7)}-${value.slice(7)}`

Получение логического эквивалента значения. Оператор логического отрицания применяется дважды, например:

!!187 -> !false -> true
!!NaN -> !true -> false

Тот же результат даст Boolean(значение).

for (let i = arr.length; i--;) {
  const exists = arr.hasOwnProperty(i);
  if (exists || !i) {
    arr.length = i + exists;
    break;
  }
}

или

for (let i = arr.length; i-- && !(i in arr); arr.pop()) ;

Оберните кнопки в 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...

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

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