Как в Anuglar взять DOM элемент по событию?

В Angular можно получить доступ к DOM элементу, вызывая методы и события, предоставляемые Angular API. Существует несколько способов получения DOM элемента в Angular в зависимости от того, какую информацию вы хотите получить и какой контроль иметь над DOM элементом.

Первый и наиболее простой способ - это использование переменной привязки шаблона. В шаблоне Angular вы можете привязать переменную к элементу и обращаться к ней в компоненте. Для этого вы можете использовать ViewChild декоратор.

Вот пример:

HTML шаблон:

<button #myButton (click)="onClick()">Click Me</button>

Компонент:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '...',
})
export class MyComponent {
  @ViewChild('myButton') button: ElementRef;

  onClick() {
    console.log(this.button.nativeElement);
  }
}

В этом примере мы создаем переменную myButton с помощью #myButton в шаблоне и затем используем @ViewChild('myButton') декоратор в компоненте для обращения к этой переменной. При клике на кнопку сработает метод onClick(), где мы можем получить доступ к DOM элементу с помощью this.button.nativeElement.

Второй способ - использовать Renderer2 для доступа к DOM элементу. Renderer2 является абстракцией над нативным API браузера и предоставляет возможность управлять элементами DOM безопасным и кросс-браузерным способом. Вы можете получить доступ к Renderer2 в конструкторе компонента и использовать его методы для доступа к DOM элементу.

Вот пример:

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '...',
})
export class MyComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  onClick() {
    const button = this.renderer.selectRootElement(this.el.nativeElement.querySelector('#myButton'));
    console.log(button);
  }
}

В этом примере мы получаем доступ к DOM элементу с помощью this.el.nativeElement.querySelector('#myButton') и затем используем this.renderer.selectRootElement() для получения доступа к DOM элементу.

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

Вот пример:

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '...',
})
export class MyComponent {
  constructor(private el: ElementRef) {}

  onClick() {
    const button = this.el.nativeElement.querySelector('#myButton');
    console.log(button);
  }
}

В этом примере мы получаем доступ к DOM элементу с помощью this.el.nativeElement.querySelector('#myButton') и затем можем выполнять с ним любые операции, такие как изменение стилей, свойств и т.д.

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