I recently created a group of radio buttons for selection:
https://i.sstatic.net/CDM5A.png
<mat-radio-group [(ngModel)]="learningMode" aria-label="Select an learning mode">
<mat-radio-button value="videos">Videos
<mat-icon>videocam</mat-icon>
</mat-radio-button>
<mat-radio-button value="vocabulary">Vocabulary
<mat-icon>feed</mat-icon>
</mat-radio-button>
<mat-radio-button value="wordSearch">Word Search
<mat-icon>search</mat-icon>
</mat-radio-button>
</mat-radio-group>
Everything works perfectly when I set learningMode as a string.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
learningMode: string = 'videos';
}
The TypeScript Handbook suggests narrowing down the string to a Literal Type with three specific strings:
s: string, alignment: "left" | "right" | "center"
However, my attempt at implementation doesn't seem to be working as expected:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
learningMode: string, learningModes: 'videos' | 'vocabulary' | 'wordSearch' = 'videos';
}
Any suggestions on how I can properly narrow down learningMode to one of three specific strings?