In Dart Angular2 how can I update site header title based on active component?

Question

I am building an Angular2/Dart application in which i like to change the page header title based on active component.

I have found an answer which is based on rxjs Subject as explained here. How can I achieve the same without using rxjs Subject as Observable or more specifically is there any other ways to do this in angular2-dart directly?

Here is working plunker which is based on rxjs Subject lib.

<h1>{{componentTitle}}<h1>

score 2 · Accepted Answer · answered Jul 18 '16 at 16:42

In Dart you use Stream and StreamController instead of Observable and Subject:

@Injectable()
export class RouteNames{
  StreamController<String> _nameController = new StreamController<String>();
  String get name => _nameController.stream;

  void newName(String name) => _nameController.add(name);
}

then you can subscribe like:

AppComponent(this._routeNames){
  _routeNames.name.listen((n) => this.routeName = n);
}

and updates can be sent like:

HeroListComponent(
  this._service,
  this._router,
  this._routeParams,
  this._routeNames:RouteNames){
    this._selectedId = +routeParams.get('id');
     _routeNames.newName('Heroes');
}

To support multiple subscribers you need to make the stream a broadcaststream:

@Injectable()
export class RouteNames{
  StreamController<String> _nameController = new StreamController<String>.broadcast();

  public get name => _nameController.stream;

  newName(String name) => _nameController.add(name);
}

In Dart Angular2 how can I update site header title based on active component?

1 Answers1