CODEWITHSUNDEEP
cssionic-frameworkangularionic2
Rambatino
Rambatino

Reputation: 4914

Dynamically setting the a css property of a child in Angular 2

I'm struggling to set a css property of a child tag in angular 2 using the ngStyle directive.

I'm not sure if it complicates it that I'm trying to apply it to an SVG.

Current Situation

I have a spinner, implemented as such:

<ion-spinner name="bubbles"></ion-spinner>

The selector comes from the ionic framework.

The current code I have is:

@Component({
   selector: 'some-selector',
   template: `
        <ion-spinner name="bubbles"></ion-spinner>
   `
})
export class SomeComponent {
   private someColour: string = "red"
}

I know that I can use the styles array in the component director to affect the css styling (although due to encapsulation (I think) it has to go in to its own css style sheet, rather than the component's styles other wise it only affects some properties), and I can also use the ngStyle property to have dynamic css styling. However, the element comes out like this in the html:

<ion-spinner name="bubbles" class="spinner-bubbles">
   <!--template bindings={}-->
   <svg viewBox="0 0 64 64" style="top: 0px; left: 9px; animation-delay: -1000ms; animation-duration: 1000ms;">
      <circle transform="translate(32,32)" r="5"></circle>
   </svg>...
</ion-spinner>

and the css needs to affect the 'circle' tag. I know the css I can use is:

ion-spinner  {
    * {
        fill: blue;
    }

    &.spinner-circles circle,
    &.spinner-bubbles circle,
    &.spinner-dots circle {
        fill: blue;
    }
}

As the spinner has bubbles, but:

how can i make the colour change dynamic from inside the selector?

I'm using angular "2.0.0-rc.1"

Upvotes: 0

Views: 4117

Answers (2)

acdcjunior
acdcjunior

Reputation: 135862

It is not the best alternative in the angular world, but if the ion-spinner does not provide any kind of "hook" to the inner <circle> elements, you could get a reference to their HTMLElement instances (via DOM) and manipulate, such as adding classes to them:

import { Component, ViewChild, ContentChild, ElementRef } from '@angular/core';
import { Spinner } from 'ionic?';

@Component({
  selector: 'some-selector',
  template: `
      <ion-spinner name="bubbles"></ion-spinner>
  `,
  directives: [Spinner]
})
export class SomeComponent {

  @ViewChild(Spinner, {read: ElementRef}) spinnerEl: ElementRef;

  ngAfterViewInit() {
    console.log("Spinner ElementRef: ", this.spinnerEl);
    console.log("Spinner ElementRef.nativeElement: ", this.spinnerEl.nativeElement);

    this.addClassForAllCirclesInsideElement(this.spinnerEl.nativeElement, "someClass");
  }

  addClassForAllCirclesInsideElement(nativeElement, classNameToAdd) {
    // direct DOM manipulation...
    let circles = nativeElement.querySelectorAll('circle');
    circles.forEach((circle) => { circle.className += " " + classNameToAdd; })
  }

}

Upvotes: 2

Tiberiu Popescu
Tiberiu Popescu

Reputation: 4524

Use a CSS class for the specific styles and then use the NgClass directive to dynamically change it 

[class.myDynamicClass]="isMyDynamicClassActive"

Upvotes: 0

Related Questions