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}}
" fontFamily="icomoon" fontSize="36"></Span>
<Span class="dash-btn-text" text="
" 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
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.
and scss
tns v3.1.3