Ngx-json-ld NPM

ngx-json-ld

A small component to easily bind JSON-LD schema to Angular templates.

Demo

Installation

To install this library, run:

$ npm install ngx-json-ld --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import library module
import { NgxJsonLdModule } from 'ngx-json-ld';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Register module
    NgxJsonLdModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

Once the library is imported, you can use the ngx-json-ld component.

@Component({
  selector: 'app',
  template: `<ngx-json-ld [json]="schema"></ngx-json-ld>`
})
class AppComponent {
  schema = {
    '@context': 'http://schema.org',
    '@type': 'WebSite',
    'name': 'angular.io',
    'url': 'https://angular.io'
  };
}

Output

<ngx-json-ld>
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": "angular.io",
      "url": "https://angular.io"
    }
  </script>
</ngx-json-ld>