Tuesday, 11 October 2016

Building A Notepad with Dart Angular 2 : Part Five

Another step in my personal 'Learn Angular 2' project... Here's some details of what made it into v0.05. I'd recommend looking at the entire project alongside this post.

It's time we added a proper dialog. I put off doing this as I thought it wouldn't involve much Angular 2. Turns out it covers some very important ground!

So let's plan out what we need to do. The Editor component will have a flag to show/hide the About dialog. The toolbar will have to be able to set it to True so that it appears and the dialog itself will have to set it to False so that it closes. So we need to bind this flag to the two components and be able to update it.

The dialog can be shown or hidden using [hidden] (about_component.html). This value is from the scope of the Editor.

div id="overlay" [hidden]="!showDialog"

The components get the value easily enough but there is a little bit more work to let the Editor know it has been updated. An @Output property fires and event based on showDialog changing.

import 'package:angular2/core.dart';

@Component(
    selector: 'about-dialog',
    templateUrl: 'about_component.html')
class AboutDialogComponent {
  @Input()
  bool showDialog = false;

  @Output()
  EventEmitter showDialogChange = new EventEmitter();

  void closeTheDialog() {
    showDialog = false;
    showDialogChange.emit(showDialog);
  }
}

This does seem more complicated than Angular 1 doesn't it? However the default two way binding of version 1 has performance implications and can easily lead to some tricky dependencies. The payoff of more control and clearer code makes sense to me - though perhaps hard to see in this simple example.

The toolbar has a similar way to announce the change of value.

  void aboutHandler() {
    showDialog = true;
    showDialogChange.emit(showDialog);
  }

That's it for this time. Check the app out np8080.win and the code is on GitHub.