how to set header for each page using component in Angular 1.5

Question

I started with Angular 1.5 component recently. I am having various pages in my application. So I decided to create a <my-title> component which am using inside <my-header> component. As you see in navbar I have First, Second as navigation links. In my application there will be more parent child combinations.

I want to set title of each page by two way.

1. By giving it in partial <my-title>Home</my-title> (see 1.html or 2.html) (Manuel's answer satisfies this Scenario)
2. Also I would like to set it from controller as well. vm.title = "current page title" (Accepted Answer Satisfies This Scenario Only)

I think any one thing can be done from above two options. There are two answers by different person for option 1(Deblaton) and option 2(Manuel). Both answers satisfies respective scenarios. I accepted who answered first correctly.

Updated: If you see file "1.html" on plunker. I am trying to set <my-title> First page</my-title> . but that is not working. My key idea is that developer will give <my-title>Current Page Title</my-title> on partial and it will be shown as per current page when he navigates across.

Please keep in mind I will be exposing only <my-title> to partial and controller. <my-header> will be at one place only. Only Title will be changed. If there are some new pages navigation links will be added to <my-header> .

There is lot of code to copy-paste here. Please visit this PLUNKER .

module.component('myFirstApp', {
   templateUrl: "mainview.html",
   $routeConfig: [
     {path: '/', redirectTo: ['/First'] },
     {path: '/first', name: 'First', component: 'firstComponent'},
     {path: '/second', name: 'Second', component: 'secondComponent'}
   ]
 })

 module.component('firstComponent', {
   templateUrl: "1.html"
 });

 module.component('secondComponent', {
   templateUrl: "2.html"
 });

 module.component('myTitle', {
   template: '<h1>{{model.title}}</h1>'
 });

 module.component('myHeader', {
   templateUrl: "my-header.html"
 });

Answer 1

To me, using component routing, it looks like a good idea to use a controller for handling your title. (with ui-router, I would have used the resolve option).

I decided to inject $rootScope, and use it for sharing title value. You can also do it with a service.

so, the component :

module.component('firstComponent', {
  templateUrl: "1.html",
  controller: ["$rootScope", function($rootScope){
    $rootScope.appVars = $rootScope.appVars || {};
    $rootScope.appVars.title = "Title from Page 1";
  }]
});

and the directive :

module.component('myTitle', {
  template: '<h1>{{$root.appVars.title}}</h1>'
});

Here is your updated plnkr : https://plnkr.co/edit/6PCfznxsJzCPQtBm2oyN?p=preview

Answer 2

You are missing a couple of things in your code.

1. You need to use bindings in order to pass parameters to components
2. You are using the word "model" in your templates to refer to model, but that's not the default one to do that. In here you can do 2 things, you can use $ctrl in templates or define controllerAs in component.

Component example:

module.component('myTitle', {
  template: '<h1>{{model.title}}</h1>',
  controllerAs: 'model',
  bindings: {
    title: '<'
  }
});

Use example:

<my-title title="'I am First'"></my-title>

Note the quotation marks inside the double quotation marks in "'I am First'". You need both because you are passing a string as parameter.

In order to change the title in the header I created a service to allow the communication from components under ng-outlet and outer components because you can not pass data as bindings via routes.

Your Plunker with the changes: https://plnkr.co/edit/ScpJYQItsMQlyd1Eacyi?p=preview