src/app/shared/components/extraction-set-dropdown/extraction-set-dropdown.component.ts
Dropdown for selecting the extraction set
changeDetection | ChangeDetectionStrategy.OnPush |
selector | ccf-extraction-set-dropdown |
styleUrls | ./extraction-set-dropdown.component.scss |
templateUrl | ./extraction-set-dropdown.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
constructor(ga: GoogleAnalyticsService)
|
||||||||
Creates an instance of extraction set dropdown component.
Parameters :
|
sets | |
Type : ExtractionSet[]
|
|
Extraction sets to be displayed as options |
setChange | |
Type : EventEmitter
|
|
Emits the current extraction set when selected |
class |
Type : "ccf-extraction-set-dropdown"
|
Default value : 'ccf-extraction-set-dropdown'
|
HTML class name |
extractionSetChanged | ||||||||
extractionSetChanged(value: ExtractionSet)
|
||||||||
Sets the selected extraction set and emits the extraction set
Parameters :
Returns :
void
|
isMultiple |
isMultiple()
|
Determines whether there is more than one extraction set
Returns :
boolean
true if there is more than one extraction set |
Readonly clsName |
Type : string
|
Default value : 'ccf-extraction-set-dropdown'
|
Decorators :
@HostBinding('class')
|
HTML class name |
selected |
Type : ExtractionSet
|
The currently selected extraction set |
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
import { ExtractionSet } from '../../../core/models/extraction-set';
/**
* Dropdown for selecting the extraction set
*/
@Component({
selector: 'ccf-extraction-set-dropdown',
templateUrl: './extraction-set-dropdown.component.html',
styleUrls: ['./extraction-set-dropdown.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExtractionSetDropdownComponent {
/** HTML class name */
@HostBinding('class') readonly clsName = 'ccf-extraction-set-dropdown';
/**
* Emits the current extraction set when selected
*/
@Output() readonly setChange = new EventEmitter<ExtractionSet>();
/**
* Extraction sets to be displayed as options
*/
@Input() sets!: ExtractionSet[];
/**
* The currently selected extraction set
*/
selected!: ExtractionSet;
/**
* Creates an instance of extraction set dropdown component.
*
* @param ga Analytics service
*/
constructor(private readonly ga: GoogleAnalyticsService) {}
/**
* Sets the selected extraction set and emits the extraction set
*
* @param value The extraction set selected
*/
extractionSetChanged(value: ExtractionSet): void {
this.selected = value;
this.ga.event('selected_extraction_set_change', 'extraction_set_dropdown', value.name);
this.setChange.emit(value);
}
/**
* Determines whether there is more than one extraction set
*
* @returns true if there is more than one extraction set
*/
isMultiple(): boolean {
return this.sets.length > 1;
}
}
<mat-form-field class="dropdown-form-field" *ngIf="isMultiple()" appearance="fill">
<mat-label class="extraction-dropdown-label">Landmark Set</mat-label>
<mat-select
disableOptionCentering="true"
(selectionChange)="extractionSetChanged($event.value)"
[value]="sets[0]"
panelClass="extraction-set-panel"
>
<mat-option class="extraction-set-options" *ngFor="let set of sets" [value]="set">
{{ set.name }} ({{ set.sites.length }})
</mat-option>
</mat-select>
</mat-form-field>
./extraction-set-dropdown.component.scss
::ng-deep .extraction-set-panel {
position: absolute !important;
box-shadow: 0rem 0rem 0.3rem 0.1rem #9e9e9e !important;
top: -3.5rem;
.extraction-set-options {
height: 2.5rem;
min-height: inherit;
}
}
:host {
::ng-deep .mat-mdc-form-field {
width: 10.5rem;
.mat-mdc-text-field-wrapper {
padding: 0;
}
}
}
::ng-deep .cdk-overlay-pane {
min-width: 0rem !important;
}