Solución:
En realidad, mi comentario de que deberías hacer una console.log(el.nativeElement) debería haberte apuntado en la dirección correcta, pero no esperaba que la salida fuera solo una cadena que representa el DOM Element.
Lo que tienes que hacer para inspeccionarlo de la forma en que te ayuda con tu problema es hacer una console.log(el) en su ejemplo, entonces tendrá acceso a la nativeElement objeto y verá una propiedad llamada innerHTML.
Lo que conducirá a la respuesta a su pregunta original:
let myCurrentContent:string = el.nativeElement.innerHTML; // get the content of your element
el.nativeElement.innerHTML = 'my new content'; // set content of your element
Actualización para un mejor enfoque:
Dado que es la respuesta aceptada y los trabajadores web se están volviendo más importantes día a día (y de todos modos se considera la mejor práctica), quiero agregar esta sugerencia de Mark Rajcok aquí.
La mejor forma de manipular DOM Elements programáticamente está usando el Renderer:
constructor(private _elemRef: ElementRef, private _renderer: Renderer) {
this._renderer.setElementProperty(this._elemRef.nativeElement, 'innerHTML', 'my new content');
}
Editar
Ya que Renderer está en desuso ahora, use Renderer2 en su lugar con setProperty
Actualizar:
Esta pregunta con su respuesta explicaba el console.log comportamiento.
Lo que significa que console.dir(el.nativeElement) sería la forma más directa de acceder a la DOM Element como un Objeto “inspeccionable” en su consola para esta situación.
Espero que esto haya ayudado.
Sugiero usar Render, como sugiere el documento de la API de ElementRef:
… eche un vistazo a Renderer, que proporciona una API que se puede utilizar de forma segura incluso cuando no se admite el acceso directo a elementos nativos. Confiar en el acceso DOM directo crea Acoplamiento estrecho entre su aplicación y las capas de renderizado. que lo hará imposible separar los dos e implementar su aplicación en un trabajador web o Universal.
Siempre utilizar el Renderizador porque hará que su código (o la biblioteca que tiene derecho) pueda funcionar cuando utilice Universal o WebWorkers.
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementProperty(el.nativeElement, 'innerHTML', 'some new value');
}
}
Sin embargo, no parece que Render tenga un método getElementProperty (), así que supongo que todavía necesitamos usar NativeElement para esa parte. O (mejor) pasar el contenido como una propiedad de entrada a la directiva.
Esto se debe a que el contenido de
<p myHighlight>Highlight me!</p>
no se ha renderizado cuando se llama al constructor de HighlightDirective, por lo que todavía no hay contenido.
Si implementa el gancho AfterContentInit, obtendrá el elemento y su contenido.
import { Directive, ElementRef, AfterContentInit } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(private el: ElementRef) {
//el.nativeElement.style.backgroundColor="yellow";
}
ngAfterContentInit(){
//you can get to the element content here
//this.el.nativeElement
}
}