Document Management

/**
 * A service for managing HTML <meta> tags.
 * Provides methods for adding, updating, retrieving, and removing meta tags
 * for SEO, social sharing, and browser configuration.
 */
class Meta {
  /**
   * Retrieves or creates a specific <meta> tag element in the current HTML document
   * @param tag - The definition of a <meta> element to match or create
   * @param forceCreation - True to create a new element without checking whether one already exists
   * @returns The existing element with the same attributes and values if found, the new element if no match is found, or null if the tag parameter is not defined
   */
  addTag(tag: MetaDefinition, forceCreation?: boolean): HTMLMetaElement | null;

  /**
   * Retrieves or creates a set of <meta> tag elements in the current HTML document
   * @param tags - An array of tag definitions to match or create
   * @param forceCreation - True to create new elements without checking whether they already exist
   * @returns The matching elements if found, or the new elements
   */
  addTags(tags: MetaDefinition[], forceCreation?: boolean): HTMLMetaElement[];

  /**
   * Retrieves a <meta> tag element in the current HTML document
   * @param attrSelector - The tag attribute and value to match against, in the format "tag_attribute='value string'"
   * @returns The matching element, if any
   */
  getTag(attrSelector: string): HTMLMetaElement | null;

  /**
   * Retrieves a set of <meta> tag elements in the current HTML document
   * @param attrSelector - The tag attribute and value to match against, in the format "tag_attribute='value string'"
   * @returns The matching elements, if any
   */
  getTags(attrSelector: string): HTMLMetaElement[];

  /**
   * Modifies an existing <meta> tag element in the current HTML document
   * @param tag - The tag description with which to replace the existing tag content
   * @param selector - A tag attribute and value to match against, to identify an existing tag
   * @returns The modified element
   */
  updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null;

  /**
   * Removes an existing <meta> tag element from the current HTML document
   * @param attrSelector - A tag attribute and value to match against, to identify an existing tag
   */
  removeTag(attrSelector: string): void;

  /**
   * Removes an existing <meta> tag element from the current HTML document
   * @param meta - The tag definition to match against to identify an existing tag
   */
  removeTagElement(meta: HTMLMetaElement): void;
}

import { Meta } from "@angular/platform-browser";
import { Injectable } from "@angular/core";

@Injectable()
export class SeoService {
  constructor(private meta: Meta) {}

  updateSeoTags(title: string, description: string, image?: string) {
    // Update basic SEO tags
    this.meta.updateTag({ name: 'description', content: description });
    this.meta.updateTag({ name: 'keywords', content: 'angular, web, app' });

    // Open Graph tags for social sharing
    this.meta.updateTag({ property: 'og:title', content: title });
    this.meta.updateTag({ property: 'og:description', content: description });
    this.meta.updateTag({ property: 'og:type', content: 'website' });
    
    if (image) {
      this.meta.updateTag({ property: 'og:image', content: image });
    }

    // Twitter Card tags
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.updateTag({ name: 'twitter:title', content: title });
    this.meta.updateTag({ name: 'twitter:description', content: description });
  }

  setCanonicalUrl(url: string) {
    this.meta.updateTag({ rel: 'canonical', href: url });
  }
}

/**
 * A service that can be used to get and set the title of a current HTML document.
 * Since Angular applications can't bind to the <title> tag directly, this service provides
 * programmatic access to the document title.
 */
class Title {
  /**
   * Get the title of the current HTML document
   * @returns The current document title
   */
  getTitle(): string;

  /**
   * Set the title of the current HTML document
   * @param newTitle - The new title to set
   */
  setTitle(newTitle: string): void;
}

import { Title } from "@angular/platform-browser";
import { Component } from "@angular/core";

@Component({
  selector: 'app-home',
  template: '<h1>Welcome Home</h1>'
})
export class HomeComponent {
  constructor(private titleService: Title) {
    this.titleService.setTitle('Home - My Angular App');
  }
}

// In a service
@Injectable()
export class PageTitleService {
  constructor(private title: Title) {}

  setPageTitle(title: string, suffix = 'My App') {
    const fullTitle = `${title} - ${suffix}`;
    this.title.setTitle(fullTitle);
  }

  getCurrentTitle(): string {
    return this.title.getTitle();
  }
}

/**
 * Represents the attributes of an HTML <meta> element.
 * Properties match the attributes of the HTML <meta> tag for document metadata
 * that is important for SEO, social sharing, and browser configuration.
 */
type MetaDefinition = {
  charset?: string;
  content?: string;
  httpEquiv?: string;
  id?: string;
  itemprop?: string;
  name?: string;
  property?: string;
  scheme?: string;
  url?: string;
} & {
  [prop: string]: string;
};

// SEO meta tags
const seoTags: MetaDefinition[] = [
  { name: 'description', content: 'Page description for SEO' },
  { name: 'keywords', content: 'keyword1, keyword2, keyword3' },
  { name: 'author', content: 'Author Name' },
  { name: 'robots', content: 'index, follow' }
];

// Open Graph tags for social sharing
const ogTags: MetaDefinition[] = [
  { property: 'og:title', content: 'Page Title' },
  { property: 'og:description', content: 'Page description' },
  { property: 'og:image', content: 'https://example.com/image.jpg' },
  { property: 'og:url', content: 'https://example.com/page' },
  { property: 'og:type', content: 'website' }
];

// Twitter Card tags
const twitterTags: MetaDefinition[] = [
  { name: 'twitter:card', content: 'summary_large_image' },
  { name: 'twitter:site', content: '@username' },
  { name: 'twitter:title', content: 'Page Title' },
  { name: 'twitter:description', content: 'Page description' }
];