Change button attribute

Ionic Framework ionic-v3
1

Hello,

I have this select


<ion-item>
	<ion-label>Form</ion-label>
	<ion-select [(ngModel)]="shape">
		<ion-option value="solid">Standard</ion-option>
		<ion-option value="outline">Mit Rand</ion-option>
		<ion-option value="clear">Ohne Rand</ion-option>
		<ion-option value="full">Voll</ion-option>
		<ion-option value="block">Block</ion-option>
		<ion-option value="round">Rund</ion-option>
	</ion-select>
</ion-item>

Is it possible to seht the Attribut of a button prgrammatically

Something like this?

<button ion-button {{shape}}>
          {{buttonText}}
</button>
2

What do you want to achieve with this ?

3

I want to make a button preview.

The user coud select the shape and color and so on and the preview button
should update automatically.

4

This is the best solution at the moment.

<button ion-button 
[outline]="shape == 'outline' ? true: null" 
[clear]="shape == 'clear' ? true: null" 
[round]="round == true ? true: null" 
[block]="buttonWidth == 'block' ? true: null" 
[full]="buttonWidth == 'full' ? true: null" 
[small]="buttonHeight == 'small' ? true: null" 
[large]="buttonHeight == 'large' ? true: null" 
[mode]="mode != '' ? mode: 'md'" 
[color]="color != 'userColor' ? color: userColor" 
[strong]="buttonTextSize == true ? true: null">
    {{buttonText}}
</button>

I had to add this for every Attribut, but this is ok.

5

I don’t think this works (anymore?) if you combine different style attributes, like in the example below

<button ion-button 
[outline]="shape == 'outline' ? true: null" 
[solid]="shape == 'solid' ? true: null" 
[clear]="shape == 'clear' ? true: null">
    {{buttonText}}
</button>

If the last executed attribute setter evaluates to false, it will set the _style to ‘default’ (or solid), even if another style attribute evaluated to true. This is because of the ‘special handling for _style’ in https://github.com/ionic-team/ionic/blob/master/src/components/button/button.ts, line 259…

6

You can try it on this page.

https://codecreator.jacktools.net/

Left menu - Ionic components then button

Change the settings in the middle of the page. The button on the right side changes…

But the website is old I would say Ionic 2.x