Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Angular8 - Como remover um <style> de uma <div> pela sua classe?

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;">
1 resposta
solução!

Voce pode utilizar o javascript raiz para fazer isso:

no método do seu componente ngAfterViewInit adicione a seguinte linha:

document.querySelectorAll(".gauge-chart")
            .forEach( obj => obj.removeAttribute("style"));

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software