Quería actualizar elementos Dom como Imagen y Texto después de cargar el componente en Angular. Nota: Ambos no tienen identificación pero tienen nombre de clase.
Usé el siguiente código:
@ViewChild('.appnametitle') el: ElementRef; constructor( private renderer: Renderer2, @Inject(DOCUMENT) private document, @Inject(ONEPLACE_JS_URI) private oneplaceJsUri, public cookieConfig: CookieConfig ) { } ngAfterViewInit(): void { this.renderer.setAttribute(this.el.nativeElement, 'innerHTML', 'Test Title Change'); }pero muestra el siguiente error: no se pueden leer las propiedades de undefined (leyendo 'nativeElement')
¿Me podrían ayudar donde lo estoy haciendo mal?
ViewChild no tiene un nombre de clase como selector (una directiva sí ). Entonces puede crear una directiva con el selector de la clase y usar ViewChild preguntando sobre la directiva
@Directive({ selector: '.appnametitle' }) export class SelectDirective { constructor(public el:ElementRef) { } }Y en Componente:
@ViewChild(SelectDirective) selectDirective:SelectDirective ngAfterViewInit(): void { this.renderer.setAttribute(this.selectDirective.el.nativeElement, 'innerHTML', 'Test Title Change'); }Pero esto se usa si no tiene acceso al componente (porque estaba en terceras personas, por ejemplo), de lo contrario, debe repensar el problema de una manera más angular