dartangular-dartangular-componentsdart-htmldart-webui

How to capitalize acx-scorecard value text in AngularDart


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(); }

  }

Solution

  • For now the best solution in your case is to use uppercase pipe.

    <acx-scorecard
          selectable
          [selected]="true"
          label="{{Selected scorecard | uppercase }}"
          value="{{item.first | uppercase}}{{item.second | uppercase}}"
          description="{{Try clicking this | uppercase}}">