@acpaas-ui/ngx-context

This package manages meta tags and other SEO properties.

Usage

import { ContextModule, ContextService } from '@acpaas-ui/ngx-context';

Documentation

Visit our documentation site for full how-to docs and guidelines

Different ways to set tags and other SEO properties.

Set defaults

You can set defaults and other options for the module by using the forRoot() option in the import section:

API

| Name | Default value | Description | | ----------- | ------ | -------------------------- | | useTitleSuffix: boolean; | false | Add an optional title suffix. | | extendTitle: boolean; | false | Append parent page titles (when using router context). | | titleDelimiter: string; | '|' | The separator to use when extendTitle is true. | | defaults: Context; | {} | Default values for the meta tags. Have a look at the list down below for an overview of possible tags. | | routerContext: boolean; | true | Listen for meta data on the route changes. |

Example

@NgModule({
    imports: [
        ContextModule.forRoot({
            useTitleSuffix: true,
            extendTitle: true,
            titleDelimiter: ' | ',
            defaults: {
                titleSuffix: 'Context Module',
            },
            routerContext: true,
        }),
    ]
})

Set tags on routes

You can set tags on routes using the data property. The ContextService will subscribe to the router and pick up these tags automatically.

export const CONTEXT_EXAMPLES_ROUTES: Routes = [
    {
        path: '',
        component: ContextDemoPageComponent,
        pathMatch: 'full',
        data: {
            meta: {
                page: 'Context example page',
                title: 'Context',
                description: 'Description of the context example page',
                metatags: 'Antwerp UI, Angular, context',
            },
        },
    },
];

Set tags on routes

You can set tags manually in your components using the loadContext method as well. This is useful for async data or generic routes.

import { ContextService } from '@acpaas-ui/ngx-context';

@Component({
    providers: [
        ContextService,
    ],
})

export class ContextDemoPageComponent {
    constructor(private contextService: ContextService) {}

    public setTitle() {
        this.contextService.updateContext({
            title: 'New context example title',
        });
    }
}

<button class="a-button" (click)="setTitle()">Set title</button>

Default available tags

The most used tags are available in the Context interface. You are however, free to use whichever tag you need in the format [key: string]: string;.

• title
• titleSuffix
• description
• favIcon
• og:url
• og:type
• og:title
• og:description
• og:image
• fb:app_id
• og:locale
• og:locale:alternate
• og:see_also
• og:updated_time
• twitter:card
• twitter:site
• twitter:creator

Contributing

Visit our Contribution Guidelines for more information on how to contribute.