How to capitalize acx-scorecard value text in AngularDart

Issue

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}}">

Answered By – Hadrien Lejard

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *