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)
You may also choose to take care of rendering the results yourself. For example, filtering a list based on the search query:
Zach H
I make you good website.
4.8
Stefano C
I will make your website sexy AF!
4.9
Test project, please ignore
Seriously, you are not funny for bidding on this
by ActualEmployer123
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.
isExpandable ?: boolean = false
itemTemplates ?: { [type: string]: TemplateRef<any>; } = {}
itemTypeTitles ?: { [type: string]: string; } = {}
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>()
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.