@acknow-srl/title

Allows you to configure a common title, with and optional variabile part, for your apps.

Usage no npm install needed!

<script type="module">
  import acknowSrlTitle from 'https://cdn.skypack.dev/@acknow-srl/title';
</script>

README

Title

Allows you to configure a common title, with and optional variabile part, for your apps.

AckTitleModule (Module)

Methods

  • forRoot(config: AckTitleConfig): void: configures the format for the title.

AckTitleConfig (Interface)

  • format (string): Title format. You can use {{TITLE}} placeholder to change the title variable part based on the page/route.

AckTitle (Service)

It is provided in root, so it is available to the whole app.

Methods

  • get(): string: Returns the title.
  • set(title: string): void: Sets the title variable part, according to the configured format.

Example

/**
 * 1. Import the module and the configuration model in your main module (usually app.module.ts).
 */

import { AckTitleModule, AckTitleConfig } from '@acknow-srl/title';

/**
 * 2. Add the module to your app imports and configure it.
 */

// By using this format, {{TITLE}} will be the title variable part. Any component can override it using AckTitle.set() method.

const config: AckTitleConfig = {format: '{{TITLE}} - My app name'};

@NgModule({
  declarations: [
    AppComponent
    ...
  ],
  imports: [
    ...
    AckTitleModule.forRoot(config),
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

/**
 * 3. Implement AckTitle service in your components.
 */

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

import { AckTitle } from '@acknow-srl/title';

@Component({
    selector: 'my-component',
    templateUrl: 'my-component.html',
    styleUrls: ['my-component.css']
})
export class MyComponent implements OnInit {

    constructor(private _title: AckTitle) {
    }

    ngOnInit() {

        // The content for the HTML <title> tag will be: 'My component title - My app name'.

        this._title.set('My component title');

    }

}