Angular2 two functions in NgStyle

Question

I want to set two functions in ngStyle. I've tried [ngStyle]="setAlignmentStyle(element.alignment);setShapeStyle(element.shape);" but it gives template parse errors.

How should I set two functions in ngStyle?

page.component.ts

export class PageComponent {

    // ...

    setAlignmentStyle(alignment) {
        let styles = {
            'margin': alignment === 'center' ? '0 auto' : '',
            'float': alignment === 'right' ? 'right' : (alignment === 'left' ? 'left' : ''),
        };
        return styles;
    }

    setShapeStyle(shape) {
        let styles = {
            'border-radius': shape === 'circle' ? '50%' : '',
        };
        return styles;
    }
}

page.component.html

<div [ngStyle]="setAlignmentStyle(element.alignment);setShapeStyle(element.shape);">{{element.text}}</div>

What is the expected behavior? You can't return two objects and expect `ngStyle` to apply them both, that won't work. You have to combine them to a single object yourself. — Günter Zöchbauer, Nov 18 '16 at 09:49
I need that `setAlignmentStyle(alignment)` and `setShapeStyle(shape) ` together would give one merged style, e. g., `[ngStyle]="setAlignmentStyle('center');setShapeStyle('circle');"` would give `margin: 0 auto; border-radius: 50%` — Ugnius Malūkas, Nov 18 '16 at 09:55
That won't work. You need to call one function that returns one object with the properties of both. I'd suggest to not call a function at all and just assign the object to a property in your component and bind to this property. — Günter Zöchbauer, Nov 18 '16 at 09:57

score 3 · Accepted Answer · answered Nov 18 '16 at 10:31

I applied Decorator design principle (it is not strict Decorator).

export class PageComponent {

    // ...

    setAlignmentStyle(alignment, styles) {
        styles = styles || {};

        styles.margin = alignment === 'center' ? '0 auto' : '';
        styles.float = alignment === 'right' ? 'right' : (alignment === 'left' ? 'left' : '');

        return styles;
    }

    setShapeStyle(shape, styles) {
        styles = styles || {};

        styles['border-radius'] = shape === 'circle' ? '50%' : '';
        return styles;
    }
}

<div [ngStyle]="setAlignmentStyle(element.alignment, setShapeStyle(element.shape))">{{element.text}}</div>

score 2 · Answer 2 · answered Nov 18 '16 at 10:00

ngStyle doesn't merge multiple objects.

Using functions in the view (except for event handlers) is discouraged anyway because such functions are called very often.

In your case this will lead to exceptions because the methods return a new instance is returned every time.

export class PageComponent {
    styles = {}

    ngOnInit() {
      this.setAlingmentStyle('xxx');
      this.setShapeStyle('yyy');
    }

    // ...

    setAlignmentStyle(alignment) {
        this.styles.margin = alignment === 'center' ? '0 auto' : '';
        this.styles.float = alignment === 'right' ? 'right' : (alignment === 'left' ? 'left' : ''),
        };
    }

    setShapeStyle(shape) {
        this.styles[
            'border-radius'] = shape === 'circle' ? '50%' : '',
    }
}

and then use it like

<div [ngStyle]="styles">{{element.text}}</div>

score 2 · Answer 3 · answered Nov 18 '16 at 10:01

setStyles(alignment, shape: string) {
    let styles = {};
    switch(alignment){
      case 'center' : 
        styles.margin = '0 auto';
        break;
      case 'right' : 
        styles.float = 'right';
        break;
      case 'left' : 
        styles.float = 'left';
        break;
    }
    switch(shape){
      case 'circle' : 
        styles['border-radius'] = '50%';
        break;
    }

    return styles;
}

// HTML

<div [ngStyle]="setStyles(element.alignment, element.shape);">{{element.text}}</div>

Angular2 two functions in NgStyle

3 Answers3