CODEWITHSUNDEEP
javascriptangularjsangularsingle-page-application
AngularM
AngularM

Reputation: 16628

Angular 2 - how do I make my index.html files title and meta tags for keywords and description dynamic

Angular 2 - how do I make my index.html files title and meta tags for keywords and description dynamic.

I'm using typescript with angular 2.

Example of my tags:

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>title needs to be dynamic</title>
    <base href="/"></base>

    <meta charset="UTF-8">
    <meta name="fragment" content="!"/>
    <meta name="description" content="description needs to be dynamic"/>
    <meta name="keywords" content="keywords needs to be dynamic" />

This is my route:

{ path: '/', component: Home, as: 'Home', data:{title: 'Welcome Home'}},

I've tried this but it didnt work:

 <title>{{title}}</title>

Upvotes: 2

Views: 3481

Answers (2)

Burak Tasci
Burak Tasci

Reputation: 907

There's also the @ngx-meta/core plugin, which might help you to make page titles and meta tags dynamically (on the route config and class constructor level).

Please refer the repository for instructions.

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

There is a Title service. Otherwise you're currently on your own. You can use pure JS functionality querySelector()...
There are plans to support more tags in the <head>.
I'm not too deep into SEO but I think it would be better to use a server side solution for meta tags. I doubt search engines pick up meta tags that are added after the initial page load.

Plunker (doesn't update the window title because the app runs in an iframe but using the browsers inspect tool shows it in the <head><title>....</title></head>)

Upvotes: 6

Related Questions