0xD34F

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

Angular ignores changes within (composite) objects.

$('.pups').each(function() {
  this.innerHTML -= -2;
});

// или

$('.pups').text((i, text) => Number(text) + 2);

// или

document.querySelectorAll('.pups').forEach(n => {
  n.innerText = -~-~n.innerText;
});

// или

for (const n of document.getElementsByClassName('pups')) {
  n.textContent = parseInt(n.textContent) + 2;
}

могу ли я теперь использовать его на странице как...

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

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 }))
      ])
    ])
  ])
]

if (this.paused) {
  this.play();
} else {
  this.pause();
}

// или

this[this.paused ? 'play' : 'pause']();

Сделать замену при нажатии кнопки Enter?

• Многократные вызовы setInterval - при каждом событии scroll (из-за этого счётчики работают гораздо быстрее, чем запланировано)
  
• Общая для всех счётчиков переменная текущего значения (вследствие чего шаг счётчиков вовсе не единица)
  
• Неверное условие окончания работы счётчика; или неверное место увеличения текущего значения счётчика - после его перезаписи (отсюда несоответствие заданного и реального максимальных значений счётчиков)
  
• После того как все счётчики завершили свою работу вы не прекращаете вызывать count (да, внешне это никак не проявляется, но всё равно - как-то небрежно)
  

let intervalId = null;

$(window).on('scroll', function() {
  const scr = $(this).scrollTop();
  const elem = $('.count-wrapper').offset().top;

  if (scr > elem - 400 && !intervalId) {
    intervalId = setInterval(count, 10);
  }
}).scroll();

function count() {
  let countEnd = true;

  $('.count span').each(function() {
    const num = $(this).data('num');
    const currNum = $(this).text();

    if (currNum < num) {
      $(this).text(+currNum + 1);
      countEnd = false;
    }
  });

  if (countEnd) {
    clearInterval(intervalId);
  }
}

на второй возникает ошибка, что я делаю не так?

как лучше реализовать, чтобы замена символа происходила в том же окне

data: () => ({
  input: '',
}),
watch: {
  input(v) {
    this.input = v.split('1').join('2');
  },
},

<textarea v-model="input" @input="onInput"></textarea>

data: () => ({
  input: '',
}),
methods: {
  onInput() {
    this.input = this.input.split('1').join('2');
  },
},

Все делал по этой документации...

<section v-if="show" transition="fade"></section>

<transition name="fade">
  <section v-if="show"></section>
</transition>

transition(name="fade")
  section(v-if="show")

{{#Status}}
  <div>{{Title}}</div>
  {{#Items}}
    <div>{{Name}}: {{Count}}</div>
  {{/Items}}
{{/Status}}

$elems.not(i => i % N).addClass('xxx');

// или

elems.forEach((n, i) => n.classList.toggle('xxx', !(i % N)));

// или

for (let i = 0; i < elems.length; i += N) {
  elems[i].classList.add('xxx');
}

$str = '< p > text </p>';

$count = 0;
$str = preg_replace_callback('/< ?\/?\w+ ?\>/', function() use(&$count) {
  $count++;
  return "#p$count";
}, $str);

$str = '< p > text </p> <b> fdsgdfsg</b> <p>???</p> <div>hello, world!!< /div>';

$count = [];
$str = preg_replace_callback('/< ?\/?(\w+) ?\>/', function($matches) use(&$count) {
  $key = $matches[1];
  $count[$key] = isset($count[$key]) ? $count[$key] + 1 : 1;
  return "#$key$count[$key]";
}, $str);

array2.forEach(n => {
  const obj = array1.find(m => m.name === n.name);
  if (obj) {
    Object.assign(obj, n);
  } else {
    array1.push({ ...n });
  }
});

$(document).on('click', '[data-slide-to]', function() {
  $(this).closest('.carousel').carousel(+this.dataset.slideTo);
});

<div class="tab-headers">
  <button data-id="1">69</button>
  <button data-id="2">187</button>
  <button data-id="3">666</button>
</div>

<div class="tab-contents">
  <div data-id="1">hello, world!!</div>
  <div data-id="2">fuck the world</div>
  <div data-id="3">fuck everything</div>
</div>

.tab-contents div {
  display: none;
}

.tab-contents div.active {
  display: block;
}

.tab-headers button.active {
  background: red;
  color: white;
}

const headerSelector = '.tab-headers button';
const contentSelector = '.tab-contents div';
const activeClass = 'active';


// делегирование, назначаем обработчик клика один раз для всех кнопок;
// соответствие кнопок и блоков устанавливаем через равенство атрибутов
document.addEventListener('click', e => {
  const header = e.target.closest(headerSelector);
  if (header) {
    const { id } = header.dataset;
    const toggle = n => n.classList.toggle(activeClass, id === n.dataset.id);
    document.querySelectorAll(headerSelector).forEach(toggle);
    document.querySelectorAll(contentSelector).forEach(toggle);
  }
});

// или, назначаем обработчик клика каждой кнопке индивидуально;
// соответствие кнопок и блоков устанавливаем через равенство индексов
const headers = document.querySelectorAll(headerSelector);
const contents = document.querySelectorAll(contentSelector);

headers.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(headers, this);
  const toggle = (n, i) => n.classList.toggle(activeClass, i === index);
  headers.forEach(toggle);
  contents.forEach(toggle);
}

'1 2 3 4 5 6 7 8 9 0'.replace(/([^ ]+ [^ ]+) /g, '$1;') // "1 2;3 4;5 6;7 8;9 0"