Can someone comment on this TypeScript code in detail?

Question

Angular

I don’t understand Angular well, I need to understand what exactly this code does, who can comment in detail and understandably?

@Component({
  selector: 'app-show-j',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.scss']
})
export class ShowComponentJ implements OnInit {
  @Input() 
  currentJobs: any[];

  public urlpdf: string = environment.routes.host + environment.routes.jobs + '/pdf';

  currentCheckedInputs: Set<HTMLInputElement> = new Set()
//Отправляемые(выходные) данные в компонент родителя
  @Output() 
  onDelete: EventEmitter<number[]> = new EventEmitter();

//возвращаем наш список чек лист
  @ViewChildren('checkedJobs')
  checkedJobs: QueryList<HTMLInputElement>

//привязываем событие  change к нашему методу osSelect
  @HostListener('change', ['$event.target'])
  onSelect(target){
    this.checkedJobs.forEach((elem: any)=>{
      // console.log(elem.nativeElement.checked , target)
      if(elem.nativeElement.checked && elem.nativeElement == target){
         this.currentCheckedInputs.add(elem)
      }else if( !elem.nativeElement.checked){
        this.currentCheckedInputs.delete(elem)
      }
    })
    let arrId = [];
    this.currentCheckedInputs.forEach((elem: any)=>{
      arrId.push(+elem.nativeElement.id)
    })
    this.onDelete.emit(arrId)
    
  }
  constructor(private router: Router) { }

  ngOnInit() {
  }

}

Answer 1

Looks like a child component of some other component, i.e. used inside something. I would say that the task of this component is to render a list of tasks from the currentJobs variable passed (which has an @Input() decorator on top - this is the input data). Everything in the show.component.html template is rendered.
@HostListener('change', ['$event.target'])is an eventListener throughout the component, i.e. clicking anywhere inside the component will call this function. This function iterates through all the elements in checkedJobs (the list of checkboxes in the template) and checks if they are checked or not. If yes, it adds a checkbox to a separate Set (it's like an Array but with uniques) currentCheckedInputs, and if not checked, it deletes it. After that, it runs through currentCheckedInputs, collects the IDs of the HTML elements and passes it to the parent component via this.onDelete.emit. The parent component most likely listens to this event and then does something with the received information.
The parent component most likely contains the following construction in its template:

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