What does #group="matButtonToggleGroup" mean?

Question

Taken from this example:

<mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="left" aria-label="Text align left">
    <mat-icon>format_align_left</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="center" aria-label="Text align center">
    <mat-icon>format_align_center</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="right" aria-label="Text align right">
    <mat-icon>format_align_right</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="justify" disabled aria-label="Text align justify">
    <mat-icon>format_align_justify</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>
<div class="example-selected-value">Selected value: {{group.value}}</div>

What does #group mean? Normally, it means variable declaration, but here it must mean something different. If I don't use matButtonToggleGroup as value I get

Template parse errors: There is no directive with "exportAs" set to "matButtonToggleGroup2"

I saw that there is also a #toggleGroup. In the official API documentation I can't find something about both.

Answer 1

#group - is a template reference variable which you can name however you want

matButtonToggleGroup - is a exportAs which is a name under which the component instance is exported in a template. You can't change it unless you have access to the original directive

                         #group="matButtonToggleGroup"
                        /              \
template reference variable         exportAs 

exportAs name is defined in MatButtonToggleGroup directive https://github.com/angular/components/blob/92bbc77050a911f6614ce55280b5cc8e634d9ac0/src/material/button-toggle/button-toggle.ts#L108

You can think of exportAs as a public API for directive. If there are too many directives on one element you can get reference to specific directive by knowning its exportAs name.

See also

• What is #auto attribute here and why it is required