2
I’m using a library called angular-gauge-Chart to insert a gauge gauge gauge in my application.
It works perfectly, however, it has some styles, like style='350px', which are default and I can’t configure.
I could change this style directly in Node-modules, but this would be incorrect and unproductive.
What I need is: When initializing and rendering the component, remove the style style="width: 350px;" who is in the div who owns the class gauge-Chart
This style I cannot configure in angular inbound properties.
Goal:
By virtual DOM, using the class Elementref can I remove this style? I’m really struggling to find material that will teach you how to do this.**
What I want, in with Jquery, would be this:
$(".gauge-chart").removeAttr('style');
How to do this at the angle?
gauge-score.component.ts
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
@Component({
selector: "app-gauge-score",
templateUrl: "./gauge-score.component.html",
styleUrls: ["./gauge-score.component.sass"]
})
export class ScoreDebtorsComponent implements OnChanges {
@Input() dashboardData: any;
public dashData: any = "";
ngOnChanges(changes: SimpleChanges) {
if (changes.dashboardData.previousValue) {
this.dashData = this.dashboardData;
}
}
public canvasWidth = 400;
public needleValue = 100;
public hasNeedle = false;
public centralLabel = "14%";
public name = "Gauge chart";
public bottomLabel = "25";
public options = {
hasNeedle: false,
needleValue: "14%",
needleColor: "gray",
needleUpdateSpeed: 1000,
arcColors: ["rgb(44, 151, 222)", "lightgray"],
arcDelimiters: [99],
rangeLabel: ["0%", "100%"],
needleStartValue: 50
};
}
gauge-score.component.html
<div class="support-dashboard">
<div class="flex-card support-box light-bordered has-text-centered">
<h3 class="box-title has-text-centered">
Score
</h3>
<div class="ring-title has-text-centered">
<rg-gauge-chart
[canvasWidth]="canvasWidth"
[needleValue]="needleValue"
[centralLabel]="centralLabel"
[options]="options"
[bottomLabel]="bottomLabel"
></rg-gauge-chart>
</div>
<div class="ring-title has-text-centered">
<span [ngStyle]="{ color: '#5e6d75' }"
>cadastre mais emails e telefones para melhorar o seu score</span
>
</div>
</div>
</div>
rendered html Below the style I want to remove.
<div _ngcontent-kgc-c7="" class="gauge-chart" style="width: 350px;">