Is it possible to use the MD-Toggle-Button on something else than a button?

I am trying to use the material design button toggle (available at this link : https://material.angular.io/components/button-toggle/overview) on something else than a simple button. The thing is that even when I try to use with the basic examples of the material documentation, I have this error showing up: ERROR TypeError: Cannot read property 'value' of undefined.

I already tried all the examples in the Material Design but I still have this error when I call the value with {{ group.value }}.

This is my HTML :

<section class="content-bonif-wrapper">
<h2> {{ title }} </h2>
<div class="row" class="col-md-4">
<mat-accordion>
  <mat-expansion-panel *ngIf="totalEnc > 0" class="accordion-bonif">
    <mat-button-toggle-group #group="matButtonToggleGroup">
      <mat-button-toggle value="test" aria-label="Text align justify">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <span>Risque PR Infiniti</span>
          </mat-panel-title>
          <mat-panel-description >
            <span>Total : {{ totalEnc | number:'1.2-2' }}</span>
          </mat-panel-description>
        </mat-expansion-panel-header>
      </mat-button-toggle>
    </mat-button-toggle-group>
    <div>
      <div>
        <a>Encours à charge : {{ totalEncCharge }}</a>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>
<div class="right-content">
  <div>
    {{ group.value }}
  </div>
</div>

I imported the MatButtonToggleModule in my component.ts and in my module.

So my questions are:
1 – why the error: ERROR TypeError: Cannot read property 'value' of undefined is showing up?
2 – can I use the button toggle on something else than a button?

Thank you for your help!

Source: New feed
Source Url Is it possible to use the MD-Toggle-Button on something else than a button?