Обращение к DOM элементу с помощью @ViewChild

Сейчас веб разработка это не просто создание сайтов, она давно вышла за эти рамки. Но тем не менее, ни одно веб приложение не обходится без манипуляций элементами на странице в браузере, изменения их внешнего вида или их поведения.

В этой статье я покажу один из методов как в Angular получить доступ к определенному элементу в дереве DOM. Речь пойдет о декораторе @ViewChild.

Что такое @ViewChild

Это декоратор для свойств, который используется для настройки доступа к элементу DOM, а также к дочернему компоненту или директиве из родительского компонента. Нас интересуют манипуляции с DOM элементами, поэтому будем рассматривать только как сделать запрос к элементу, чтобы им управлять.

Получение доступа к элементу

Мы можем сделать запрос к элементу DOM, который имеет ссылочною переменную шаблона в виде строки.

<div #divRef>Какой-то текст в элементе див</div>

В классе компонента, который содержит в шаблоне элемент выше, используем декораторы следующим образом:

@ViewChild('divRef') divRef: ElementRef;

Свойство divRef имеет тип ElementRef и ссылается на нужный нам элемент.

Далее, чтобы получить доступ непосредственно к элементу DOM для манипуляции им, надо использовать свойство nativeElement. Например, так:

this.divRef.nativeElement.textContent = 'Другой текст в див элементе';

Чтобы эта строчка заработала нужно ее использовать после этапа AfterViewInit жизненного цикла Angular приложения, например в методе ngAfterViewInit.

Давайте теперь соберем весь код вместе.

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<div #divRef>Какой-то текст в элементе див</div>',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('divRef') divRef: ElementRef;

  
  ngAfterViewInit() {
    this.divRef.nativeElement.textContent = 'Другой текст в див элементе';
  }
}

В конце хочу упомянуть, что если нужно получить доступ к несколькими элементам, то можно использовать декоратор @ViewChildren.