Introduction Foundations Components Patterns Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Search

A general purpose search component with optional result display

Most of this components inputs and outputs are fairly self explanatory. The one that might confuse some people is itemTemplates. This crucial input is how we tell the search component how to render our "rich" search results. In order to render out your search results, the search component simply takes the information attached to each SearchItem in your list of searchResults and plugs it in to one of the provided templates. Anything available in the SearchItem.context will be exposed to the template. See "let-user" above. This article does a pretty good job of explaining TemplateRefs and how to use them: https://alligator.io/angular/reusable-components-ngtemplateoutlet/ (However, you should be able to get by just fine simply basing any new work on these stories)

Contents

Default Borderless Expandable Round corners With custom control With scrollable search results Without result display
Inputs
borderless ?: boolean = false

Not for general use. This is only for Messaging search. If you'd like to use this input, make sure you discuss with UI Eng

borderlessMobile ?: boolean = false

Not for general use. This is only for browse mobile page. If you'd like to use this input, make sure you discuss with UI Eng

clearButton ?: boolean = true
clearQueryOnSelect ?: boolean = false
control ?: FormControl<string>
disabled ?: boolean = false
displayResults ?: boolean = true
displayResultsWithEmptyInput ?: boolean = false

Show options when the user has not entered anything

dynamicValidation ?: boolean = false
expandableIconLight ?: boolean = false
iconEnd ?: string
iconMarginMobile ?: boolean = true

Not for general use. This is only for browse mobile page. If you'd like to use this input, make sure you discuss with UI Eng.

increaseZIndex ?: boolean = false

Increase the result card z-index to callout level. Default: dropdown.

initialValue ?: string = ''
inputId ?: string

HTML id for the input element.

inputSearchSize ?: any = InputSize.MID
isExpandable ?: boolean = false
itemTemplates ?: { [type: string]: TemplateRef<any>; } = {}
itemTypeTitles ?: { [type: string]: string; } = {}
leftIconSize ?: any = IconSize.MID
placeholder ?: any = $localize`Search`
roundCorners ?: boolean = true
scrollableSearchResults ?: boolean = false

Limits search results' container height to 200px and makes it scrollable.

searchResults ?: readonly SearchItem[] = []
shakeOnBlur ?: boolean = true
showIcon ?: boolean = true
Outputs
clear ?: any = new EventEmitter<void>()
query ?: any = new EventEmitter<string>()
select ?: any = new EventEmitter<SearchItem>()
submit ?: any = new EventEmitter<void>()