How to capitalize acx-scorecard value text in AngularDart

Question

I am trying to use acx-scoreboard component but unable to customise its font-size and text-transform: capitalize; of label, value, and description. So, can anyone help me how to do that.

app_component.html

<button (trigger)="generateNames()">
Names
</button>
<ul>
   <li *ngFor="let item of names">
      <acx-scorecard
          selectable
          [selected]="true"
          label="Selected scorecard"
          value="{{item.first}}{{item.second}}"
          description="Try clicking this">
      </acx-scorecard>
   </li>
</ul>

app_compoment.dart

 import 'package:angular/angular.dart';
 import 'package:angular_components/    angular_components.dart';
 import 'package:english_words/english_words.

 @Component(
     selector: 'my-app',
     templateUrl: 'app_component.html',
     styleUrls: const ['app_component.css'],
     directives: const [
       CORE_DIRECTIVES,
       materialDirectives,
       ScoreboardComponent,
       ScorecardComponent,
   ],
   providers: const [materialProviders],
   )

    class AppComponent implements OnInit    {          
      var names = <WordPair>[];

      void generateNames() { names =    generateWordPairs().take(2).toList(); }

       @override void ngOnInit()   { generateNames(); }

  }

nshahan nshahan · Accepted Answer · 2017-08-21T23:45:33

Internally we use the SASS mixins to customize the style. https://github.com/dart-lang/angular_components/blob/master/lib/src/components/scorecard/_mixins.scss

Unfortunately, that functionality isn't available yet in the open source release. The SASS files are there as a reference for you and can show you how we target different elements. I am working right now to allow for imports and access to them in your projects.

For now, a workaround would be to use the similar css to target the different parts of the scorecard.

The only down problem with that technique is that it vulnerable to breaks if the html elements used to represent the scorecard changes. The mixin avoids this because it acts as the abstraction and has a contract that it should be updated appropriately if the scorecard changes.

For example you could change the style of the label by adding styles to your components that have scorecards in them:

acx-scorecard ::ng-deep h3 { // targets the scorecard label
  text-transform: capitalize;
}

::ng-deep is the replacement for /deep/ that angular is now supporting.

How to capitalize acx-scorecard value text in AngularDart

2 Answers