How to refresh a component or the page after replacing a class with ngClass

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
maplion
Posts: 23
Joined: 17 Jan 2017, 04:45

03 Apr 2017, 21:25

Scenario: I have an Ultima chart that I want to expand/contract based on a button click. I chose to do this with ngClass and not ngIf because I do not want a new instance of the chart when the button is clicked.

Question: I figured out how to change the ngClass of a component with a conditional statement that can be toggled by a button. I want to use this to change a primeNg ui grid element (e.g. ui-g-12 -> ui-g-6 toggle). I got this to work, but it only snaps into place after I change the browser window size or something to get it to refresh or rerun the behind-the-scenes code related to that class. Is there a way to call this kind of refresh in code to get the PrimeNg class to refresh (or just the whole page) and, if so, what is the proper/preferred way of doing so?

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

07 Apr 2017, 16:51

We will review this and get back to you.

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

12 Apr 2017, 13:09

In the scenario charts needs to get updated. We implemented a built-in change detection for charts. When the data of chart changed, change detection will apply to the page. In other cases when a class change page will not be refreshed there should be a trigger for change detection. You can apply an event when your class change for example blur.

maplion
Posts: 23
Joined: 17 Jan 2017, 04:45

13 Apr 2017, 09:26

Hi DarthMaul,

So just to clarify, if I am doing something like this:

Code: Select all

<div [ngClass]="expandChart ? 'ui-g-12 ui-lg-12' : 'ui-g-12 ui-lg-6'">
    <app-chart></app-chart>
</div>
<p-toggleButton [(ngModel)]="expandChart" onLabel="Collapse Charts " offLabel="Expand Charts " [style]="{ 'width': '150px'} "></p-toggleButton>
and I want the chart to change size based on my toggle (no data changes), then it changes, but only if I do something like change the size of the browser.
You're suggesting that I bind an on blur event, which would trigger after the user's mouse moves off the button to cause a refresh, is that correct? If that were to work, what am I calling to refresh (what code am I using)? I need to be able to trigger the browser to read (refresh) the primeng directives, the same as is triggered by a browser resizing.

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

14 Apr 2017, 10:41

Hi,

I replicated the problem and it's about togglebuttons work principle if you use button instead it's going to be work fine.

Code: Select all

<div [ngClass]="expandChart ? 'ui-g-12 ui-lg-12' : 'ui-g-12 ui-lg-6'">
    <p-chart type="line" [data]="chartData" responsive="true"></p-chart>
</div>
<button pButton (click)="handleChange($event)">CHANGE</button>

Code: Select all

handleChange(e) {
    this.expandChart = !this.expandChart;
}

maplion
Posts: 23
Joined: 17 Jan 2017, 04:45

16 Apr 2017, 07:48

Thank you.

So I tried this and it does work perfectly for expansion, but then it seems to have a similar issue on toggling back to collapse. I end up with both charts at the expanded sizes trying to fit side-by-side into the ui-g-6 grid and overlapping on each other. Again, if I change browser size, it fixes the chart sizes and they return to their smaller size.

maplion
Posts: 23
Joined: 17 Jan 2017, 04:45

16 Apr 2017, 08:53

Digging into it a little bit more, it seems that it works as intended in a sort of middle-sized browser window, but if I go small, it doesn't expand the charts and if I go large, the charts expand as intended, but then collapse with overlap. Here an simplified excerpt of my html:

Code: Select all

<div class="ui-fluid">
    <div class="ui-g">
        <div class="ui-g-12">
            <div [ngClass]="expandCharts ? 'ui-g-12 ui-lg-12 ui-md-12' : 'ui-g-6 ui-lg-6 ui-md-12'">
                <app-chart></app-chart>
            </div>
            <div [ngClass]="expandCharts ? 'ui-g-12 ui-lg-12 ui-md-12' : ui-g-6 ui-lg-6 ui-md-12'">
                <app-chart2></app-chart2>
            </div>
        </div>
        <div class="ui-g-12">
            <div class="ui-g-12 ui-lg-6">
                <button pButton (click)="toggleChartsExpansion()" label="Toggle Charts Expansion"></button>
            </div>
        </div>
    </div>
</div>

maplion
Posts: 23
Joined: 17 Jan 2017, 04:45

24 Apr 2017, 02:01

I got this to mostly work using something like the following:

Code: Select all

<div class="ui-fluid">
    <div class="ui-g">
        <div class="ui-g-12">
            <div [ngClass]="expandCharts ? 'ui-g-12 ui-xl-12 ui-lg-12 ui-md-12 ui-sm-12' : 'ui-g-6 ui-xl-6 ui-lg-6 ui-md-12 ui-sm-12''">
                <app-chart></app-chart>
            </div>
            <div [ngClass]="expandCharts ? 'ui-g-12 ui-xl-12 ui-lg-12 ui-md-12 ui-sm-12' : 'ui-g-6 ui-xl-6 ui-lg-6 ui-md-12 ui-sm-12''">
                <app-chart2></app-chart2>
            </div>
        </div>
        <div class="ui-g-12">
            <div class="ui-g-12 ui-lg-6">
                <button pButton (click)="toggleChartsExpansion()" label="Toggle Charts Expansion"></button>
            </div>
        </div>
    </div>
</div>
I am still having issues where it "sticks" to being the smaller size when expanded from small-to-large, but stacked on top of one another until the browser is resized; this seems to be on really large windows (>1844 px or >921px each side-by-side) and in an area where the canvas sizes are around 395px-420px side-by-side/790px-840px.

When it works as intended, watching the style changes within Chrome, the

Code: Select all

<canvas style="display: block; width: 1553px; height: 776px;" width="1553" height="776"></canvas>
part of the chart changes to

Code: Select all

<canvas style="display: block; width: 777px; height: 388px;" width="777" height="388"></canvas>
along with my style changes. When it doesn't work, this code doesn't change at all.

Also of note, viewing the <canvas> tag in Chrome as I move things, when the two charts are side-by-side, when the canvas width hits 922px width each, the two charts compete for space and toggle back and forth between around 917px and 924px really, really fast; this particular "transition" point is where things no longer work properly past, but at a canvas width of 921px each and below, they seem to work as intended as the canvas style changes with primeng class changes (such as with the toggle button). I discovered this phenomenon is directly tied to the ui-g tag, without which things do not look correct; but if removed, then there isn't the crazy alternating chart spot and the point of the toggle not working moves to a bit larger (but still doesn't work as intended) [as an aside, it would be nice if there was more detailed documentation on your grids and how to use them].

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

24 Apr 2017, 14:04

Thanks for the information and your feedbacks we will discuss this.

Regards

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests