src/app/components/search/search.component.ts
Search component ~extends SearchProviderComponent ~implements OnInit ~implements OnDestroy
OnInit
OnDestroy
| selector | app-search |
| styleUrls | ./search.component.scss |
| templateUrl | ./search.component.html |
Properties |
|
Methods |
|
Inputs |
constructor(portfolioService: PortfolioService, engine: EngineService, inputService: InputService, uiService: UiService, searchHistoryService: SearchHistoryService, persistenceService: PersistenceService)
|
||||||||||||||||||||||||||||
|
Constructs the Search component.
Parameters :
|
| InstantSearch |
Type : boolean
|
|
Instant search toggle setter. |
| position |
Type : any
|
|
Instance identification position. |
| SearchToken |
Type : string
|
|
Search token setter delegate. |
| Public keydown | ||||||
keydown(event: KeyboardEvent)
|
||||||
|
Connect the keyboard.
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Clean up upon desctuction of the component.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Subscription
Returns :
void
|
| onFieldChange | ||||||
onFieldChange(query: string)
|
||||||
|
Field change event handler.
Parameters :
Returns :
void
|
| onInstantSearchToggled | ||||||
onInstantSearchToggled(value: boolean)
|
||||||
|
Instant search toggled event handler.
Parameters :
Returns :
void
|
| Public search |
search()
|
|
Do search.
Returns :
void
|
| Public clearSearch |
clearSearch()
|
|
Clear search-provider field.
Returns :
void
|
| Public keypress | ||||||
keypress(event: KeyboardEvent)
|
||||||
|
Simulate keyboard clicks delegate.
Parameters :
Returns :
void
|
| Public label | ||||||
label(key: string)
|
||||||
|
Label delegate.
Parameters :
Returns :
string
|
| Public startAllOver |
startAllOver()
|
|
Clear toggle state and any future view state and start all over.
Returns :
void
|
| Optional clickableClearSearch |
Type : ElementRef
|
Decorators :
@ViewChild('clickableClearSearch')
|
|
Clear search clickable element. |
| Optional clickableSearch |
Type : ElementRef
|
Decorators :
@ViewChild('clickableSearch')
|
|
Search clickable element. |
| Optional clickableStartAllOver |
Type : ElementRef
|
Decorators :
@ViewChild('clickableStartAllOver')
|
|
Start all over clickable element. |
| Public Readonly persistenceService |
Type : PersistenceService
|
|
The persistence service injected dependency.
|
| Public Readonly portfolioService |
Type : PortfolioService
|
|
The portfolio service injected dependency.
|
| Public Readonly searchHistoryService |
Type : SearchHistoryService
|
|
The search history service injected dependency.
|
| searchTextElement |
Type : ElementRef<HTMLInputElement>
|
Decorators :
@ViewChild('searchTextElement')
|
|
The search text element. |
| toolbar |
Type : ToolbarComponent
|
Decorators :
@ViewChild('toolbar')
|
|
The toolbar element. |
| Public Readonly uiService |
Type : UiService
|
|
The ui service injected dependency.
|
| Public searchTokenChanged$ |
Type : Subject<string>
|
Default value : new Subject<string>()
|
|
SearchProvider token changed event. |
./search.component.scss
@use "../stylesheets/stylesheets.component.scss" as component;
@use "../stylesheets/stylesheets.component.color.scss" as color;
@use "../../stylesheets/geometry.scss" as geometry;
header,
h1,
.label-block,
.checkbox-block,
.text-block {
margin: 0px;
padding: 0px;
}
.input-hint {
color: color.$header-fore-color;
font-size: 12px;
}
form {
flex-wrap: nowrap;
}
.form-inline {
align-items: start;
}
@media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) (15 chunks)*/
.label-block,
.checkbox-block,
.text-block {
$size: component.$button-size;
min-width: $size;
min-height: $size;
width: $size;
height: $size;
max-height: $size;
max-width: $size;
}
header,
h1 {
$size: component.$button-size;
min-height: $size;
height: $size;
max-height: $size;
}
.text-block {
visibility: collapse;
}
}