# Set or Update new Title and Meta Tag- Angular

**Problem** - In Angular applications, we usually see the same title and meta tag along with all pages. So problem is, can we update or set different titles and meta tags in the angular applications?

The answer is **Yes**. But How?

This article is all about setting/updating different titles and meta tags along with all pages.


## Title

To set different “Title” on the page(head section)

Step 1-

```
import { Title} from '@angular/platform-browser';

``` 

Step 2-


```
public constructor(private titleService: Title) { }

ngOnInit() {
    this.titleService.setTitle("your page title");
  }

``` 


Same steps you can repeat on different pages where you want to set new Title of Page


## Meta
To set/update different “Meta” on the page(head section)

Step 1-

```
import { Meta} from '@angular/platform-browser';

``` 

Step 2-

```
public constructor(private metaService: Meta) { }

``` 

Add New Meta Tags

```
ngOnInit() {
    this.metaService.addTags([
      {name: 'keywords', content: 'your keywords content'},
      {name: 'description', content: 'your page description content'},
    ]);
  }

``` 

Update Meta Tag

```
ngOnInit() {
    this.metaService.updateTag({ name: 'keywords', content: 'your updated keywords content'});
  }

``` 

Remove Meta Tag

```
ngOnInit() {
    this.metaService.removeTag({ name: 'keywords', content: 'your updated keywords content'});
  }

``` 

Happy Learning….👏👏👏👏