Change button attribute


I have this select

	<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>

Is it possible to seht the Attribut of a button prgrammatically

Something like this?

<button ion-button {{shape}}>

What do you want to achieve with this ?

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.

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">

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

1 Like

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">

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, line 259…

You can try it on this page.

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