How to write a custom data attribute for a 'mat-select' element in Angular Material 9

Question

I'm trying to set a custom data attribute (data-tag) for a mat-select element in Angular Material 9. The following is the HTML and TS code that I'm using, but nothing happens by inspecting the webpage code into the browser:

HTML:

<mat-form-field>
    <mat-label>Course</mat-label>
        <mat-select [formControl]="subjectControl" required>
            <mat-option>-- None --</mat-option>
            <mat-optgroup *ngFor="let course of subjects" [label]="course.semester" [disabled]="course.disabled">
                <mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName" [attr.data-tag]="subject.subjectSemester">
                    {{ subject.subjectName }}
                </mat-option>
            </mat-optgroup>
        </mat-select>
</mat-form-field>

TS:

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

I found this question, but I can't understand what I'm doing wrong. Thank you

#Edit 1:

I tried also:

<mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName" [attr.data-tag]="subject ? subject.subjectSemester : null">

but nothing...

Riccardo Volpe · Accepted Answer · 2020-02-24T02:12:00.577

Finally SOLVED:

HTML:

<mat-form-field>
    <mat-label>Course</mat-label>
        <mat-select
            [formControl]="subjectControl"
            [attr.data-tag]="this.subjectControl.value"
            required
        >
            <mat-option>-- None --</mat-option>
            <mat-optgroup *ngFor="let course of subjects" [label]="course.semester" [disabled]="course.disabled">
                <mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName"><!--here I have to set [value] to `.subjectName` or `.subjectSemester` to show it into the `data-tag`-->
                    {{ subject.subjectName }}
                </mat-option>
            </mat-optgroup>
        </mat-select>
</mat-form-field>

As written in the comments of the code, I have to put the [attr.data-tag] into the mat-select equal to this.subjectControl.value, and set [value] of mat-option equal to the value to store into [attr.data-tag].

score 0 · Answer 2 · answered Feb 21 '20 at 21:17

0

Your code looks correct to me. I tried adding it to an existing stackblitz example, and it showed up in the HTML. Maybe it will help to figure it out:

https://stackblitz.com/edit/angular-material-select-compare-with?embed=1&file=app/app.html

<mat-option class="mat-option ng-star-inserted" data-tag="Three" role="option" ng-reflect-value="[object Object]" tabindex="0" id="mat-option-29" aria-selected="false" aria-disabled="false">

answered Feb 21 '20 at 21:17

Matt Nienow

1,168
6
16

Hello @MattNienow, thanks a lot for your answer and time to reply. I'm new to Angular. I tried to visit your link running your code but, sorry, maybe I'm doing something wrong, because I don't see the `data-tag` attribute in the webpage's source code... I realized a screencast to show you what I have done: https://drive.google.com/open?id=1EQycenZ4Evd-TZ8TJljJn7sMJcw3ZFi9 – Riccardo Volpe Feb 22 '20 at 00:53
@RiccardoVolpe Your screenshot is not public. Are you expecting the `data-tag` to be on the mat-select element. Its on the mat-option element when you open the menu. – Matt Nienow Feb 22 '20 at 01:08
Hello @MattNienow, try this one: https://drive.google.com/file/d/1EQycenZ4Evd-TZ8TJljJn7sMJcw3ZFi9/view?usp=sharing ... I would store the selected option into the data-tag. The intent is to generate automatic tags based on input form values, by applying post processing on the content of the data-tag attribute... That is, loop into the form to take all data-tag attributes (based on input values) on which apply the post processing to generate the tags – Riccardo Volpe Feb 22 '20 at 01:15

How to write a custom data attribute for a 'mat-select' element in Angular Material 9

2 Answers2