如何访问Primeng表的style属性

Question

In an angular project, I need to test that the displayed table width of the primeng data table is set to the maxWidth value i assign to it. To do so, i want to call the [style] attribute to get the width and see if its equal to my maxWidth. However, i do not know how to call attributes like this. How do i go about this? Currently i have no clue if I'm going in the correct direction.

I have tried several things but I am not sure of the syntax for it.

<p-table class="p-table" ... [style] = "{width: maxWidth}" >

it('should implement maxwidth', () => {
    const widthDebug: DebugElement = fixture.debugElement;
    const tableWidth = widthDebug.query(By.css('.ui-table .ui-widget'));
    const ptable: HTMLElement = tableWidth.nativeElement;

    expect(ptable.textContent).toContain("width: " + component.maxWidth);

});

expected: success (ptable.textContent contains "width: component.maxWidth") actual: TypeError: cannot read property 'nativeElement' of null

Answer 1

I see that it's now two months after you asked your question, so it's probably too late for my answer to help, but I stumbled across this post while looking up something else about PrimeNG, so I might as well give it a shot.

The problem here is that nativeElement is defined on Dialog class instances of the Angular p-table component. It's not defined on any particular DOM element.

By.css('.ui-table .ui-widget') is going to find a DOM element for you, not an Angular class instance. In particular what will be found is a <div> inside the <p-dialog> DOM element, and it's this <div> that receives the style set via [style]=... .

As your code is written above tableWidth.style.width would contain (as a string) the value of maxWidth that you're expecting to find.