@casdl/ngx-rich-snippet

ngx-rich-snippet

This library exports frequently used rich snippet class according to schema.org. Also it provides some services. This libary is Angular Universal compatible.

Dependencies

• ngx-json-ld

Installation

To install this library, run:

$ npm install ngx-rich-snippet --save

Import

In your AppModule, import the RichSnippetModule with config and services.

import { NgModule } from '@angular/core';
import { 
  RichSnippetModule, 
  RichSnippetConfig, 
  Corporation,
  RsWebPageService,
  RsBreadcrumbService
} from '@casdl/ngx-rich-snippet';

const CORPORATION = new Corporation(... );

export function getRsWebPageDefaults() {
  return {
    author: CORPORATION,
    publisher: CORPORATION,
    copyrightHolder: CORPORATION
  }
}

const RICH_SNIPPET: RichSnippetConfig = {
  baseUrl: environment.baseUrl,
  defaults: {
    rsWebPage: getRsWebPageDefaults
  }
};

@NgModule({
  imports: [
    RichSnippetModule.forRoot(RICH_SNIPPET, [
      RsWebPageService,
      RsBreadcrumbService
    ])
  ],
})
export class AppModule { }

Once imported you can subscribe to the "webpage" and "breadcrumb" observables in your App component's HTML using ngx-json-ld.

app.component.ts

import { Component } from '@angular/core';

import { 
  RsWebPageService, 
  RsBreadcrumbService 
} from '@casdl/ngx-rich-snippet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  rsBreadcrumb = this.rsWebPageService.current;
  rsWebPage = this.rsBreadcrumbService.current;

  constructor(
    private rsWebPageService: RsWebPageService,
    private rsBreadcrumbService: RsBreadcrumbService
  ) {}
}

app.component.html

<!-- You can now subscribe to the observables -->
<casdl-json-ld [json]="rsBreadcrumb"></casdl-json-ld>
<casdl-json-ld [json]="rsWebPage"></casdl-json-ld>

Services

• BreadcrumbService - This handles the BreadcrumbList rich snippet on route change.
• WebPageService - This handles the WebPage rich snippet on route change.

Config

• baseUrl - required - For example "https://www.example.com/"
• defaults - optional

License

MIT © Cassius de Leeuwe - Jan IT