как получить доступ к элементам внутри другого элемента viewchild в angular

Question

У меня есть такой список переменных.

languages: {languageDesc:string, languageId: string}[] = [];

который загружен в мой компонент вот так.

<button mat-fab color="warn" class="center" (click)="translate()">
</button>
<ul class="list-group" cdkDropList (cdkDropListDropped)="drop($event)">
  <li *ngFor="let language of languages" cdkDrag #languagesElement >
    <div class="row">
      {{ language.languageId }}
      <h1 class="col text-left language-description"> {{ language.languageDesc | uppercase }} </h1>
      <textarea md-maxlength="150" rows="5" md-select-on-focus
        class="textarea" >  </textarea>
    </div>
  </li>
</ul>

Когда я нажимаю кнопку перевода, мне нужно преобразовать список в список объектов. Примерно так для каждого элемента в ul:

{
 languageDesc: desc1El,
 languageId: id1El,
 textAreaValue: textarea1El
},
{
 languageDesc: desc2El
 languageId: id2El,
 textAreaValue: textarea2El
},
...

Мне удалось получить массив элементов li с помощью ViewChildren и преобразовать его в массив.

@ViewChildren('languagesElement') list: any;

let rows: [] = this.list.toArray();

и я знаю, что могу сделать что-то подобное, чтобы получить данные

rows[0].nativeElement.children[0].children[0]...

но этот метод немного опасен и настолько слаб против модификаций.

Итак, мой вопрос. Есть ли способ получить элемент по шаблону внутри другого элемента? Я имею в виду, например, установить шаблон #textarea в текстовой области и сделать что-то вроде

row[0].getChildElement(#textarea)