Привязать событие click к коллекции путей svg во время выполнения в angular 5

Question

В моем проекте Angular 5 я пытаюсь привязать событие click к каждому из путей объекта svg, который загружается динамически.Я успешно связал событие click с одним элементом path, используя следующий код:

constructor(private elemRef: ElementRef) { } 

mapEventInit() {
        this.elemRef.nativeElement.querySelector('.country')
        .addEventListener('click', this.onClick.bind(this));
}  
onClick(event) {
        console.log(event.target.id);
}

Проблема в том, что querySelector позволяет мне связывать только первый элемент в коллекции элементов с.country класс. Есть ли правильный «угловой» способ сделать это или я должен просто использовать обычную машинопись , как указано ниже?

const pathCollection = document.querySelectorAll('.country');
for (let i = 0; i < pathCollection.length; i++) {
  pathCollection[i].addEventListener('click', function(event) {
    console.log(this.id);
  });
}