Can You Change Buttons color onfocuse In Nativescript/Angular

Question

Can You Change Buttons color onfocused like yout do in TextField In Nativescript/Angular.. It works in TextField but not in BUTTON Does someone knows some other solution, im trying to build a tvapp i need to change the color when is focused in Button or Label

HTML File

<Page loaded="onPageLoaded($event)">
    <StackLayout>
        <Button  text="My Button 2"  class="my_button_2" >  </Button>
        <TextField class="input-field"> </TextField>
    </StackLayout>
</Page>

CSS File

.my_button_2:focus{
    background:olive;
    border-color: red;
    border: 2;
    border-width: 2;
}

.my_button_2:active{
    background:olive;
    border-color: red;
    border: 2;
    border-width: 2;
}


.input-field:focus {
border-bottom-color: red;

Answer 1

Here is the solution in Android onloaded event

HTML

<Button #myButton1 text="My Button 1" (tap)="OnTapButton_1($event)" (loaded)="onButtonLoaded_1($event)" class="button_style"></Button>

Component.ts File

public onButtonLoaded_1(args) {
    let btn = args.object as Button;
    let androidButton = btn.android;

    androidButton.setOnFocusChangeListener(new android.view.View.OnFocusChangeListener({
      onFocusChange:(view, hasFocus) => {
          if(hasFocus === true){
            btn.addPseudoClass("focus")
          }
          else {
            btn.deletePseudoClass("focus")

          }
        }
      }))
}

CSS

.button_style {
    android-elevation: 0;
    android-dynamic-elevation-offset: 0;
    background: rgba(190, 138, 17, 0.315);
    border-width: 0.3;
    border-color: rgba(190, 138, 17, 0.671);

}

.button_style:focus{
    android-elevation: 0;
    android-dynamic-elevation-offset: 0;
    background: rgba(190, 138, 17, 0.856);
    border-width: 0.3;
    border-color: rgba(116, 84, 11, 0.856);
}

Disbaling in it

androidButton.setOnFocusChangeListener(null)