kachurinets

это не ощущение, у вас таки png внутри -

<image id="image0" width="1732" height="308" xlink:href="data:image/png;base64

const serialize = (obj, path) => Object
  .entries(obj)
  .map(([ k, v ]) => {
    const p = path ? `${path}[${k}]` : k;
    return v instanceof Object ? serialize(v, p) : `${p}=${v}`;
  })
  .join('&');

Общую часть похожих кусков кода превращаем в функцию, а то, чем они различаются, будем передавать в эту функцию в качестве параметров:

[
  { del: 'region_id', search: 'regionName' },
  { del: 'district_id', search: 'districtName' },
  { del: 'area_id', search: 'areaName' },
  { del: 'city_id', search: 'cityName' },
  { del: 'place_id', search: 'cityName' },
  { del: 'name', search: 'streetName' },
].forEach(n => {
  if (this.tableParam[n.del]) {
    delete this.tableParam[n.del];
    this.searchForm.get(n.search).patchValue(null);
  }
});

const t = {
  1: 'region',
  3: 'area',
  7: 'street',
};

const newItems = items.map(n => ({
  id: n.id,
  name: n.name,
  ...n.parents_names.reduce((acc, name, i) => (
    acc[t[n.parents_levels[i]]] = name,
    acc
  ), {}),
}));

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

Увеличение - с помощью scale, картинку показывать "плавно" можно с помощью opacity. Как-то так.

//javascript такой: хоба! Функция, которая принимает на вход один параметр 
//и возвращает результат в виде х*х.
//Пожалуй, я ее запомню, потом, может, пригодится
var square = function(x) { return x*x; }; 

//потом javascript такой: ага, надо че т в консоль вывести (то, что в скобках). 
//А че в скобках? Итить-мадрить, это ж та самая функция, котораю я прост запомнил. 
//Надо ее вызвать и на вход подать 12. Тогда мне вернется 12*12 и это я выведу в консоль.
console.log(square(12));

//огонь

А если понятнее, то вот

это не одно и то же

указывая через :
вы говорите, какого типа переменная или что возвращает метод

например
name: string
age: number
getAge() : namber {}

-------------------------------------------
Дженерик устроен сложнее и для другого

В вашем примере, переменная ingredientAdded имеет тип EventEmitter
т.е. справедливо
ingredientAdded : EventEmitter

но
сам EventEmitter должен содержать в себе какой-то тип данных (здесь - Ingredient)
По сути, EventEmitter может принимать примитивы или объекты и его работа будет неизменна
-------------------------------------------
Дженерики приятны, когда вы хотите определить какую-то логику, не завязываясь на тип данных. Что это значит?

Предположим, я хочу метод, который будет принимать на вход что угодно (строка, число, объект и т.д.), а возвращать массив этого чего угодно

function convertToArray<T>(arg: T): T[] {
    let arr: T[];
//здесь логика заполнения этого массива
    return arr;
}

теперь я могу вызывать

let numbers =  convertToArray<number>(5)
let strings = convertToArray<string>('test')
let users = convertToArray<User>(new User())

Теперь у меня есть один метод, который делает одно и то же, но с разными типами данных
-------------------------------------------
Возвращаясь к EventEmitter. Эмиттер создает событие и держит внутри какие-то данные заданного типа
если вы делаете

@Output() ingredientAdded = new EventEmitter<Ingredient>();

, то теперь вы можете вызвать ingredientAdded.emit(myIngredient) , передав в emit экземпляр именно класса Ingredient, а не boolean, например

-------------------------------------------
А вообще, тема дженериков достаточно распространенная (Java, C#, TypeScript...), советую уделить ей внимание