Skip to content
@ng-doc/app / Class

NgDocMembersFilterDirective

Adds the member tabs, the name filter and the expandable method rows to the members table of an API page. The page renders every member, so the table reads well without it (on the server and before hydration); the directive only hides rows.

It reads this markup inside its host: tab buttons with a data-ng-doc-members-tab attribute ("all", "inherited" or a group name, each with an optional .ng-doc-members-count), a text input with a data-ng-doc-members-filter attribute, group rows (.ng-doc-members-group with data-group) and member rows (.ng-doc-member with data-group, data-name and, for inherited members, data-inherited). A .ng-doc-member-expand button in a member row shows and hides the detail row its aria-controls names, and an optional .ng-doc-members-empty element shows when no member matches. F focuses the filter while single-key shortcuts are on.

In the browser it inserts an ng-doc-selection as the first child of the row of tabs, the highlight that slides to the selected tab as in the code-block tabs. Until it is placed, the selected tab draws its own background, so the server-rendered page looks the same.

Decorators
@Directive
Selectors
[ngDocMembersFilter]
DeclarationTypeScript
@Directive({ … })
export class NgDocMembersFilterDirective { … }

Members

Constructor

1
()
—

Properties

2
query: Signal<string>
readonly

The text the member names are filtered by.

tab: Signal<string>
readonly

The selected tab: "all", "inherited" or a group name.

Methods

5
(…): void

Shows the members whose name contains the text.

(…): void
protected
—
(…): void
protected
—
(…): void
protected
—
(…): void

Shows the members of a tab.

Symbol
Kind
Class
Decorators
@Directive
Selectors
[ngDocMembersFilter]
Scope
@ng-doc/app
Edit this page