AngularDart Dialog service

0
votes

I need to open a dialog (modal) in a component in an ngFor loop. I'm pretty sure repeating the modal inside my component is not the answer.

I'm looking for a way to have a Dialog Service in AngulatDart, in Angular2 (TS) I would do something like :

@Injectable()
export class MyDialogService {
  constructor(private dialog: MdDialog) {
  }

  public openDialog() {
    let dialogRef: MdDialogRef<MyDialogComponent>;
    dialogRef = this.dialog.open(MyDialogComponent);
    return dialogRef.afterClosed();
  }
}

I didn't find a way to do the same in AngularDart

2
dartangular-dart
What is the problem? Did you check the dialog or popup component in github.com/dart-lang/angular_components – Günter Zöchbauer
The problem is that I don't wan't to include my dialog into my component, so I may need to call a service for that. – Alex
I got that, but I don't understand yet what prevents you from doing that. – Günter Zöchbauer
@GünterZöchbauer What prevents me is that I don't know how :-) I can't find an equivalent to MdDialog/MdDialogRef in dart. – Alex
I don't know what they do because I never used Angular TS material components. – Günter Zöchbauer

2 Answers

1
votes

As Gunter mentioned, there is no provided "DialogService" in the set of AngularDart components. You could file a feature request, but I imagine creating such a service would be really easy - you could add a <material-dialog> in your root level component and expose your root component as an injectable service to show or hide it.

1
votes

As suggested by Günter and matanlurey, I end up creating a simple service with a LazyEventEmitter to trigger the dialog :

dialog_service.dart

@Injectable()
class DialogService {
  final LazyEventEmitter<bool> modalEvents = new LazyEventEmitter<bool>();

  DialogService() {
  }

  void openDialog() {
    modalEvents.add(true);
  }
}

The parent component (eg AppComponent) contains the Dialog component :

dialog_component.html

<modal [(visible)]="showDialog">
  <material-dialog headered class="headered-dialog">
    [...]
  </material-dialog>
</modal>

dialog_component.dart

@Component(
  selector: 'my-dialog',
  styleUrls: const ['dialog_component.css'],
  templateUrl: 'dialog_component.html',
  directives: const [materialDirectives],
  providers: const [materialProviders]
)
class DialogComponent implements OnInit {
  final DialogService _dialogService;
  bool showDialog = false;

  DialogComponent(this._dialogService);

  @override
  ngOnInit() {
    _dialogService.modalEvents.listen((showDialog) {
      this.showDialog = showDialog;
    });
  }
}