[Trunk | Library]:

searchSorting.module - searchSorting.component.ts & searchResultsPerPage.component.ts & searchFilter.module.ts - searchFilter.component.html & 
browseStatistic.component.html - browseEntities.module.ts & citeThis.module.ts - citeThis.component.ts & 
metadataPreview.module.ts - metadataPreview.component.html & linkingGeneric.module.ts - linkingGeneric.component.html & 
displayClaims.module.ts - displayClaims.component.html & claimResultSearchForm.module.ts - claimResultSearchForm.component.html: 
	Use material select (<select> to <mat-select>)


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58235 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-03-12 10:48:04 +00:00
parent 3045d7afec
commit 2cc64b9e4e
17 changed files with 130 additions and 94 deletions

View File

@ -226,12 +226,14 @@
<div class="dropdown"> <div class="dropdown">
<select [(ngModel)]="selectAuthorId" name="select_author" <mat-select [(ngModel)]="selectAuthorId" name="select_author"
(ngModelChange)="getOrcidResultsById(selectAuthorId)" class="uk-select"> (ngModelChange)="getOrcidResultsById(selectAuthorId)" class="uk-select matSelection"
<option [value]="0">Choose another one:</option> [disableOptionCentering]="true"
<option *ngFor=" let item of authors let i = index" panelClass="matSelectionPanel">
[value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </option> <mat-option [value]="0">Choose another one:</mat-option>
</select> <mat-option *ngFor=" let item of authors let i = index"
[value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </mat-option>
</mat-select>
</div> </div>
</div> </div>

View File

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { SharedModule } from '../../shared/shared.module'; import { SharedModule } from '../../shared/shared.module';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { MatSelectModule } from "@angular/material";
import {ClaimResultSearchFormComponent} from './claimResultSearchForm.component'; import {ClaimResultSearchFormComponent} from './claimResultSearchForm.component';
import {ClaimResultsModule} from './claimResults.module'; import {ClaimResultsModule} from './claimResults.module';
@ -17,7 +18,7 @@ import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.mod
@NgModule({ @NgModule({
imports: [SharedModule, CommonModule, SearchResearchResultsServiceModule, PagingModule, SearchCrossrefServiceModule, imports: [SharedModule, CommonModule, SearchResearchResultsServiceModule, PagingModule, SearchCrossrefServiceModule,
SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule], SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule, MatSelectModule],
providers:[ providers:[
SearchOrcidService SearchOrcidService
], ],

View File

@ -73,10 +73,12 @@
data-uk-grid-margin=""> data-uk-grid-margin="">
<div class="uk-width-1-2 uk-margin-top uk-margin-bottom"> <div class="uk-width-1-2 uk-margin-top uk-margin-bottom">
<span> Results per page <span> Results per page
<select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select" [(ngModel)]="size" name="select_size" <mat-select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select matSelection" [(ngModel)]="size" name="select_size"
(ngModelChange)="changeSize()" [disabled]="pageLoading"> (ngModelChange)="changeSize()" [disabled]="pageLoading"
<option *ngFor="let size of sizes" [value]="size">{{size}}</option> [disableOptionCentering]="true"
</select> panelClass="matSelectionPanel">
<mat-option *ngFor="let size of sizes" [value]="size">{{size}}</mat-option>
</mat-select>
</span> </span>
</div> </div>
<div class="uk-grid"> <div class="uk-grid">

View File

@ -2,6 +2,7 @@ import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { MatSelectModule } from "@angular/material";
import {ClaimServiceModule} from '../service/claimsService.module'; import {ClaimServiceModule} from '../service/claimsService.module';
import {DisplayClaimsComponent} from './displayClaims.component'; import {DisplayClaimsComponent} from './displayClaims.component';
import {LoadingModalModule} from '../../../utils/modal/loadingModal.module'; import {LoadingModalModule} from '../../../utils/modal/loadingModal.module';
@ -18,7 +19,7 @@ import {PiwikServiceModule} from "../../../utils/piwik/piwikService.module";
imports: [ imports: [
CommonModule, FormsModule, RouterModule, ClaimServiceModule, LoadingModalModule, AlertModalModule, CommonModule, FormsModule, RouterModule, ClaimServiceModule, LoadingModalModule, AlertModalModule,
ClaimEntityFormatterModule, PagingModule, HelperModule, Schema2jsonldModule, SEOServiceModule, PiwikServiceModule, ClaimEntityFormatterModule, PagingModule, HelperModule, Schema2jsonldModule, SEOServiceModule, PiwikServiceModule,
IndexInfoServiceModule IndexInfoServiceModule, MatSelectModule
], ],
declarations: [ declarations: [

View File

@ -27,15 +27,17 @@
<div class="uk-h5"> <div class="uk-h5">
<span *ngIf="showOptions.show!='source' && showOptions.show != 'claim'"> <span *ngIf="showOptions.show!='source' && showOptions.show != 'claim'">
<span>LINK TO </span> <span>LINK TO </span>
<select [(ngModel)]="showOptions.show" class="uk-select uk-width-auto uk-text-bold " <mat-select [(ngModel)]="showOptions.show" class="uk-select uk-width-auto uk-text-bold matSelection"
*ngIf="showOptions.linkToEntities.length > 1"> *ngIf="showOptions.linkToEntities.length > 1"
<option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 " [disableOptionCentering]="true"
value="project">PROJECTS</option> panelClass="matSelectionPanel">
<option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH <mat-option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
RESULTS</option> value="project">PROJECTS</mat-option>
<option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
</option> RESULTS</mat-option>
</select> <mat-option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
</mat-option>
</mat-select>
<span class=" uk-width-auto uk-text-bold " <span class=" uk-width-auto uk-text-bold "
*ngIf="showOptions.linkToEntities.length ==1"> *ngIf="showOptions.linkToEntities.length ==1">
<span *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 " <span *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "

View File

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatSelectModule } from "@angular/material";
import { SharedModule } from '../../shared/shared.module'; import { SharedModule } from '../../shared/shared.module';
import {SelectedProjectsModule} from './selected/selectedProjects.module'; import {SelectedProjectsModule} from './selected/selectedProjects.module';
@ -29,7 +30,8 @@ import {PiwikServiceModule} from "../../utils/piwik/piwikService.module";
StartOverModule, StartOverModule,
ClaimContextSearchFormModule, ClaimProjectsSearchFormModule, BulkClaimModule, ClaimResultSearchFormModule, ClaimContextSearchFormModule, ClaimProjectsSearchFormModule, BulkClaimModule, ClaimResultSearchFormModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, MetadataPreviewModule, ClaimEntitiesMetadataModule, AlertModalModule, HelperModule, Schema2jsonldModule, SEOServiceModule, MetadataPreviewModule, ClaimEntitiesMetadataModule, AlertModalModule,
PiwikServiceModule PiwikServiceModule,
MatSelectModule
], ],
providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled], providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled],
declarations: [ declarations: [

View File

@ -113,29 +113,33 @@
class="uk-grid uk-margin-remove-top uk-text-small"> class="uk-grid uk-margin-remove-top uk-text-small">
<div class="uk-width-1-2"> <div class="uk-width-1-2">
<span class="uk-text-muted">Type </span> <span class="uk-text-muted">Type </span>
<select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}" <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
class="uk-select uk-width-small"> class="uk-select uk-width-small matSelection"
<option [value]="'publication'" [disableOptionCentering]="true"
panelClass="entitiesSelectionPanel">
<mat-option [value]="'publication'"
(click)="onTypeChanged('publication',entity, false)">Publication (click)="onTypeChanged('publication',entity, false)">Publication
</option> </mat-option>
<option [value]="'dataset'" <mat-option [value]="'dataset'"
(click)="onTypeChanged('dataset',entity, false)">Research data (click)="onTypeChanged('dataset',entity, false)">Research data
</option> </mat-option>
<option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
</option> </mat-option>
<option [value]="'other'" <mat-option [value]="'other'"
(click)="onTypeChanged('other',entity, false)">Other research product (click)="onTypeChanged('other',entity, false)">Other research product
</option> </mat-option>
</select> </mat-select>
</div> </div>
<div class="uk-width-1-2 uk-padding-remove-left "> <div class="uk-width-1-2 uk-padding-remove-left ">
<div class="uk-grid"> <div class="uk-grid">
<span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span> <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>
<select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}" <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
class="uk-select uk-width-small uk-padding-remove-left uk-margin-left"> class="uk-select uk-width-small uk-padding-remove-left uk-margin-left matSelection"
<option *ngFor="let type of accessTypes" [value]="type" [disableOptionCentering]="true"
(click)="accessRightsTypeChanged(type,entity, false)">{{type}}</option> panelClass="matSelectionPanel">
</select> <mat-option *ngFor="let type of accessTypes" [value]="type"
(click)="accessRightsTypeChanged(type,entity, false)">{{type}}</mat-option>
</mat-select>
<mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'"> <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
<input matInput [matDatepicker]="picker" placeholder="Choose embargo end date" <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
(click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_source']" (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_source']"
@ -253,29 +257,33 @@
class="uk-grid uk-text-small uk-margin-remove-top"> class="uk-grid uk-text-small uk-margin-remove-top">
<div class="uk-width-1-2"> <div class="uk-width-1-2">
<span class="uk-text-muted">Type </span> <span class="uk-text-muted">Type </span>
<select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}" <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
class="uk-select uk-width-small"> class="uk-select uk-width-small matSelection"
<option [value]="'publication'" [disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option [value]="'publication'"
(click)="onTypeChanged('publication',entity, false)">Publication (click)="onTypeChanged('publication',entity, false)">Publication
</option> </mat-option>
<option [value]="'dataset'" <mat-option [value]="'dataset'"
(click)="onTypeChanged('dataset',entity, false)">Research data (click)="onTypeChanged('dataset',entity, false)">Research data
</option> </mat-option>
<option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
</option> </mat-option>
<option [value]="'other'" <mat-option [value]="'other'"
(click)="onTypeChanged('other',entity, false)">Other research product (click)="onTypeChanged('other',entity, false)">Other research product
</option> </mat-option>
</select> </mat-select>
</div> </div>
<div class="uk-width-1-2 uk-padding-remove-left "> <div class="uk-width-1-2 uk-padding-remove-left ">
<div class="uk-grid"> <div class="uk-grid">
<span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span> <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>
<select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}" <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
class="uk-select uk-width-small uk-padding-remove-left uk-margin-left"> class="uk-select uk-width-small uk-padding-remove-left uk-margin-left matSelection"
<option *ngFor="let type of accessTypes" [value]="type" [disableOptionCentering]="true"
(click)="accessRightsTypeChanged(type,entity, true)">{{type}}</option> panelClass="matSelectionPanel">
</select> <mat-option *ngFor="let type of accessTypes" [value]="type"
(click)="accessRightsTypeChanged(type,entity, true)">{{type}}</mat-option>
</mat-select>
<mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'"> <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
<input matInput [matDatepicker]="picker" placeholder="Choose embargo end date" <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
(click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_result']" (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_result']"

View File

@ -13,10 +13,12 @@ declare var Sys:any;
<dl class="uk-description-list-line"> <dl class="uk-description-list-line">
<!--dt class="title">Cite this {{type}}</dt--> <!--dt class="title">Cite this {{type}}</dt-->
<dd class="line" > <dd class="line" >
<select class="select" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"> <mat-select class="select matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"
<option value="0">select a citation style</option> [disableOptionCentering]="true"
<option *ngFor=" let style of this.citation.templates let i = index" [value]="style">{{style}}</option> panelClass="matSelectionPanel">
</select> <mat-option value="0">select a citation style</mat-option>
<mat-option *ngFor=" let style of this.citation.templates let i = index" [value]="style">{{style}}</mat-option>
</mat-select>
<div *ngIf="selectedStyle!='0'" id="citation" class="box-content uk-padding-small uk-overflow-auto" [innerHTML]=citationText></div> <div *ngIf="selectedStyle!='0'" id="citation" class="box-content uk-padding-small uk-overflow-auto" [innerHTML]=citationText></div>
</dd> </dd>
</dl> </dl>

View File

@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import {CiteThisComponent} from './citeThis.component'; import {CiteThisComponent} from './citeThis.component';
import {MatSelectModule} from "@angular/material";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule CommonModule, FormsModule, MatSelectModule
], ],
declarations: [ declarations: [
CiteThisComponent CiteThisComponent

View File

@ -2,6 +2,7 @@ import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { MatSelectModule } from "@angular/material";
import {RefineFieldResultsServiceModule} from '../../services/refineFieldResultsService.module'; import {RefineFieldResultsServiceModule} from '../../services/refineFieldResultsService.module';
@ -13,7 +14,8 @@ import {ErrorMessagesModule} from '../../utils/errorMessages.module';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, ErrorMessagesModule, CommonModule, FormsModule, ErrorMessagesModule,
RefineFieldResultsServiceModule, RouterModule RefineFieldResultsServiceModule, RouterModule,
MatSelectModule
], ],
declarations: [ declarations: [
BrowseEntitiesComponent, BrowseEntitiesComponent,

View File

@ -46,10 +46,13 @@
<h4 class="tm-article-subtitle">{{filter.title}}</h4> <h4 class="tm-article-subtitle">{{filter.title}}</h4>
<div class="uk-grid uk-margin-left uk-margin-right"> <div class="uk-grid uk-margin-left uk-margin-right">
<input class="uk-input uk-margin-small-bottom uk-width-1-2 " name="filter-keyword" placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword"> <input class="uk-input uk-margin-small-bottom uk-width-1-2 " name="filter-keyword" placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">
<select [(ngModel)]="sortBy" class="uk-select uk-margin-small-bottom uk-width-1-2 uk-padding-remove" name="select_order" > <mat-select [(ngModel)]="sortBy" class="uk-select uk-margin-small-bottom uk-width-1-2 uk-padding-remove matSelection"
<option value="num" >Sort by results number</option> name="select_order"
<option value="name" >Sort by name</option> [disableOptionCentering]="true"
</select> panelClass="matSelectionPanel">
<mat-option value="num" >Sort by results number</mat-option>
<mat-option value="name" >Sort by name</mat-option>
</mat-select>
</div> </div>
<ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line browseFilters"> <ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line browseFilters">

View File

@ -67,12 +67,13 @@
<span *ngIf = "showResultCount === true" class="uk-width-5-6@m uk-width-1-1@s uk-align-right uk-margin-small-bottom"> <span *ngIf = "showResultCount === true" class="uk-width-5-6@m uk-width-1-1@s uk-align-right uk-margin-small-bottom">
<span class="uk-width-1-4 uk-text-muted"> Sort by:</span> <span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
<select [(ngModel)]="sortBy" <mat-select [(ngModel)]="sortBy"
class="uk-select uk-width-3-4@m uk-width-auto" class="uk-select uk-width-3-4@m uk-width-auto matSelection"
id="form-horizontal-select" name="select_order"> id="form-horizontal-select" name="select_order"
<option value="num">Results number</option> [disableOptionCentering]="true" panelClass="matSelectionPanel">
<option value="name">Name</option> <mat-option value="num">Results number</mat-option>
</select> <mat-option value="name">Name</mat-option>
</mat-select>
</span> </span>
</div> </div>

View File

@ -5,10 +5,11 @@ import { FormsModule } from '@angular/forms';
import {SearchFilterComponent} from './searchFilter.component'; import {SearchFilterComponent} from './searchFilter.component';
import{SearchFilterModalComponent} from './searchFilterModal.component'; import{SearchFilterModalComponent} from './searchFilterModal.component';
import {ModalModule} from '../../utils/modal/modal.module'; import {ModalModule} from '../../utils/modal/modal.module';
import {MatSelectModule} from "@angular/material";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, ModalModule CommonModule, FormsModule, ModalModule, MatSelectModule
], ],
declarations: [ declarations: [
SearchFilterComponent, SearchFilterModalComponent SearchFilterComponent, SearchFilterModalComponent

View File

@ -4,13 +4,15 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
selector: 'search-results-per-page', selector: 'search-results-per-page',
template: ` template: `
<span> Results per page:</span> <span> Results per page:</span>
<select class="uk-select uk-width-auto uk-text-bold" id="form-horizontal-select" name="select_results_per_page" <mat-select class="uk-select uk-width-auto uk-text-bold matSelection" id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="size" (ngModelChange)="sizeChanged()"> [(ngModel)]="size" (ngModelChange)="sizeChanged()"
<option [ngValue]="5" > 5</option> [disableOptionCentering]="true"
<option [ngValue]="10">10</option> panelClass="matSelectionPanel">
<option [ngValue]="20">20</option> <mat-option [value]="5" > 5</mat-option>
<option [ngValue]="50">50</option> <mat-option [value]="10">10</mat-option>
</select> <mat-option [value]="20">20</mat-option>
<mat-option [value]="50">50</mat-option>
</mat-select>
` `
}) })

View File

@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import{SearchResultsPerPageComponent} from './searchResultsPerPage.component'; import {SearchResultsPerPageComponent} from './searchResultsPerPage.component';
import {MatSelectModule} from "@angular/material";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule CommonModule, FormsModule, RouterModule, MatSelectModule
], ],
declarations: [ declarations: [
SearchResultsPerPageComponent SearchResultsPerPageComponent

View File

@ -4,22 +4,26 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
selector: 'search-sorting', selector: 'search-sorting',
template: ` template: `
<span class="uk-width-1-4"> Sort by:</span> <span class="uk-width-1-4"> Sort by:</span>
<select *ngIf="(entityType != 'community' && entityType != 'funder' )" <mat-select *ngIf="(entityType != 'community' && entityType != 'funder' )"
class="uk-select uk-width-auto uk-text-bold" class="uk-select uk-width-auto uk-text-bold matSelection"
id="form-horizontal-select" name="select_results_per_page" id="form-horizontal-select" name="select_results_per_page"
[disableOptionCentering]="true"
panelClass="matSelectionPanel"
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"> [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">
<option value="">Relevance</option> <mat-option value="">Relevance</mat-option>
<option value="resultdateofacceptance,descending">Date (most recent)</option> <mat-option value="resultdateofacceptance,descending">Date (most recent)</mat-option>
<option value="resultdateofacceptance,ascending">Date (least recent)</option> <mat-option value="resultdateofacceptance,ascending">Date (least recent)</mat-option>
</select> </mat-select>
<select *ngIf="(entityType == 'community' || entityType == 'funder')" <mat-select *ngIf="(entityType == 'community' || entityType == 'funder')"
class="uk-select uk-width-auto uk-text-bold" class="uk-select uk-width-auto uk-text-bold matSelection"
id="form-horizontal-select" name="select_results_per_page" id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"> [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"
<option value="">Title</option> [disableOptionCentering]="true"
<option value="creationdate,descending">Creation Date (most recent)</option> panelClass="matSelectionPanel">
<option value="creationdate,ascending">Creation Date (least recent)</option> <mat-option value="">Title</mat-option>
</select> <mat-option value="creationdate,descending">Creation Date (most recent)</mat-option>
<mat-option value="creationdate,ascending">Creation Date (least recent)</mat-option>
</mat-select>
` `
}) })

View File

@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import{SearchSortingComponent} from './searchSorting.component'; import{SearchSortingComponent} from './searchSorting.component';
import {MatSelectModule} from "@angular/material";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule CommonModule, FormsModule, RouterModule, MatSelectModule
], ],
declarations: [ declarations: [
SearchSortingComponent SearchSortingComponent