Toggleable button - set default toggled state and also when lost focus, reverts to previous look (toggled state not visible)

[Vedad]

Hi, 

I am trying to use toggleable button in my angular app to allow user to display some data automatically (or not).

My first question is, if user sets that he wants it, I save this in my database, and next time when user returns, I want to set the state of the button to be toggled. However, I can't find any property or anything to do this.

Is it possible at all and how if it is? :)

Second thing that I noticed is that, when I toggle button, it gets its style correctly, but when I click further, it reverts to its visual as if it wasn't toggled. This is my button setup..and I use the button as part of kendo ui angular app bar.

<button kendoButton [toggleable]="true" (selectedChange)="showAutoInfo($event)" fillMode="clear" rounded="full"

size="small">

<kendo-icon name="info"></kendo-icon>

</button>

 

Thank you.

Regards,

Vedad

[Yanmario]

Hi Vedad,

For the first question, the developer can use the selected property to set the initial state of the toggleable button:

https://stackblitz.com/edit/angular-uaagro?file=src%2Fapp%2Fapp.component.ts

As for the toggle behavior of the clear button, because of its nature, it sets the background and borders to be transparent. The developer has the freedom to apply his own styles depending on the desired output when a button is in a selected state:

https://stackblitz.com/edit/angular-j4jgs5?file=src%2Fapp%2Fapp.component.ts

I hope this helps.

Regards,
Yanmario
Progress Telerik