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>

Answer 1

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>