AngularDart Passing Toggle Event from one component to another Component

Question

From here :

https://github.com/dart-lang/angular_components_example/blob/master/example/app_layout_example/lib/app_layout_example.html

I want to split this template in two templates:

one for sidebar <material-drawer>, named for example sidebar_component.{dart,html}
one other for <div class="material-content">, named for example app_component.{dart,html}

Question:

How to reach <material-drawer> from sidebar_component, with <material-button icon class="material-drawer-button" (trigger)="drawer.toggle()"> into app_component?

Ted Sander Ted Sander · Accepted Answer · 2018-08-28T06:28:44

Components are encapsulated on purpose. So there isn't a super easy way to reach into the encapsulation of one component from the other.

What you can do is create a passthrough from one component to the other.

<side-bar #sidebar></side-bar>
<app-component (openSideBar)="sidebar.toggle()"></app-component>

sidebar_component

@Component()
class SidebarComponent {
  @ViewChild(MaterialPersistentDrawerDirective)
  MaterialPersistentDrawerDirective drawer;

  void toggle() => drawer.toggle();
}

app_component.dart

@Component()
class AppComponent {
  final _openSideBar = StreamController<void>();

  @Output()
  Stream<void> openSideBar => _openSideBar.stream;

  // This is getting called by the trigger of the button click
  void onButtonClick() => _openSideBar.add();
}

I would say that for me passing all of these events feels like a bit of a smell. The components themselves are breaking encapsulation and so I wouldn't architect the app exactly like that.

I would probably have the contents of the drawer be a component, and perhaps the header and body depending on how complex they got. To have something more like this:

<material-drawer #drawer>
  <side-bar *deferredContent></side-bar>
</material-drawer>
<div class="material-content">
  <app-header class="material-header shadow" (triggerDrawer)="drawer.toggle()">
  </app-header>
  <router-outlet></router-outlet>
</div>

I find it better to keep the app-layout logic in the same components if possible and encapsulate the pieces of that. You could also pass the drawer as an input, but then you are making those highly coupled which I tend to try not to do.

AngularDart Passing Toggle Event from one component to another Component

1 Answers