title: How to write a custom data attribute for a 'mat-select' element in Angular Material 9
body: <p>I'm trying to set a custom data attribute (<code>data-tag</code>) for a <code>mat-select</code> element in Angular Material 9. The following is the <code>HTML</code> and <code>TS</code> code that I'm using, but nothing happens by inspecting the webpage code into the browser:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-label&gt;Course&lt;/mat-label&gt;
          &lt;mat-select [formControl]="subjectControl" required&gt;
              &lt;mat-option&gt;-- None --&lt;/mat-option&gt;
              &lt;mat-optgroup *ngFor="let course of subjects" [label]="course.semester" [disabled]="course.disabled"&gt;
                  &lt;mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName" [attr.data-tag]="subject.subjectSemester"&gt;
                      {{ subject.subjectName }}
                  &lt;/mat-option&gt;
              &lt;/mat-optgroup&gt;
          &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><strong>TS:</strong></p>
  
  <pre><code>export interface SubjectGroup {
      disabled?: boolean;
      semester: string;
      courses: Subject[];
  }
  export interface Subject {
      subjectName: string;
      subjectSemester: string;
  }
  
  export class FormComponent implements OnInit {
      subjectControl = new FormControl("", Validators.required);
      subjects: SubjectGroup[] = [
          {
              semester: "Semester 1",
              courses: [
                  {
                      subjectName: "Course 1",
                      subjectSemester: "1° Semester"
                  },
                  {
                      subjectName: "Course 2",
                      subjectSemester: "1° Semester"
                  },
                  {
                      subjectName: "Course 3",
                      subjectSemester: "1° Semester"
                  },
                  {
                      subjectName: "Course 4",
                      subjectSemester: "1° Semester"
                  },
                  {
                      subjectName: "Course 5",
                      subjectSemester: "1° Semester"
                  }
              ]
          },
          {
              semester: "Semester 2",
              courses: [
                  {
                      subjectName: "Course 1",
                      subjectSemester: "2° Semester"
                  },
                  {
                      subjectName: "Course 2",
                      subjectSemester: "2° Semester"
                  },
                  {
                      subjectName: "Course 3",
                      subjectSemester: "2° Semester"
                  },
                  {
                      subjectName: "Course 4",
                      subjectSemester: "2° Semester"
                  }
              ]
          }
      ];
  }
  </code></pre>
  
  <p>I found <a href="https://stackoverflow.com/questions/46860096/angular-4-on-select-change-get-attribute-data-value">this question</a>, but I can't understand what I'm doing wrong. Thank you</p>
  
  <p><strong>#Edit 1:</strong></p>
  
  <p>I tried also:</p>
  
  <pre><code>&lt;mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName" [attr.data-tag]="subject ? subject.subjectSemester : null"&gt;
  </code></pre>
  
  <p>but nothing...</p>