My code allows me to switch between a light and dark theme for Highcharts, but the changes don't take effect until I refresh the page. Is there a way to update the theme without needing to refresh?
ngAfterViewInit(){
Highcharts.setOptions(getOptions(this.isLightTheme ? ThemeName.PROFESSIONAL_LIGHT: ThemeName.PROFESSIONAL_DARK));
}
To implement a theme change using Highcharts.setOptions, you will need to recreate the chart. In Angular, one way to achieve this is through conditional rendering of two separate highcharts-chart components. Here's an example:
HTML:
<div>
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
*ngIf="isLightTheme;"
>
</highcharts-chart>
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
*ngIf="!isLightTheme;"
>
</highcharts-chart>
<button (click)="changeTheme()">Change theme</button>
</div>
Component:
Highcharts.setOptions(theme2);
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
Highcharts: typeof Highcharts = Highcharts;
isLightTheme = true;
chartOptions: Highcharts.Options = {...};
changeTheme() {
Highcharts.setOptions(this.isLightTheme ? theme1 : theme2);
this.isLightTheme = !this.isLightTheme;
}
}
Docs: https://github.com/highcharts/highcharts-angular#readme
I am facing an issue with my service method that returns an observable. In my component, I subscribe to this observable when it is loaded and have added a console.log in the service to track each time it is called. Upon running my application and checking ...
In my application, I am utilizing a Node.JS express backend along with an Angular 4 frontend. The user ID is stored in JWT tokens, which do not expire. Here is the scenario: The user logs in. A JWT Token is generated and signed (containing the user ID). ...
I am looking to incorporate a redirection feature where, if a user is logged in, they should be directed to the previous page. For example, from Page A to Login (successful) back to PageA. I have tried using the router event subscribe method for this purpo ...
My implementation involves the utilization of DynamicComponentLoader and is based on the Angular2 API Guide. https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html The code structure I have set up looks like this: import {Page} fro ...
Is it possible to create an OTP input using the textfield component of material UI in a React TypeScript project? I've seen examples where people have implemented this with regular input fields, but I'm specifically interested in utilizing the te ...
When working with my application, I am loading text data from a text file: The contents of this txt file are as follows: console.log(myData): ### Comment 1 ## Comment two dataone=1 datatwo=2 ## Comment N dataThree=3 I am looking to convert this data to ...
Upon receiving a response from the API, this is what I get: const myObj = [ { 'tabName': 'Tab1', 'otherDetails': [ { 'formType': 'Continuous' }, { 'formType& ...
Working on a new small application and experimenting with Angular. Encountering an issue where I am making an AJAX GET request upon clicking a button. After receiving the response, I want to set a variable to hold the result, but for some reason the variab ...
Currently, I am working on creating a user interface that features a fixed navigation bar on the left hand side and a responsive content window. Here is what I have implemented so far: <div style="width: 15%; float: left; display: inline;"> <na ...
Disclaimer: I am relatively new to Angular2 and typescript, so please bear with me for any errors. The Challenge: My current task involves subtracting a start date/time from an end date/time, using the result in a formula for my calculation displayed as " ...
Looking to integrate nestjs-config into the custom exception handler below: import { ExceptionFilter, Catch, ArgumentsHost, Injectable } from '@nestjs/common'; import { HttpException } from '@nestjs/common'; import { InjectConfig } fro ...
Just starting out with angular 6 and I'm attempting to toggle the mat-checkbox based on the API response. However, I seem to be having trouble. All the checkboxes are showing as checked even when the API response is false. <div class="col-sm-12" ...
I find myself in a situation where I am interested in utilizing the Proxy feature to implement "load balancing" among a collection of classes. To illustrate my approach, consider the following simple example: class Foo { constructor(private msg: stri ...
const [forecastData, setForecastData] = useState({ forecast: []}); useEffect(() => { let ignore = false; const FETCHDATA = async () => { await fetch(forecast,{ headers : { ...
I am currently working on an ionic angular project and utilizing the ng-lazyload-image plugin. However, I am encountering errors during compilation that look like this: Error: ./node_modules/ng-lazyload-image/fesm2015/ng-lazyload-image.mjs 401:10-19 Can ...
Picture a scenario where we have a single component that needs to be filled with data based on different URL parameters. Consider the following URL patterns: 1. http://localhost:4200/venues/5760665662783488 2. http://localhost:4200/users/2gjmXELwGYN6khZ ...
Following the successful upgrade of my Angular 2.4 app to Angular 5.0, which involved upgrading the CLI and Angular version, I encountered an error when trying to run ng build. Here is the error that appeared: https://i.sstatic.net/awcLD.png. Any suggestio ...
I encountered an issue with one of the API responses, The response I received is as follows: [ {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "US"}, {type: "County", countyNa ...
My attempt to personalize the tooltip of ngx-charts-heat-map led me to this code snippet: <ng-template #tooltipTemplate let-item="item"> <h1> {{getFlag(item.name)}} </h1> <h2>{{item.name}}: {{item.value}}</h2> </ ...
Here is a new interface declaration: export interface ApiClientMetodOptions { initialFilterSatement?: string; fieldsMapping?: { [K in keyof P]?: string; }; requestParams?: IRequestParams<P>; additionalParams?: { [ ...