Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

267
Vistas
Angular 2 svg - pasar alto y ancho dinámicamente

Estoy usando Angular 2 y para crear un gráfico de anillos, hice mi implementación a través de svg. La altura y el ancho se han pasado directamente hasta ahora:

html del componente

 <svg height="200px" width="200px"> blah_blah_blah_blah_ </svg>

Lo que quiero es pasar esos valores como entradas del componente principal. Entonces, digamos que en html llamo al componente como:

HTML principal

 <donut-chart [Height]="200" [Width]="200"></donut-chart>

Código componente.js

 @Input() Height: number = 100; @Input() Width: number = 100;

Entonces, mi problema es cómo pasar esas entradas al html del componente .

<svg height="Height" width="Width"> no funciona en ese caso.

Cualquier ayuda es bienvenida.

about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

SVG no admite la vinculación de propiedades, requiere la vinculación de atributos

 <svg attr.height.px="{{Height}}" attr.width="{{Width}}px"> blah_blah_blah_blah_ </svg>

o

 <svg [attr.height.px]="Height" attr.width="{{Width}}px"> blah_blah_blah_blah_ </svg>

Ver también

  • Atributos de datos de Angular 2
  • Doble encuadernación angular 2 con SVG
  • ¿Enlazar los valores de Angular2 en el desplazamiento de parada de gradiente lineal SVG?
  • Angular2 SVG enlace x: href
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda