Setting Style attributes of ionic2 component dynamically

Question

What I'm trying to achieve:

<ion-header [style.background-color]="(style|async)?.logoBackground">
    <ion-navbar >
        <button ion-button icon-only menuToggle [style.background-color]="(style|async)?.menuButtonBackground">
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title [style.background-color]="(style|async)?.logoBackground">
            <dynamic-logo [style]="style"></dynamic-logo>
        </ion-title>
    </ion-navbar>
</ion-header>

I have to reuse this code, over and over again.
"style" is a variable to an JSON object, I fetch dynamically which has the "style sheet for the app".

I'd lige to write it as simple as this, on other pages:

<dynamic-header [style]="style"></dynamic-header> And having a component to set these (component appended below).

Though this is not possible in ionic2, because it'll wrap the <ion-header> in the <dynamic-header> and therefor not render the page correctly.

So I'm wondering if there is an alternative to making this as a component, maybe a way of making it as a Directive, I just havn't been able to find the necessary information about @Directive..

Also tried @Directive with binding <ion-content dynamic-content [style]="style">...</>
AND
[style]="(style|async)" gives WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).

TS:

import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
import { PageStyle } from "../../providers/company-service";

@Component({
  selector: 'dynamic-header',
  templateUrl: 'dynamic-header.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class DynamicHeaderComponent {
  @Input() style: PageStyle;
}

HTML:

<ion-header [style.background-color]="(style|async)?.logoBackground">
    <ion-navbar >
        <button ion-button icon-only menuToggle [style.background-color]="(style|async)?.menuButtonBackground">
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title [style.background-color]="(style|async)?.logoBackground">
            <dynamic-logo [style]="style"></dynamic-logo>
        </ion-title>
    </ion-navbar>
</ion-header>

reformed to directive

import { Directive, HostBinding, Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
import { PageStyle } from "../../providers/company-service";

@Directive({
  selector: 'dynamic-content',
  /*  templateUrl: 'dynamic-content.html',
      changeDetection: ChangeDetectionStrategy.OnPush,
      encapsulation: ViewEncapsulation.None,
  */
})
export class DynamicContentComponent {
  @Input() style: PageStyle;

  @HostBinding('style.background-image')
  get getBackgroundImage() {
    if (this.style) {
      return this.style.backgroundImage;
    }
  }

  @HostBinding('style.background-repeat')
  get getBackgroundRepeat() {
    if (this.style) {
      return "no-repeat";
    }
  }

  @HostBinding('style.background-size')
  get getBackgroundSize() {
    if (this.style) {
      return "cover";
    }
  }

  @HostBinding('style.color')
  get getTextColor() {
    if (this.style) {
      return this.style.textColor;
    }
  }
}

Günter Zöchbauer · Accepted Answer · 2017-02-03 09:22:18Z

2

From directives you can only bind single styles

export class DynamicHeaderComponent {
  @Input() style: PageStyle;

  // repeat this getter for every style property
  @HostBinding('style.background-color')
  get backgroundColor() {
    if(this.style) {
      return this.style.backgroundColor;
    }
  }
}

answered Feb 3, 2017 at 9:22

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

6 Comments

Anders Metnik Over a year ago

And to use it <ion-navbar dynamic-header [style]="style">...</..> ?

Günter Zöchbauer Over a year ago

That was the idea.

Anders Metnik Over a year ago

Does not seem to work... Updated Q with the directive

Anders Metnik Over a year ago

styles are not being changed.. propperties not set :)

Günter Zöchbauer Over a year ago

Sorry, can't tell from here, why.

|

Collectives™ on Stack Overflow

Setting Style attributes of ionic2 component dynamically

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related