Skip to content

Button:highlighted stops working after 2nd click #4740

@dottodot

Description

@dottodot

I have a button which is in a custom component with the following template, and when I navigate to a page and back, the :highlighted styles only work the first 2 times.

<Button [nsRouterLink]="[link]" [row]="btnRow" [col]="btnCol" [colSpan]="btnColSpan" [rowSpan]="btnRowSpan" class="dash-btn"
    [ngClass]="btnClass" #dashBtn>
        <FormattedString>
           <Span class="dash-btn-text" text="{{icon}}&#x000a;" fontFamily="icomoon" fontSize="36"></Span>
           <Span class="dash-btn-text" text="&#x000a;" fontSize="5"></Span>
           <Span class="dash-btn-text dash-btn-label" text="{{label}}"></Span>
        </FormattedString>
</Button>

and scss

.dash-btn {
  text-transform: uppercase;
  font-size: 13;
  font-family: $headingfont;
  font-weight: bold;
  .dash-btn-text {
    background-color: transparent;
    color: $darkblue;
  }
  &.dash-btn-grey {
    background-color: $lightgrey;
  }
}

.dash-btn:highlighted {
  background-color: $darkgrey;
  .dash-btn-text {
    color: white;
  }
}

tns v3.1.3

├── @angular/animations@4.2.6
├── @angular/common@4.2.6
├── @angular/compiler@4.2.6
├── @angular/core@4.2.6
├── @angular/forms@4.2.6
├── @angular/http@4.2.6
├── @angular/platform-browser@4.2.6
├── @angular/router@4.2.6
├── nativescript-angular@4.2.0
├── nativescript-dev-sass@1.3.0
├── nativescript-dev-typescript@0.5.0
├── nativescript-theme-core@1.0.4
├── reflect-metadata@0.1.10
├── rxjs@5.4.3
├── tns-core-modules@3.1.1
├── tslint@5.6.0
├── typescript@2.4.2
└── zone.js@0.8.16

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions