Как я могу выбрать индекс из коллекции HTMLC в Ionic?

Question

Я хочу выбрать все .message-wrapper элементов, которые я генерирую на моей странице

<div class="message-wrapper" *ngFor="let key of chat.chat_lines_keys" [ngClass]="{
    'neutro': !chat.chat_lines[key].user_id,
    'me': user.id == chat.chat_lines[key].user_id,
    'you': chat.chat_lines[key].user_id && user.id != chat.chat_lines[key].user_id
    }">
    <div class="message">
        <input type="hidden" name="user_id" [value]="chat.chat_lines[key].user_id">
        <input type="hidden" name="line_id" [value]="chat.chat_lines[key].id">
        <p>{{ chat.chat_lines[key].text }}</p>
    </div>
</div>

Когда я выбираю .message-wrapper, он возвращает мне HTMLCollection, но я не могу получить доступ к его дочернему элементу

let messages = this.element.nativeElement.getElementsByClassName("message-wrapper");
console.log(messages); // Returns HTMLCollection
console.log(messages[0]); // Returns null