Angular Dart Component Reference Unreachable - dart

Question

I tried splitting the Angular Dart app layout example to different components but the drawer toggle function is unreachable. When the same code is on one file. The toggle function is reachable.
Original File Content
parent.html
<drawer #drawer="drawer"></drawer>
<div class="material-content">
<navigation (toggleState)="drawer.toggle()"></navigation>
<content></content>
</div>
parent.dart
import 'package:angular/angular.dart';
import 'package:console/src/components/navigation/navigation.dart';
import 'package:console/src/components/drawer/drawer.dart';
#Component(
selector: 'dashboard-layout',
styleUrls: [
'dashboard_layout.css',
],
templateUrl: 'dashboard_layout.html',
directives: [
Drawer,
Navigation,
]
)
class DashboardLayout implements OnInit {
#override
Future<Null> ngOnInit() {
return null;
}
toggleDrawer () {
drawerVisible = !drawerVisible;
print(drawerVisible);
}
}
drawer.html
<material-drawer persistent>
<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>
drawer.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
#Component(
selector: 'drawer',
styleUrls: [
'drawer.css',
'package:angular_components/app_layout/layout.scss.css'
],
templateUrl: 'drawer.html',
directives: [
DeferredContentDirective,
MaterialListComponent,
MaterialListItemComponent,
MaterialPersistentDrawerDirective,
MaterialIconComponent,
]
)
class Drawer extends MaterialDrawerBase implements OnInit {
bool customWidth = false;
bool end = false;
Drawer() : super(visible: true) {
}
#override
Future<Null> ngOnInit() {
return null;
}
}
navigation.dart
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:console/src/components/avatar/avatar.dart';
import 'package:angular_components/laminate/overlay/zindexer.dart';
#Component(
selector: 'navigation',
styleUrls: [
'navigation.css',
'package:angular_components/app_layout/layout.scss.css'
],
templateUrl: 'navigation.html',
directives: [
PopupSourceDirective,
MaterialIconComponent,
MaterialButtonComponent,
MaterialToggleComponent,
MaterialPopupComponent,
DeferredContentDirective,
MaterialPersistentDrawerDirective,
Avatar,
],
providers: [popupBindings, ClassProvider(ZIndexer)],
)
class Navigation implements OnInit {
bool visible = false;
final _toggleRequest = StreamController();
Iterable<RelativePosition> avatarPopupPositions = [
RelativePosition.AdjacentBottomRight
];
#Output()
Stream get toggleState => _toggleRequest.stream;
void toggleDrawer() {
_toggleRequest.add(null);
}
#override
Future<Null> ngOnInit() {
return null;
}
}
navigation.html
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="toggleDrawer()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Console</span>
<div class="material-spacer"></div>
<avatar [userName]="'Someone Awesome'"
popupSource
#source="popupSource"
(trigger)="visible = !visible">
</avatar>
<material-popup
[source]="source" [(visible)]="visible"
[enforceSpaceConstraints]="true"
[preferredPositions]="avatarPopupPositions">
<div style="width: 256px; height: 200px">
Hello, Hello, Hello, Hello.
</div>
</material-popup>
</div>
</header>
Error
[error] The method 'toggle' isn't defined for the class 'Element'.
(package:console/src/layouts/parent/parent.template.dart, line 336, col 18)
So why is #drawer="drawer" An AngularDart Component with the toggle function when everything is in one file but it is a HTML Element when it is split.

Answer 1

The drawer is actually using the exportAs of the drawer component here: https://github.com/dart-lang/angular_components/blob/7f254c89cbbd512cc284a7e9d03bb687f9948bd9/angular_components/lib/app_layout/material_temporary_drawer.dart#L15
It really shouldn't be needed for the component, but we wanted the directive and the component to work the same way.
You would either need to add the exportAs="drawer" or just use the #drawer syntax without using #drawer="drawer"