Angular 2 have a built-in service called Title, while in angularjs or angular 1 we were maintaining it through the routing or through the service. By using the Title service provided by Angular 2, in 2 minute every thing will be set without any complication, even we don't need to understand the login behind it. Enough talked let's see what we need and how to set it.
I have a project created by Angular-Cli, I will use this project for demo.
Open our app.module.ts file and adjust following lines
import { BrowserModule, Title } from '@angular/platform-browser';
........
........
providers: [..., Title],
bootstrap: [AppComponent]
Why we added title in providers
?
It is recommended providing application-wide services in the root application component, AppComponent.
Now open our app.component.ts or whatever is our root component and adjust the code as follows:
import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public constructor(private titleService: Title ) { }
public setTitle( newTitle: string) {
this.titleService.setTitle( newTitle );
}
}
See the setTitle method, it will automatically play for us.
Here is our app.compnent.html complete file:
<div class="container">
<router-outlet></router-outlet>
</div>
Please don't ask me to explain these three lines.
Very important, remove the title from our index.html page otherwise it will not work.
Where are setting for title, we have not set yet. We don't need to define the till in our routing .
Simply open any component or page and add
<title>My New Title</title>
App Component Automatically read it and show the title in browser.
Till now we talked about the static titles what about the dynamic ones???
Let's say I have a page called blogdetail, it have nothing but a blank page to test
Add following lines according to your need
// In blog-detail component typescript file
title:string = 'Blog Detail Page';
ngOnInit() {
// Take the data from database
// Set the title now
this.title = someObject.someProperty;
}
Put in Blog Detail Page HTML
<title>{{title}}</title>
I thing I am talking too much for this simple post.
Enjoy it.
For further detail if I missed anything, you can check this official page https://angular.io/docs/ts/latest/cookbook/set-document-title.html
![]() |
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
By Ali Adravi On 14 Apr, 17 Viewed: 5,024 |
@Input and @Output decorator ar used to pass data/communicate between components, @input is used to pass data from parent to child component on the other hand @Output is use to notify the parent by using EventEmitter. Take the simple example of customers list parent page and add/edit child... By Ali Adravi On 30 Sep 2017 Viewed: 2,107
Upload file with data by clicking on button or by drag and drop, is the topic of this article. We will try to create an image gallery by uploading files and save data into database and images into a folder. We will try to create a component in a way that it can be used anywhere in entire... By Ali Adravi On 24 Sep 2017 Viewed: 40,971
Angular 2 insert update, delete, search, sort feature we will try in this article which we will improve with dynamic component loading and image upload with drag and drop feature in coming articles with the same base code. We are going to use Angular-CLI 4 for this application. What we need to... By Ali Adravi On 03 Sep 2017 Viewed: 25,716
Angular 2 gives full control to add or remove component in other component programmatically by simple steps. In this article we are going to see how to add, remove experience component to any other component, we will also try to pass some values to component from parent to child component to see if... By Ali Adravi On 27 Aug 2017 Viewed: 50,293
Createing accordion demo in Angular 2 is more than easy, Angular have rich of conditional features which we will see in this article, like how to apply more than one class on the basis of some conditional values. For this demo we are not goign to write some fancy CSS and animation but use the... By Ali Adravi On 19 May 2017 Viewed: 11,878