AngularDart dynamically change the page title

3
votes

One of my components pulls a page title (and content) from MongoDB based off of the route and stores the title in an instance variable of that component's class. What would be the best way to give some mustaches in the <title> tag a variable to display such as <title>Site Title | {{pageName}}</title>? The <title> tag is outside of the scope of the component. Maybe a controller would fit this use case but I'm not really sure what the state of the controller directive or the root object is. I thought about making a service and injecting it in both but that seems like overkill. Is there a better way to do this? Thanks!

3
dartangular-dart

3 Answers

2
votes

I ended up making a new component and a service.

My simplified index.html (Pretty much no changes):

<html ng-app>
    <title>Site Title</title>
</head>
<body></body>

Service to store one variable:

import 'package:angular/angular.dart';

@Injectable()
class Global {
  String pageTitle;

  Global();
}

And component with a selector of title:

library title;

import 'package:angular/angular.dart';
import 'package:mypackage/service/global.dart';

@Component(
    selector: 'title',
    template: 'Site Title | {{titleComp.global.pageTitle}}',
    publishAs: 'titleComp',
    useShadowDom: false)
class TitleComponent {
  final Global global;

  TitleComponent(this.global);
}

I then injected Global into another component and modified global.pageTitle whenever a new page was loaded.

I would love to hear any improvements to this or ways to use a root controller or root scope.

1
votes

I'm fairly certain this is not possible -- I don't think angular is able to do any interpolation outside the body tag. Your best bet is to use the Document.title() method.

0
votes

You can use something like that

<title ng-bind="header"></title>

And then inside your Controller

testController = function($scope, $rootScope) {
   $scope.someFunction = function() {
      $rootScope.header = "Test";
   }
}