CODEWITHSUNDEEP
angulardartangular-dartangular-componentsangular-dart-routing
Tushar Rai
Tushar Rai

Reputation: 2519

AngularDart - How to replace a component in AppLayout

I want to replace component-a from component-b and component-c while on click on material-navigation item inside material-content of App Layout.

app_layout_component.dart

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;
}

app_component.html

<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
  <material-list *deferredContent>
    <div group class="mat-drawer-spacer"></div>
    <div group>
      <material-list-item>
        <material-icon icon="inbox"></material-icon>Inbox
      </material-list-item>
      <material-list-item>
        <material-icon icon="star"></material-icon>Star
      </material-list-item>
      <material-list-item>
        <material-icon icon="send"></material-icon>Sent Mail
      </material-list-item>
      <material-list-item>
        <material-icon icon="drafts"></material-icon>Drafts
      </material-list-item>
    </div>
    <div group>
      <div label>Tags</div>
      <material-list-item>
        <material-icon icon="star"></material-icon>Favorites
      </material-list-item>
    </div>
  </material-list>
</material-drawer>
<material-content>
  <header class="material-header shadow">
    <div class="material-header-row">
      <material-button icon
                       class="material-drawer-button" (trigger)="drawer.toggle()">
        <material-icon icon="menu"></material-icon>
      </material-button>
      <span class="material-header-title">Simple Layout</span>
      <div class="material-spacer"></div>
      <nav class="material-navigation">
        <a href="#AppLayout">Link 1</a>
      </nav>
      <nav class="material-navigation">
        <a href="#AppLayout">Link 2</a>
      </nav>
      <nav class="material-navigation">
        <a href="#AppLayout">Link 3</a>
      </nav>
    </div>
  </header>

  <component-a></component-a>

</material-content>

Upvotes: 1

Views: 442

Answers (1)

rkj
rkj

Reputation: 9311

You have multiple options:

  • use NgIfs to control which widget shows based on some condition - this is nice if you have two or maybe three standard widgets
  • use DynamicComponent if your clients need to display any components - then you can just pass the *ComponentFactory for any widget
  • use Router if you have more well defined components and want the state to be easily reflected in the URL.

Upvotes: 2

Related Questions