Set CSS values using a value set on component selector (Angular 5)

Question

Here's what I want to to, below. Basically, I want to use mat-icon in angular/material to access material icons, and dynamically size them using the ngStyle directive (or a better solution if available). I need the dynamic sizing (I think) because what I need to do is to set a circular 2px border around the mat-icon, and the size of that border is dependent on the size of the mat-icon's font-size property (e.g. a 36px icon needs a 72px border and a 38px border-radius). I'm still learning Angular/Material and how it all works, and what I don't want to do is hard-code a solution. Instead, if I can put a value in the component selector, then use that value as a variable that can be assigned to CSS properties (e.g. through ngStyle), things work out.

Note: The following code below is 1/2 working, but in console (the log) I'm getting undefined and undefinedpx for the values.

EDITED: Current Code

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>

Mike Earley · Accepted Answer · 2018-03-05 16:55:48Z

OK it's working now, using the following:

//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>

standby954 · Accepted Answer · 2018-03-05 12:40:41Z

0

Use:

@Input('icon-size') size: number

answered Mar 5, 2018 at 12:40

standby954

2091 silver badge7 bronze badges

3 Comments

Mike Earley Over a year ago

Can you elaborate that? How do I then use that value in the follow-up values like public font-size=icon-size;?

standby954 Over a year ago

You should replace 'let size = icon-size' row by that what I've mentioned above. After that everything should work.

Mike Earley Over a year ago

I've updated my code, you can see above. It's still not quite working, as the value is undefined--no errors, it's just undefined.

standby954 · Accepted Answer · 2018-03-06 08:44:08Z

0

You should use square brackets to pass variables from parent to child component:

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

You can use different name in your child component, that's why I used

@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...

Here you can check a working example: https://embed.plnkr.co/RbMKgf8GtLUEPhwLVwWh/

answered Mar 6, 2018 at 8:44

standby954

2091 silver badge7 bronze badges

1 Comment

Mike Earley Over a year ago

When I use [] around the inputs, it breaks and doesn't work.

Collectives™ on Stack Overflow

Set CSS values using a value set on component selector (Angular 5)

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related