how to make text on the mat-slide-toggle

Question

how to put text on mat-slide-toggle like when it is true I want to show it as assigned and when false not assigned

<mat-slide-toggle (click)="openDialog1(element.courseId, true )" [checked]="checked">Assign All</mat-slide-toggle> 

Answer 1

Remove [checked]="checked" and use [(ngModel)] instead, and show html content based on the flag, like this -

<mat-slide-toggle (click)="openDialog1(element.courseId, true )" [(ngModel)]="checked">{{ checked ? 'assigned' : 'not assigned' }}</mat-slide-toggle>

Declare a flag in ts file -

checked: boolean;