acq-ng-metadata
Version:
Angular 2 decorators and utils for Angular 1.x
68 lines (49 loc) • 2.21 kB
Markdown
**Global Injectables**
These services can be injected globally ( standard Angular 1 injectables )
- [Title](#title)
---
## Title
A service that can be used to get and set the title of a current HTML document.
Since an Angular 2 application can't be bootstrapped on the entire HTML document (`<html>` tag),
it is not possible to bind to the text property of the HTMLTitleElement elements (representing the `<title>` tag).
Instead, this service can be used to set and get the current title value.
> this is not true in terms of Angular 1, but adhering to Angular 2 principles we build cleaner and migration ready codebase
**NOTE:**
you need to import this service and register within root component ( root module in Angular 1 terms )
| members | Type | Description |
| ----------------- | ---------- |--------------------------------------------- |
| **setTitle(newTitle:string):void** | `Function` | Set the title of the current HTML document. |
| **getTitle():string** | `Function` | Get the title of the current HTML document. |
**example:**
> [Live example can be found in Playground](https://github.com/ngParty/ng-metadata/tree/master/playground/app/components/title)
```typescript
// app.component.ts
import { Component } from 'ng-metadata/core';
import { Title } from 'ng-metadata/platform-browser-dynamic';
@Component({
selector: 'my-app',
template: `
<p>Document title is: {{ $ctrl.title }}</p>
<p>
Select a title to set on the current HTML document:
</p>
<ul>
<li><a ng-click="$ctrl.setTitle( 'Good morning!' )">Good morning</a>.</li>
<li><a ng-click="$ctrl.setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
<li><a ng-click="$ctrl.setTitle( 'Good evening!' )">Good evening</a>.</li>
</ul>
`
})
export class AppComponent {
constructor(private titleService: Title ) {}
get title(): string { return this.titleService.getTitle() }
setTitle( newTitle: string) {
this.titleService.setTitle( newTitle );
}
}
// main.ts
import { bootstrap, Title } from 'ng-metadata/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap( AppComponent, [ Title ] );
```