En Angular, existen varias maneras de acceder y manipular los atributos de los elementos HTML de forma similar a como se haría con JavaScript puro.

1. Uso de ElementRef

ElementRef proporciona acceso directo al nodo DOM subyacente de un componente. Esto permite insepccionar y obtener sus atributos.

Ejemplo:

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

@Component({
 selector: 'app-parent',
 template: `
   <div data-custom-id="abc123">Contenido de ejemplo</div>
   <button>Mostrar Atributo</button>
 `,
 styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
 @ViewChild('myElement', { static: true }) elementRef!: ElementRef;

 ngOnInit(): void {}

 displayAttribute() {
   const attributeValue = this.elementRef.nativeElement.getAttribute('data-custom-id');
   console.log('Valor del atributo:', attributeValue);
 }
}
 

2. Empleo de Renderer2 para Manipulación Segura

Renderer2 es una abstracción que permite interactuar con el DOM de una manera que es segura para entornos como la renderización del lado del servidor (SSR) o web workers. Proporciona métodos para leer y modificar atributos.

Ejemplo:

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

@Component({
 selector: 'app-parent',
 template: `
   <div data-custom-id="xyz789">Otro contenido</div>
   <button>Mostrar Atributo (Seguro)</button>
 `,
 styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
 @ViewChild('myElement', { static: true }) elementRef!: ElementRef;

 constructor(private renderer: Renderer2) {}

 ngOnInit(): void {}

 displayAttributeSafely() {
   const attributeValue = this.renderer.getAttribute(this.elementRef.nativeElement, 'data-custom-id');
   console.log('Valor del atributo (seguro):', attributeValue);
 }
}
 

3. Manejo de Formularios con NgModel o Form Controls

Para obtener valores de elementos de formulario como inputs, select o textareas, se recomienda usar ngModel (en plantillas) o los controles de formularios reactivos (FormGroup, FormControl).

Ejemplo con NgModel:

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

@Component({
 selector: 'app-parent',
 template: `
   <input placeholder="Escribe algo" type="text"></input>
   <button>Mostrar Valor</button>
 `,
 styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
 textInputValue: string = '';

 ngOnInit(): void {}

 showInputValue() {
   console.log('Valor del input:', this.textInputValue);
 }
}
 

4. Uso de Directivas Personalizadas y ViewChild

Las directivas personalizadas pueden encapsular la lógica para interactuar con elementos y sus atributos, y luego se pueden acceder a ellas usando ViewChild.

Directiva Personalizada (attribute-handler.directive.ts):

import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
 selector: '[appAttributeHandler]',
 standalone: true
})
export class AttributeHandlerDirective implements OnChanges {
 @Input('appAttributeHandler') dataAttributeValue: string = '';

 constructor(private elRef: ElementRef) {}

 ngOnChanges(changes: SimpleChanges): void {
   if (changes['dataAttributeValue'] && this.dataAttributeValue) {
     this.elRef.nativeElement.setAttribute('data-processed', this.dataAttributeValue);
   }
 }
}
 

Componente que usa la directiva:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { AttributeHandlerDirective } from './attribute-handler.directive'; // Asegúrate de la ruta correcta

@Component({
 selector: 'app-parent',
 template: `
   <div appattributehandler="valorInicial">Elemento con directiva</div>
   <button>Mostrar Atributo Procesado</button>
 `,
 styleUrls: ['./parent.component.css'],
 imports: [AttributeHandlerDirective], // Importar la directiva si es standalone
 standalone: true
})
export class ParentComponent implements OnInit {
 @ViewChild('handledElement', { static: true }) handledElementRef!: ElementRef;

 ngOnInit(): void {}

 logProcessedAttribute() {
   const processedValue = this.handledElementRef.nativeElement.getAttribute('data-processed');
   console.log('Atributo procesado:', processedValue);
 }
}
 

La sintaxis variable!: Type;, como en handledElementRef!: ElementRef;, es una aserción de no nulidad. Indica al compilador de TypeScript que confías en que esta variable se inicializará antes de usarse, suprimiendo las advertencias de tipo para propiedades potencialmente nulas o indefinidas. Sin embargo, la responsabilidad de asegurar la inicialización en tiempo de ejecución recae en el desarrollador.