mercredi 19 septembre 2018

Angular DOM elements are not showing

Hi I am using an UI Library (forced to, company issue..) which provides an Angular component, which renders a form.

Now I want to disable all of the input fields an buttons inside this form. But the component of the library doesn't provide me the possibility to pass a parameter to change the status to read only.

Now I have no other option to do dirty DOM hacking. However it doesn't seem to work.

Here is my HTML of my own component, where I render the Library Component:

<component-of-the-library #formComponent></component-of-the-library>

Now inside my own components class I reference it:

@ViewChild('formComponent', {read: ElementRef}) formComponent: ElementRef;

However when I use the nativeElement feature and the querySelectorAll() function I don't see the button elements:

ngAfterViewInit() {                
  console.log(this.formComponent.nativeElement);
 console.log(this.formComponent.nativeElement.querySelectorAll('button'))
}

The first line outputs the DOM of the library component. There I also see the buttons.

However the second line just returns an empty NodeList.

Am I missing something?




Aucun commentaire:

Enregistrer un commentaire