https://github.com/michaelsolati/ngmeta

A simple tool for updating meta-tags in an Angular app.
https://github.com/michaelsolati/ngmeta

angular hacktoberfest metadata seo

Last synced: about 1 month ago
JSON representation

A simple tool for updating meta-tags in an Angular app.

• Host: GitHub
• URL: https://github.com/michaelsolati/ngmeta
• Owner: MichaelSolati
• License: mit
• Created: 2016-11-19T19:34:00.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2022-04-10T01:42:28.000Z (over 2 years ago)
• Last Synced: 2024-08-10T05:03:27.573Z (3 months ago)
• Topics: angular, hacktoberfest, metadata, seo
• Language: TypeScript
• Homepage: https://ngmeta.otta.dev/
• Size: 568 KB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ngmeta

[![npm](https://img.shields.io/npm/v/ngmeta)](https://www.npmjs.com/package/ngmeta)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/ngmeta)](https://bundlephobia.com/result?p=ngmeta)

[![GitHub stars](https://img.shields.io/github/stars/MichaelSolati/ngmeta)](https://github.com/MichaelSolati/ngmeta/stargazers)

[![GitHub forks](https://img.shields.io/github/forks/MichaelSolati/ngmeta)](https://github.com/MichaelSolati/ngmeta/network/members)

A tool for updating meta tags in an Angular application.

- [Getting Started](#getting-started)

- [How To Use](#how-to-use)

- [Documentation](#documentation)

- [Interfaces](#interfaces)

- [Functions](#functions)

- [Changes](#changes)

## Getting Started

```bash

npm i ngmeta

```

## How To Use

First import the `NgMeta` as a `provider` into your app.

```TypeScript

import { NgMeta } from 'ngmeta';

...

@NgModule({

  providers: [

    NgMeta

  ],

  bootstrap: [

    AppComponent

  ]

})

export class AppModule { }

```

To dynamically edit this data whenever a page is loaded. Import `NgMeta` into your component, then inside of your constructor pass in the `NgMeta` service as an argument.

```TypeScript

import { NgMeta } from 'ngmeta';

...

export class AppComponent {

    constructor(private ngmeta: NgMeta) {}

}

```

Then in the component we can call our `NgMeta` service `this.ngmeta.setHead()`. This takes an object of the new values for the tags you want. Below we change the title and description data on a page.

```TypeScript

this.ngmeta.setAll({

  title: "Google",

  description:

    "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",

});

```

Now our head data will display

```HTML

  Google

  

```

## Documentation

Full documentation for the NGMeta service is [available here](https://ngmeta.otta.dev).

## Changes

Changes happen, check out [the changelog](https://github.com/MichaelSolati/ngmeta/blob/master/CHANGELOG.md) to see the latest changes.