Angular MaterialButtonレイアウト/ビューを切り替えるために切り替えます

私はAngularMaterialを使用してAngular7サイトを構築しています（私はWeb開発の初心者です）。ばかばかしいほど些細なことのように思えます。products.componentで、Angular Material Button Toggleを使用して、製品のグリッドビュー（デフォルト）とリストビューを切り替えたいと考えています。非常に多くのeコマースで見られる機能。これが私の簡略化されたコードです：

<mat-button-toggle-group value="grid">
    <mat-button-toggle value="grid">
        <mat-icon>view_module</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="list">
        <mat-icon>view_list</mat-icon>
    </mat-button-toggle>
</mat-button-toggle-group>

製品のグリッドビュー（デフォルトビューである必要があります）：

<div *ngFor="let product of products">
    <a>
       ...
    </a>
</div>

製品のリストビュー：

<div>
    <ul>
        <li *ngFor="let product of products"></li>
    </ul>
</div>

私はViewChild、NgModel、NgSwitch、TemplateRef、あらゆる種類のソリューションを試しました...何かが足りないので、これにかなりの時間を費やしているので、あなたに頼っています！前もって感謝します

編集：ルーティングを実装しないと、app.componentは次のようになります。

<app-header>
<app-products>
<app-footer>

私のproducts.componentはこのように構築されています（簡略化）

<mat-toolbar>
    <mat-button-group>
    ...
    </mat-button-group>
</mat-toolbar>
<div class="container">
    <div *ngFor="let product of products">
        <a>
        ...
        </a>
    </div>
    <div>
        <ul>
            <li *ngFor="let product of products">
            ...
            </li>
        </ul>
    </div>
</div>

つまり、オールインワンコンポーネントです。グリッドビュー用に2つの子コンポーネントを作成しますが、リストは適切ではありませんか？とにかく、これを試した別のコンポーネントのdiv.container内のコードを移動してみました。

@Component({ 
templateUrl:
`
    <div #listTemplate>
      <p>List View</p>
    </div>

    <div #gridTemplate>
      <p>Grid View</p>
    </div>
`
})
export class ... {
    @ViewChild('listTemplate') listTemplate: TemplateRef<any>;
    @ViewChild('gridTemplate') gridTemplate: TemplateRef<any>;
}

しかし、ボタンのトグルをクリックしてこれをバインドできませんでした。Material Button Toggleは、クリックすると変更イベントを発行するため、ngModelを使用できるようになります。私はこのようなことを試しました：

<mat-toolbar>
    <mat-button-group>
        <mat-button-toggle (click)="change(view.value)">...</mat-button-toggle>
        <mat-button-toggle (click)="change(view.value)">...</mat-button-toggle>
    </mat-button-group>
</mat-toolbar>
<div class="container">
    <div *ngFor="let product of products" [(ngModel)]="grid" #view>
        <a>
        ...
        </a>
    </div>
    <div [(ngModel)]="list" #view>
        <ul>
            <li *ngFor="let product of products">
            ...
            </li>
       </ul>
    </div>
</div>

しかし、change（value）を使用して適切なテンプレートを挿入する方法がわかりません。ngTemplateOutletは適切な解決策かもしれませんが、私はそれを試していません。明らかに、私はこのAngularの機能についてある程度理解していませんが、自分のサイトで他のものを実装することに成功したので、これを達成したいと思います。