title: AngularDart - How to replace a component in AppLayout
body: <p>I want to replace <code>component-a</code> from <code>component-b</code> and <code>component-c</code> while on click on <code>material-navigation</code> item inside <code>material-content</code> of App Layout.</p>
  
  <p>app_layout_component.dart</p>
  
  <pre><code>import 'package:angular/angular.dart';
  import 'package:angular_components/app_layout/material_persistent_drawer.dart';
  import 'package:angular_components/content/deferred_content.dart';
  import 'package:angular_components/material_button/material_button.dart';
  import 'package:angular_components/material_icon/material_icon.dart';
  import 'package:angular_components/material_list/material_list.dart';
  import 'package:angular_components/material_list/material_list_item.dart';
  import 'package:angular_components/material_toggle/material_toggle.dart';
  
  @Component(
      selector: 'app-layout',
      directives: const [
        DeferredContentDirective,
        MaterialButtonComponent,
        MaterialIconComponent,
        MaterialListComponent,
        MaterialListItemComponent,
        MaterialPersistentDrawerDirective,
        MaterialToggleComponent,
  
      ],
      templateUrl: 'app_layout_component.html',
      styleUrls: const [
        'app_layout_component.css',
        'package:angular_components/app_layout/layout.scss.css',
      ])
  class AppLayoutComponent {
    bool end = false;
  }
  </code></pre>
  
  <p>app_component.html</p>
  
  <pre><code>&lt;material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null"&gt;
    &lt;material-list *deferredContent&gt;
      &lt;div group class="mat-drawer-spacer"&gt;&lt;/div&gt;
      &lt;div group&gt;
        &lt;material-list-item&gt;
          &lt;material-icon icon="inbox"&gt;&lt;/material-icon&gt;Inbox
        &lt;/material-list-item&gt;
        &lt;material-list-item&gt;
          &lt;material-icon icon="star"&gt;&lt;/material-icon&gt;Star
        &lt;/material-list-item&gt;
        &lt;material-list-item&gt;
          &lt;material-icon icon="send"&gt;&lt;/material-icon&gt;Sent Mail
        &lt;/material-list-item&gt;
        &lt;material-list-item&gt;
          &lt;material-icon icon="drafts"&gt;&lt;/material-icon&gt;Drafts
        &lt;/material-list-item&gt;
      &lt;/div&gt;
      &lt;div group&gt;
        &lt;div label&gt;Tags&lt;/div&gt;
        &lt;material-list-item&gt;
          &lt;material-icon icon="star"&gt;&lt;/material-icon&gt;Favorites
        &lt;/material-list-item&gt;
      &lt;/div&gt;
    &lt;/material-list&gt;
  &lt;/material-drawer&gt;
  &lt;material-content&gt;
    &lt;header class="material-header shadow"&gt;
      &lt;div class="material-header-row"&gt;
        &lt;material-button icon
                         class="material-drawer-button" (trigger)="drawer.toggle()"&gt;
          &lt;material-icon icon="menu"&gt;&lt;/material-icon&gt;
        &lt;/material-button&gt;
        &lt;span class="material-header-title"&gt;Simple Layout&lt;/span&gt;
        &lt;div class="material-spacer"&gt;&lt;/div&gt;
        &lt;nav class="material-navigation"&gt;
          &lt;a href="#AppLayout"&gt;Link 1&lt;/a&gt;
        &lt;/nav&gt;
        &lt;nav class="material-navigation"&gt;
          &lt;a href="#AppLayout"&gt;Link 2&lt;/a&gt;
        &lt;/nav&gt;
        &lt;nav class="material-navigation"&gt;
          &lt;a href="#AppLayout"&gt;Link 3&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  
    &lt;component-a&gt;&lt;/component-a&gt;
  
  &lt;/material-content&gt;
  </code></pre>