Angular Dart Component Reference Unreachable

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.

Ted Sander Ted Sander · Accepted Answer · 2018-11-28T07:35:16

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"

Angular Dart Component Reference Unreachable

1 Answers