Esto es lo que quiero hacer, a continuación. Básicamente, quiero usar mat-icon en angular / material para acceder a los iconos de material y dimensionarlos dinámicamente usando la directiva ngStyle (o una mejor solución si está disponible). Necesito el tamaño dinámico (creo) porque lo que tengo que hacer es establecer un borde circular de 2px alrededor del icono de mat, y el tamaño de ese borde depende del tamaño de la propiedad de tamaño de fuente del icono de mat (p. Ej. un icono de 36 píxeles necesita un borde de 72 píxeles y un radio de borde de 38 píxeles). Todavía estoy aprendiendo Angular / Material y cómo funciona todo, y lo que no quiero hacer es codificar una solución. En cambio, si puedo poner un valor en el selector de componentes, luego usar ese valor como una variable que se puede asignar a las propiedades CSS (por ejemplo, a través de ngStyle), todo funciona.

Nota: El siguiente código a continuación funciona 1/2, pero en la consola (el registro) obtengo undefined y undefinedpx para los valores

EDITADO: Código actual

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';

@Component({
  selector: 'app-circle-icon-container',
  templateUrl: './circle-icon-container.component.html',
  styleUrls: ['./circle-icon-container.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CircleIconContainerComponent implements OnInit {

  @Input() inputSize: string;
  private fontSize = this.inputSize + 'px';

  constructor() {
    console.log(this.inputSize);
    console.log(this.fontSize);

   }

  ngOnInit() { }

}

//component.html

<div class="flex center align-center circle-icon-container" [ngStyle]="{ 'font-size': fontSize, 'background-color': background_color }">
  <mat-icon>business</mat-icon>
</div>

//parent component.html
<div class="icon-container flex is-column align-center">
  <app-circle-icon-container inputSize="300"></app-circle-icon-container>
</div>
0
Mike Earley 4 mar. 2018 a las 22:29

3 respuestas

La mejor respuesta

OK, está funcionando ahora, usando lo siguiente:

//component.ts
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';

@Component({
  selector: 'app-circle-icon-container',
  templateUrl: './circle-icon-container.component.html',
  styleUrls: ['./circle-icon-container.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CircleIconContainerComponent implements OnInit {

  @Input() inputsize: string;
  @Input() backgroundcolor: string;
  public fontSize: string;
  public backgroundColor: string;

  constructor() {

   }

  ngOnInit() {
    console.log(this.inputsize);
    this.fontSize = this.inputsize + "px";
    const sizeContainer = (input) => {
      let container = parseInt(input);
      container = container * 2;
      console.log(container);
      return container;
    }
    const sizeContainerRadius = (input) => {
      let container = parseInt(input);
      container = container*2;
      container += 2;
      console.log(container);
      return container;
    }
    this.containerSize = sizeContainer(this.inputsize) + "px";
    this.backgroundColor = this.backgroundcolor;
    this.radiusSize = sizeContainerRadius(this.inputsize) + "px";
   }

}

//component.html
<div class="flex center align-center circle-icon-container" [ngStyle]="{ 'width': containerSize, 'height': containerSize, 'border-radius': radiusSize }">
  <mat-icon [ngStyle]="{ 'font-size': fontSize, 'background-color': backgroundColor }">business</mat-icon>
</div>

//parent component.html
<app-circle-icon-container inputsize="300" backgroundcolor="#405e7c"></app-circle-icon-container>
0
Mike Earley 5 mar. 2018 a las 16:55

Uso:

@Input('icon-size') size: number
0
standby954 5 mar. 2018 a las 12:40

Debe usar corchetes para pasar las variables del componente primario al secundario:

//parent component.html
<app-circle-icon-container [inputsize]="300" [backgroundcolor]="#405e7c"></app-circle-icon-container>

Puede usar un nombre diferente en su componente hijo, es por eso que usé

@Input('inputsize') youCanNameItAsYouWant: number;
// Where 'inputsize' is the reference, this should be the same what you use in the square brackets [inputsize]
// and you can use 'youCanNameItAsYouWant' variable in your child component wherever you want...

Aquí puede consultar un ejemplo de trabajo: https://embed.plnkr.co/RbMKgf8GtLUEPhwLVwWh/

0
standby954 6 mar. 2018 a las 08:44