Angular8 - How to remove a <style> from a <div> by its class?

Asked

Viewed 35 times

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;">
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.