ankitdadhich ankitdadhich - 3 months ago 17
AngularJS Question

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

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)

  2. Also I would like to set it from controller as well.
    vm.title = "current page title"
    (Accepted Answer Satisfies This Scenario Only)



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


enter image description here

Answer

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