Estou usando uma biblioteca chamada angular-gauge-chart pra inserir um gŕafico de gauge na minha aplicação.
Ela funciona perfeitamente, porém, ela possui alguns estilos, como style='350px', que são default e eu não consigo configurar.
Eu poderia alterar esse estilo diretamente no node-modules, mas isso seria incorreto e improdutivo.
O que eu preciso é: Ao inicializar e renderizar o componente, que seja removida o style style="width: 350px;" que está na div que possui a classe gauge-chart
Este style eu não consigo configurar nas inbound properties do angular.
Objetivo:
Pelo virtual DOM, utilizando a classe ElementRef eu consigo remover esse style? Eu realmente estou tendo dificuldades para achar material que ensine como fazer isso.**
O que eu quero, em com JQuery, seria isso:
`$(".gauge-chart").removeAttr('style');`
Como fazer isso no angular?
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>
html renderizado Abaixo o style que eu quero remover.
<div _ngcontent-kgc-c7="" class="gauge-chart" style="width: 350px;">