Angular2/Ionic 2 dynamic component property

Question

I would like to ask for help on this issue. I was working on a dynamic component in angular 2 and ionic: Kindly check below scenario.

I have component name button-component:

<button-component [label]="I'm a button" **small**></button-component>

small - must be dynamically inputted in the button element like big , large.

Inside button-component view file I have:

 <button "the single  attribute must appear here like small">{{label}}</button>

The output would be <button small>I'm a button</button>

I tried all the property bindings in angular 2 , but this is ionic property.

How can I do this with ionic 2 and angular 2. By using single attribute property dynamically.

Thanks in advance.

Answer 1

Same as Angular 2, just send a size attribute and set it to small

<button-component label="'I'm a button'" size="'small'"></button-component>

Then in your button component:

@Input() size;

and in your template:

<button [class]="size">{{label}}</button>

And declare your desired styles in the CSS, for example:

.small {
...
}

.big {
..
}