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?
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.
Please note that response time for technical support is within 3-5 business days.
We will review this and get back to you.
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.
Hi DarthMaul,
So just to clarify, if I am doing something like this:
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.
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>
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.
Hi,
I replicated the problem and it's about togglebuttons work principle if you use button instead it's going to be work fine.
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;
}
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.
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.
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>
I got this to mostly work using something like the following:
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 part of the chart changes to 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].
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>
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>
Code: Select all
<canvas style="display: block; width: 777px; height: 388px;" width="777" height="388"></canvas>
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].
Thanks for the information and your feedbacks we will discuss this.
Regards
Regards
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests