Звернення до елемента DOM за допомогою @ViewChild

Зараз веб-технологія це не просто створення сайтів, вона давно вийшла за ці рамки. Проте, жодна веб-додаток не обходиться без маніпуляцій елементами на сторінці в браузері, зміни їх зовнішнього вигляду або їх поведінки.

У цій статті я покажу один з методів, як Angular отримати доступ до певного елемента в дереві DOM. Йтиметься про декоратора @ViewChild.

Що таке @ViewChild

Це декоратор для властивостей, який використовується для налаштування доступу до елемента DOM, а також до дочірнього компонента або директиви батьківського компонента. Нас цікавлять маніпуляції з DOM елементами, тому розглядатимемо лише як зробити запит до елемента, щоб ним управляти.

Доступ до елемента

Ми можемо зробити запит до елемента DOM, який має посилальну змінну шаблону у вигляді рядка.

<div #divRef>Якийсь текст в елементі див</div>

У класі компонента, який містить у шаблоні елемент вище, використовуємо декоратори таким чином:

@ViewChild('divRef') divRef: ElementRef;

Властивість divRef має тип ElementRef і посилається на потрібний елемент.

Далі, щоб отримати доступ безпосередньо до елемента DOM для маніпуляції ним, треба використовувати властивість природногоелемента. Наприклад, так:

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.