How to change style of an HTML tag *inside* an Angular component?

Question

I have an Angular component, defined as follows:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'rdc-dynamic-icon-button',
  templateUrl: './dynamic-icon-button.component.html',
  styleUrls: ['./dynamic-icon-button.component.scss']
})
export class DynamicIconButtonComponent {
  @Input() label = '';
  @Input() icon = '';
  @Input() fileType = '';
  @Output() click = new EventEmitter<any>();

  onClick() {
    this.click.emit();
  }
}

This is the component template:

<button (click)="onClick()">
  <img src="../../../assets/icons/{{icon}}.{{fileType}}" />
  <span class="buttonLabel">{{ label }}</span>
</button>

Here is the CSS:

button {
  font-size: 0.8em;
  width: 150px;
  height: 45px;
  background-color: white;
  color: #0066cc;
  border: 1px solid #0066cc;
  border-radius: 30px;
  padding: 1em;
}
// The button's icon
img {
  padding-right: 0.5em;
  position: relative;
  bottom: 5px;
}

Now I’m using this button component twice in a row, with two different icons:

To get the icon on the left to be properly aligned with the button label, I used the CSS property bottom: 5px. But with this button being dynamic in nature, of course this CSS rule will always be used, whichever icon ends up being passed to the component.

In the screenshot, you can see that the heart icon in the right button is pushed too far up by bottom: 5px.

What can I do to change only the second button’s CSS property to vertically position the heart icon better? Here is the template:

<rdc-dynamic-icon-button
        label="Share this page"
        icon="share_icon"
        fileType="svg"
        class="results-descr-button1"
      ></rdc-dynamic-icon-button>
      <rdc-dynamic-icon-button
        label="Save this page"
        icon="fill-1"
        fileType="svg"
        class="results-descr-button2"
      ></rdc-dynamic-icon-button>

A colleague suggested using [ngStyle] but from what I’ve seen by googling, that’s only useful when selecting a specific HTML tag and cannot be used to select a CSS selector inside an Angular component. I may be wrong.

Answer 1

You can do the following:

1) Add a input variable which is boolean to define if you need to add padding or not

2) based on the input variable add an ngClass to the img tag

3) Have a separate class with only bottom padding

The final code will look something like this:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'rdc-dynamic-icon-button',
  templateUrl: './dynamic-icon-button.component.html',
  styleUrls: ['./dynamic-icon-button.component.scss']
})
export class DynamicIconButtonComponent {
  @Input() label = '';
  @Input() icon = '';
  @Input() fileType = '';
  @Input() addPadding = false;
  @Output() click = new EventEmitter<any>();

  onClick() {
    this.click.emit();
  }
}

This is the component template:

<button (click)="onClick()">
  <img src="../../../assets/icons/{{icon}}.{{fileType}}" [ngClass]="{ 'bottomPadding': addPadding }" />
  <span class="buttonLabel">{{ label }}</span>
</button>

Here is the CSS:

button {
  font-size: 0.8em;
  width: 150px;
  height: 45px;
  background-color: white;
  color: #0066cc;
  border: 1px solid #0066cc;
  border-radius: 30px;
  padding: 1em;
}
// The button's icon
img {
  padding-right: 0.5em;
  position: relative;
}
bottomPadding {
  bottom: 5px;
}

Here is how you can use it:

<rdc-dynamic-icon-button
    label="Share this page"
    icon="share_icon"
    fileType="svg"
    class="results-descr-button1"
  ></rdc-dynamic-icon-button>
  <rdc-dynamic-icon-button
    label="Save this page"
    icon="fill-1"
    fileType="svg"
    class="results-descr-button2"
    addPadding="true"
  ></rdc-dynamic-icon-button>

Answer 2

Have you tried adding an id="" to the second button and adjusting the CSS to only that button? Like so:

<rdc-dynamic-icon-button
  id="saveBtn"
  label="Save this page"
  icon="fill-1"
  fileType="svg"
  class="results-descr-button2"
></rdc-dynamic-icon-button>

In your CSS:

rdc-dynamic-icon-button#saveBtn {
    bottom: 0; /* or whatever value you find works */
}

If that doesn't work you can try further refining the scope:

rdc-dynamic-icon-button#saveBtn img {
    bottom: 0; /* or whatever value you find works */
}

Or use the class attached to the second button as a refiner:

.results-descr-button2 img {
    bottom: 0; /* or whatever value you find works */
}

Answer 3

In my opinion things you can do:

• Make sure all icons are the same size (for example style img to have constant width and height)
• Use flexboxes to style template inside button. That way you can align / justify your items to be vertical or horizontal centered.