toggle_menu_component.dart

import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular_components/src/components/glyph/glyph.dart';

@Component(
  selector: 'toggleMenu',
  directives: const [GlyphComponent],
  template: r'''
    <glyph [icon]="icon" size="x-large"></glyph>{{text}}
  ''',
  styles: const ['''
    :host {
      cursor: pointer;
    }
  ''']
)
class ToggleMenuComponent implements AfterViewInit {
  @Input('element')
  DivElement element;

  @Input('text')
  String text;

  String icon = 'keyboard_arrow_right';

  ToggleMenuComponent();

  @HostListener('click', const ['\$event']) 
  void onClick(event) {
    if (element.style.display == 'none') {
      element.style.display = 'block';
      icon = 'keyboard_arrow_down';
    }
    else {
      element.style.display = 'none';
      icon = 'keyboard_arrow_right';
    }
  }

  @override
  ngAfterViewInit() {
    element.style.display = 'none';
  }
}