Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como usar os dados da api pra customizar o template no angular?

Eu tenho o código abaixo:

<div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 90%;" 
            aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                {{progress}}%
            </div>
        </div>   

para que haja uma alteração na barra de progresso o style=width:90% tem que ser igual ao dado vindo pela api. Se o progresso for 10%, tenho que colocar Style="width:10%" como faço pra atribuir isso no angular?

Grato desde já.

2 respostas

Fala ai aijalon, tudo bem? Para você fazer o binding de style você pode fazer de dois jeitos:

<h1 [style.color]="color">{{title}}</h1>

Ou:

<h1 [ngStyle]="{color: color}">{{title}}</h1>

Em ambos os exemplos o bind será feito utilizando um atributo da classe chamado color.

Espero ter ajudado.

solução!

Eu não tava conseguindo resolver porque o width espera um valor numérico com %. Quando eu fazia [style.width]="progress" dava erro.

Eu resolvi assim. [style.width]="progress + '%'"

Tive que fazer a concatenação. ^^

Obrigado pela ajuda Matheus.

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