Appyling conditional css values in angular 8

Question

I have a parent component and child component where I am using child component's selector to render it in parent component.

my child component html:

<div class="main-container" [ngStyle]="{'transform': 'scaleX(widthScale) scaleY(heightScale)'}">
    <img src="../../assets/svg/kiln-main.jpg" class="kiln-image">
    <svg id="area2"></svg>
    <svg id="area"></svg>
</div>

child component ts:

@Input() widthScale:string;
@Input() heightScale:string;

I want to apply "transform:scalex() scaley()" to child based on the values from the parent.

my parent:

<app-child [widthScale]="0.5" [heightScale]="0.5"></app-child>

The above code somehow isnt working.How to apply values to css property "transform" here?

deepakchethan · Accepted Answer · 2021-10-07 06:56:19Z

1

You can create a method in the child as follows:

  getTransformStyle() {
    let styles = {
      transform: `scaleX(${this.widthScale}) scaleY(${this.heightScale})`,
    };
    return styles;
  }

Use it in child html as follows:

<div class="main-container" [ngStyle]="getTransformStyle()">
  <img src="../../assets/svg/kiln-main.jpg" class="kiln-image" />
  <svg id="area2"></svg>
  <svg id="area"></svg>
</div>

You can refer to the child as follows:

<app-child [widthScale]="'0.5'" [heightScale]="'0.5'"></app-child>

Working example: https://stackblitz.com/edit/angular-ivy-gaohfo

answered Oct 7, 2021 at 6:56

deepakchethan

5,6301 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Appyling conditional css values in angular 8

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related