Using conditional CSS values in Angular 8

I am currently working on a parent component and child component setup, where I am utilizing the child component's selector to display it within the parent component.

Here is my child component's 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>

This is the TypeScript code for the child component:

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

My goal is to dynamically apply "transform: scaleX() scaleY()" to the child component based on values passed from the parent component.

This is how the parent component is being used:

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

Unfortunately, the above implementation seems to be failing. How can I correctly assign values to the CSS property "transform" in this scenario?

htmlcssangular

Answer №1

If you want to create a method in the child component, you can do so like this:

  generateStyles() {
    let styles = {
      transform: `scaleX(${this.scale}) scaleY(${this.scale})`,
    };
    return styles;
  }

To use this method in the child's HTML template, follow these steps:

<div class="container" [ngStyle]="generateStyles()">
  <img src="../../assets/image.jpg" class="image" />
  <svg id="section2"></svg>
  <svg id="section3"></svg>
</div>

You can reference the child component like this:

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

For a live demonstration, check out this example: https://stackblitz.com/edit/angular-ivy-gaohfo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a font-awesome icon directly within the input field

My div element contains a span element, which in turn includes an i tag. However, the i element extends outside of both the span and div elements. I am attempting to place an eye icon inside an input field. Here is my current code - what adjustments shou ...

htmlcss

HTML stops a paragraph when encountering a script within the code

Everything in my code is working correctly except for herb2 and herb3, which are not displaying or utilizing the randomizer. I am relatively new to coding and unsure of how to troubleshoot this issue. <!DOCTYPE html> <html> <body> ...

javascripthtml

Angular problem arises when attempting to map an array and selectively push objects into another array based on a specific condition

Setting up a cashier screen and needing an addToCart function seems pretty simple, right? However, I am encountering a strange logical error. When I click on an item to add it to the cart, my function checks if the item already exists in the array. If it d ...

htmlarraysangulartypescript

The transparent sticky navigation bar isn't functioning as intended

I stumbled upon a code for the sticky navbar that I found on this website. Intrigued, I decided to copy the code and test it out on my Laravel blade file. The output turned out like this: https://i.sstatic.net/lexRl.jpg Here is how I copied the code: CS ...

htmlcssbootstrap-4

Ways to eliminate or conceal solely the play/pause symbol or button from the media player within the video tag

[Please see the screenshot attached, I am looking to remove the play/pause icon that is highlighted] [screenshot] How can I hide or remove only the play/pause button from the media player of a video tag? When I dynamically add the controls attribute using ...

javascriptjqueryhtmlcss

CSS: border-radius // background-color: white; rounded corners

Having recently delved into the world of HTML/CSS, I am currently working on a fun project to enhance my web development skills. In this project, I have created a search bar and successfully added round corners with border-radius. However, an issue arises ...

htmlcss

Tips for importing "~bootstrap/scss/bootstrap" in a .html or .ts file while utilizing a carousel

I am looking to include the bootstrap carousel file in just one component, either a .ts or .html file. I do not want to have bootstrap integrated into the entire project via angular.json. Is it possible to import it into only one specific component? Does ...

angularbootstrap-4carousel

The {shade} of the code has been modified within brackets

Ever encountered your code's colors abruptly changing to red and green in the middle of an HTML page? My editor is Brackets, and while it doesn't pose any issues, it's really bothersome and makes the code difficult to read: Take a look at t ...

html

Having issues with your JQuery code?

I am attempting to locate a cell within a table that contains the class 'empty'. My goal is to then utilize a code snippet to obtain the id (cell number) and determine which cells are adjacent to it. As part of my test, I am experimenting with t ...

javascriptjqueryhtml

What is the technique to enable this div to be clickable?

I am trying to make each "card" of a WordPress plugin clickable on my website. I have inserted a Pure JS element with the following code: document.getElementsByClassName('fc_card-container').onclick = function() {alert('It works!');} ...

javascriptcss

What is the best way to activate a JQ function with my submit button?

Is there a way to trigger a JQ function when clicking the submit button in a form? I managed to make Dreamweaver initiate an entire JS file, but not a particular function. ...

javascriptjqueryhtmlforms

Javascript keycode used to target the element when a key is pressed

In my current project, I am utilizing a code snippet to attach a KeyDown event handler to any element within the HTML form. for(var i=0;i<ele.length;i++) { ele[i].onkeydown = function() { alert('onkeydown'); } } I am ...

javascripthtmldom

Instructions for setting up qtip2 tooltip with npm in an Angular 2 project

Struggling to integrate qtip2 into my Angular 2 app, encountering errors like this After extensive Google searches, I could not find a definitive solution for installing the qtip2 JQuery plugin via npm to enable tooltips. Even after updating JQuery to ve ...

jqueryangularnpminstallationqtip2

Guide on integrating React.js into an HTML development webpage

I can't seem to get this code to work properly. I have saved it as an .html file on my computer, but it's not displaying anything when I try to open it in Google Chrome. <DOCTYPE! html> <html> <head> <script src= ...

javascripthtmlreactjs

"Uncovering an issue with locating the 'div' variable in a

I'm facing an issue with the following code snippet: <script> function loadData() { var items = [<?php echo $jsItemArray ?>]; for (i = 0; i < items.length; i++) { var itemId = "\"#item-" +items[i]+ "\""; ...

jqueryhtmlajax

Executing a code inside a jQuery modal element

I am utilizing a jquery plugin called jQuery Image Scale to automatically resize individual images on my website. Below is a simple example: // HTML: <div class='parent_container'> <img src='image.jpg' class=&apos ...

jqueryhtmlcss

Ensuring your image matches the size of the containing div element

I am trying to create a navigation bar in the footer of my website using images. The footer should take up 10% of the total screen, and the images should also be contained within that 10%. However, I am having trouble with the images not scaling properly a ...

cssbootstrap-4

How to Retrieve the Value of the First Drop Down that is Linked to a Second Drop Down Using Angular JS

How can I use AngularJS to retrieve the second select drop-down value based on the selection made in the first select drop-down? Hello, I have set up two dropdown fields in MyPlunker and within the ng-option, I am applying a filter "| filter:flterWithKp" ...

htmlangularjsmeanjs

Dynamic visuals created with Jquery and Ajax

While I'm not an experienced developer, I have managed to work with some small Jquery scripts. Lately, I've been struggling for the past month trying to figure out how to implement a specific functionality that I would like to incorporate. Does a ...

jqueryhtmlcssajaxgallery

Tips for setting environmental variables to match ID values in html documents

In my API reference call, I have stored the key in a separate file and protected it using .gitignore since I am using GitHub. However, I am facing an issue on how to transfer that key from my JavaScript file into the HTML data-key attribute using a variab ...

javascripthtmlapigithub