Pavel Pikat

HttpClient не создает классы, вам нужно вызывать конструктор вручную, например через map

this.http.get('api/namesurname')
.pipe(
    map((resp) => resp.data.map(item => new NameSurName(item)),
}
.subscribe((resp) => {
    this.nameSurName = resp.data // {name: 'Вася'} 
  })

export class NameSurName {
  name: string;
  surname: string = 'Иванов'

constructor(props: Partial<NameSurName >) {
   Object.assign(this, props);
}

Выглядит как дочерний компонент какого-то другого компонента, т.е. используется внутри чего-то. Я бы сказал что задача этого компонента - отрендерить список задач из передаваемой переменной currentJobs (у которой сверху декоратор @Input() - это входные данные). Рендерится все в шаблоне show.component.html.

@HostListener('change', ['$event.target']) - это eventListener по всему компоненту, т.е. клик в любом месте внутри компонента вызовет эту функцию. Эта функия пробегается по всем элементам в checkedJobs (список чекбоксов в шаблоне) и проверяет, отмечены ли они или нет. Если да - добавляет чекбокс в отдельный Set (это типо Array но с униками) currentCheckedInputs, а если не отмечен - удаляет. После этого пробегается уже по currentCheckedInputs, собирает айди HTML элементов и передает родительскому компоненту через this.onDelete.emit. Родительский компонент скорее всего слушает это событие и что-то дальше делает с полученной инфой.

Ротительский компонент скорее всего содержит такую конструкцию у себя в шаблоне:

<app-show-j [currentJobs]="jobs" (onDelete)="handleDeleted($event)"></app-show-j>