SelectArticle

Select an article on click or Enter — replace it as the current selection, redirect to a preview route, or emit it — from a single directive.

[selectArticle] selects an article when its host element is clicked or receives an Enter keypress, using one of three strategies.

Minimal example

Selecting a result row

result-row.component.ts

import { Component, input } from "@angular/core";
import { SelectArticleDirective } from "@sinequa/atomic-angular";
import type { Article } from "@sinequa/atomic";

@Component({
  selector: "result-row",
  imports: [SelectArticleDirective],
  template: `<div [article]="article()" selectArticle class="cursor-pointer">{{ article().title }}</div>`,
})
export class ResultRowComponent {
  readonly article = input.required<Article>();
}

Options

Prop

Type

This directive has one output, selected (OutputEmitterRef<void>), emitted only when strategy="emit".

Pitfalls

What's next

OpenArticleOnCtrlEnter

Open an article in a new tab instead, on Ctrl+Enter.