Skip to main content

SponsoredResults

Overview​

The SponsoredResultsComponent displays a list of sponsored links (promoted results) relevant to the current search query. It fetches and shows up to three sponsored results, each with a title, link, and a "PROMOTED" badge.

Features​

  • Fetches sponsored links based on the current query
  • Displays up to three sponsored results
  • Each result includes a title, external link icon, and a promoted badge
  • Fully standalone and accessible (uses ARIA roles)

Usage​

<sponsored-results></sponsored-results>

Example​

@Component({
  selector: 'my-component',
  template: `
    <sponsored-results />
  `,
  imports: [SponsoredResultsComponent]
})
export class MyComponent {}

Notes​

  • The component uses the application's sponsored links configuration and the current query to fetch results.
  • The promoted badge appears on hover for accessibility and clarity.

Schema​

  • The component injects AppStore and QueryParamsStore to access app state and current query.
  • It computes the sponsored links and fetches up to three relevant results.
  • Results are displayed as a list, each with a title, external link, and a "PROMOTED" badge.