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"