title: Angular Material Button Toggle to switch between layout/views
body: <p>I'm building an Angular 7 site with Angular Material (I'm kind of new in web dev).
  I'm stuck with something that seems ridiculously trivial: in my products.component I want to use the <a href="https://material.angular.io/components/button-toggle/api#classes" rel="nofollow noreferrer">Angular Material Button Toggle</a> to switch between a grid view (default) and a list view of my products. A feature we see on so many ecommerce. Here is my simplified code:</p>
  
  <pre><code>&lt;mat-button-toggle-group value="grid"&gt;
      &lt;mat-button-toggle value="grid"&gt;
          &lt;mat-icon&gt;view_module&lt;/mat-icon&gt;
      &lt;/mat-button-toggle&gt;
      &lt;mat-button-toggle value="list"&gt;
          &lt;mat-icon&gt;view_list&lt;/mat-icon&gt;
      &lt;/mat-button-toggle&gt;
  &lt;/mat-button-toggle-group&gt;
  </code></pre>
  
  <p>The grid view of the products (has to be the default view):</p>
  
  <pre><code>&lt;div *ngFor="let product of products"&gt;
      &lt;a&gt;
         ...
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The list view of the products:</p>
  
  <pre><code>&lt;div&gt;
      &lt;ul&gt;
          &lt;li *ngFor="let product of products"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried with ViewChild, NgModel, NgSwitch, TemplateRef, all kind of solutions... I'm missing something and I have spend a considerable time on this so I'm relying on you! Thanks in advance</p>
  
  <hr>
  
  <p>Edit: without routing implemented my app.component looks like this:</p>
  
  <pre><code>&lt;app-header&gt;
  &lt;app-products&gt;
  &lt;app-footer&gt;
  </code></pre>
  
  <p>My products.component is built like this (simplified)</p>
  
  <pre><code>&lt;mat-toolbar&gt;
      &lt;mat-button-group&gt;
      ...
      &lt;/mat-button-group&gt;
  &lt;/mat-toolbar&gt;
  &lt;div class="container"&gt;
      &lt;div *ngFor="let product of products"&gt;
          &lt;a&gt;
          ...
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;ul&gt;
              &lt;li *ngFor="let product of products"&gt;
              ...
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So all in one component. Create two child components for the grid view and the list isn't the way to go, right ? I've tried anyway by moving the code inside the div.container in another component where I've experiment with this:</p>
  
  <pre><code>@Component({ 
  templateUrl:
  `
      &lt;div #listTemplate&gt;
        &lt;p&gt;List View&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div #gridTemplate&gt;
        &lt;p&gt;Grid View&lt;/p&gt;
      &lt;/div&gt;
  `
  })
  export class ... {
      @ViewChild('listTemplate') listTemplate: TemplateRef&lt;any&gt;;
      @ViewChild('gridTemplate') gridTemplate: TemplateRef&lt;any&gt;;
  }
  </code></pre>
  
  <p>But I've failed to bind this with the click on the button toggle. The Material Button Toggle emits a change event on click so it should let me use ngModel. I've tried something like this:</p>
  
  <pre><code>&lt;mat-toolbar&gt;
      &lt;mat-button-group&gt;
          &lt;mat-button-toggle (click)="change(view.value)"&gt;...&lt;/mat-button-toggle&gt;
          &lt;mat-button-toggle (click)="change(view.value)"&gt;...&lt;/mat-button-toggle&gt;
      &lt;/mat-button-group&gt;
  &lt;/mat-toolbar&gt;
  &lt;div class="container"&gt;
      &lt;div *ngFor="let product of products" [(ngModel)]="grid" #view&gt;
          &lt;a&gt;
          ...
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div [(ngModel)]="list" #view&gt;
          &lt;ul&gt;
              &lt;li *ngFor="let product of products"&gt;
              ...
              &lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But don't know how insert the appropriate template with change(value). ngTemplateOutlet could be an appropriate solution but I haven't tried it. Obviously I'm lacking some understanding of this Angular features but I've succeeded in implemeting other things in my site, so I want to achieve this one.</p>