Clever Geek Handbook

AngularDart dynamically changes page title

One of my components pulls the title (and content) from MongoDB based on the route and stores the title in an instance variable of that component class. What would be the best way to give some mustache in a tag <title>

to display a variable for example <title>Site Title | {{pageName}}</title>

? The tag <title>

is outside the scope of the component. Perhaps a controller would fit this use case, but I'm not entirely sure what the state of a controller directive or root object is. I was thinking about doing a favor and introducing it in both, but that seems like overkill. Is there a better way to do this? Thank!

+3


source to share


3 answers


As a result, I created a new component and service.

My simplified index.html

(Little to no change):

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

Service for storing one variable:

import 'package:angular/angular.dart';

@Injectable()
class Global {
  String pageTitle;

  Global();
}


And a component with a title selector:

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);
}

Then I injected Global into another component and modified global.pageTitle

whenever a new page was loaded.

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

+2


source


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



+1


source


You can use something like this

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

And then inside your controller

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


source






More articles:


All Articles