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.
- By giving it in partial
<my-title>Home</my-title>
(see 1.html or 2.html) (Manuel's answer satisfies this Scenario) - 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"
});