はじめに
Angular でJSONファイルに登録されているコードネームのフィルター/検索機能を実装する。
Ng2SearchPipeModule
今回使用するのはNg2SearchPipeModuleである。
インストール方法
npm i ng2-search-filter --save
使用法
app.module.tsに下記内容を追加する
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { HttpClientModule } from '@angular/common/http';
import { ChordReferenceService } from './chord-reference.service';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { KeyComponent } from './key/key.component';
import { DiatonicChordComponent } from './diatonic-chord/diatonic-chord.component';
import { NonDiatonicChordComponent } from './non-diatonic-chord/non-diatonic-chord.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InfoComponent } from './info/info.component';
import { MatButtonModule, MatCard } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatTabsModule } from '@angular/material/tabs';
import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips';
import { MatMenuModule } from '@angular/material/menu';
import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTreeModule } from '@angular/material/tree';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatTableModule } from '@angular/material/table';
import { MajorKeyComponent } from './key/major-key/major-key.component';
import { NaturalMinorKeyComponent } from './key/natural-minor-key/natural-minor-key.component';
import { HarmonicMinorKeyComponent } from './key/harmonic-minor-key/harmonic-minor-key.component';
import { MelodicMinorKeyComponent } from './key/melodic-minor-key/melodic-minor-key.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { MajorDiatonicChordComponent } from './diatonic-chord/major-diatonic-chord/major-diatonic-chord.component';
import { NaturalMinorDiatonicChordComponent } from './diatonic-chord/natural-minor-diatonic-chord/natural-minor-diatonic-chord.component';
import { HarmonicMinorDiatonicChordComponent } from './diatonic-chord/harmonic-minor-diatonic-chord/harmonic-minor-diatonic-chord.component';
import { MelodicMinorDiatonicChordComponent } from './diatonic-chord/melodic-minor-diatonic-chord/melodic-minor-diatonic-chord.component';
import { ScaleReferenceComponent } from './scale-reference/scale-reference.component';
import { ChordReferenceComponent } from './chord-reference/chord-reference.component';
@NgModule({
declarations: [
AppComponent,
KeyComponent,
DiatonicChordComponent,
NonDiatonicChordComponent,
InfoComponent,
MajorKeyComponent,
NaturalMinorKeyComponent,
HarmonicMinorKeyComponent,
MelodicMinorKeyComponent,
HeaderComponent,
FooterComponent,
MajorDiatonicChordComponent,
NaturalMinorDiatonicChordComponent,
HarmonicMinorDiatonicChordComponent,
MelodicMinorDiatonicChordComponent,
ScaleReferenceComponent,
ChordReferenceComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
Ng2SearchPipeModule,
MatButtonModule,
MatExpansionModule,
MatIconModule,
MatTabsModule,
MatListModule,
MatChipsModule,
MatSidenavModule,
ReactiveFormsModule,
LayoutModule,
MatToolbarModule,
MatInputModule,
MatMenuModule,
MatCardModule,
MatTreeModule,
MatTableModule,
HttpClientModule,
MatButtonToggleModule
],
providers: [ChordReferenceService],
bootstrap: [AppComponent]
})
export class AppModule { }
今回検索するの下記のデータである
chord-reference-list-data.ts
import { ChordReferenceList } from './chord-reference-list';
export const CHORDREFERENCELIST: ChordReferenceList[] = [
{
chord: 'C',
chordname: 'C',
},
{
chord: 'C',
chordname: 'C6',
},
{
chord: 'C',
chordname: 'Cmaj7',
},
{
chord: 'C',
chordname: 'Cmaj9',
},
{
chord: 'C',
chordname: 'Cmaj11',
},
{
chord: 'C',
chordname: 'Cmaj7(♯5)',
},
{ chord: 'C',
chordname: 'Cmaj7(♯11)',
},
{
chord: 'C',
chordname: 'Cmaj9(♯11)',
},
{
chord: 'C',
chordname: 'Csus4',
},
{
chord: 'C',
chordname: 'Caug',
},
{
chord: 'C',
chordname: 'C5(♭5)',
},
{
chord: 'C',
chordname: 'C5',
},
{
chord: 'C',
chordname: 'C69',
},
{
chord: 'C',
chordname: 'C69(♯11)',
},
{
chord: 'C',
chordname: 'Cadd9',
},
{
chord: 'C',
chordname: 'Cadd2',
},
{
chord: 'C',
chordname: 'Cadd4',
},
{
chord: 'C',
chordname: 'Cm',
},
{
chord: 'C',
chordname: 'Cmaug',
},
{
chord: 'C',
chordname: 'Cm6',
},
{
chord: 'C',
chordname: 'Cm69',
},
{
chord: 'C',
chordname: 'Cmmaj7',
},
{
chord: 'C',
chordname: 'Cmmaj9',
},
{
chord: 'C',
chordname: 'Cmadd9',
},
{
chord: 'C',
chordname: 'C7',
},
{
chord: 'C',
chordname: 'C9',
},
{
chord: 'C',
chordname: 'C11',
},
{
chord: 'C',
chordname: 'C13',
},
{
chord: 'C',
chordname: 'C7sus4',
},
{
chord: 'C',
chordname: 'C7(♭5)',
},
{
chord: 'C',
chordname: 'C7(♭5,♭9)',
},
{
chord: 'C',
chordname: 'C7(♭5,♯9)',
},
{
chord: 'C',
chordname: 'C7(♭5,♭9,13)',
},
{
chord: 'C',
chordname: 'C7(♭9)',
},
{
chord: 'C',
chordname: 'C7(♭9,11)',
},
{
chord: 'C',
chordname: 'C7(♭9,13)',
},
{
chord: 'C',
chordname: 'C7(♭9,♭13)',
},
{
chord: 'C',
chordname: 'C7(♯9)',
},
{
chord: 'C',
chordname: 'C7(♯9,13)',
},
{
chord: 'C',
chordname: 'C7(♯9,♭13)',
},
{
chord: 'C',
chordname: 'C7(13)',
},
{
chord: 'C',
chordname: 'C7(♯11)',
},
{
chord: 'C',
chordname: 'C9sus4',
},
{
chord: 'C',
chordname: 'C9(♭5)',
},
{
chord: 'C',
chordname: 'C9(♭5,13)',
},
{
chord: 'C',
chordname: 'C9(♯11)',
},
{
chord: 'C',
chordname: 'Caug7',
},
{
chord: 'C',
chordname: 'Caug(♭9)',
},
{
chord: 'C',
chordname: 'Caug9',
},
{
chord: 'C',
chordname: 'Caug(♯11)',
},
{
chord: 'C',
chordname: 'Cm7',
},
{
chord: 'C',
chordname: 'Cm9',
},
{
chord: 'C',
chordname: 'Cm9(♭9)',
},
{
chord: 'C',
chordname: 'Cm7(♭9)',
},
{
chord: 'C',
chordname: 'Cm7(11)',
},
{
chord: 'C',
chordname: 'Cm9(11)',
},
{
chord: 'C',
chordname: 'Cm7(13)',
},
{
chord: 'C',
chordname: 'Cm7(♭5)',
},
{
chord: 'C',
chordname: 'Cm7(♭5,11)',
},
{
chord: 'C',
chordname: 'Cm7(♭5,♭13)',
},
{
chord: 'C',
chordname: 'Cdim',
},
{
chord: 'C',
chordname: 'Cdim7',
},
{
chord: 'C',
chordname: 'Cdim(addD)',
},
{
chord: 'C',
chordname: 'Cdim7(addD)',
},
{
chord: 'C',
chordname: 'Cdim(addF)',
},
{
chord: 'C',
chordname: 'Cdim7(addF)',
},
{
chord: 'C',
chordname: 'Cdim(addA♭)',
},
{
chord: 'C',
chordname: 'Cdim7(addA♭)',
},
{
chord: 'C',
chordname: 'Cdim(addB)',
},
{
chord: 'C',
chordname: 'Cdim(addB)',
},
]htmlファイルは下記
<h1 class="mat-h1">コード・リファレンス</h1>
<mat-divider></mat-divider>
<body class="container">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle *ngFor="let ChordReference of ChordReferences" (click)="onSelect(ChordReferenceList)">
<i class="material-icons">music_video</i>
{{ ChordReference.ChordName }}
</mat-button-toggle>
</mat-button-toggle-group>
<div *ngIf="selectedChordreference">
<p>{{ selectedChordreference.Chordname }}rws</p>
</div>
<form class="search-form">
<mat-form-field class="search-full-width">
<input matInput class="form-control" type="text" name="search" [(ngModel)]="searchText" placeholder="Search Chord">
</mat-form-field>
</form>
<div>
<mat-divider></mat-divider>
<mat-list>
<mat-list-item *ngFor="let ChordReferenceList of ChordReferenceList | filter:searchText">
<a routerLink="">{{ ChordReferenceList.chordname }}</a>
</mat-list-item>
</mat-list>
</div>
</body>typescriptは下記
import { Component, OnInit } from '@angular/core';
import { CHORDREFERENCELIST } from '../chord-reference/chordreferrencedata/chord-reference-list-data';
import { ChordReferenceService } from '../chord-reference.service';
import { CHORDREFERENCES } from '../chord-reference/chordreferrencedata/mock-chord-reference';
import { ChordReference } from '../chord-reference/chordreferrencedata/chord-reference';
import { ChordReferenceList } from './chordreferrencedata/chord-reference-list';
@Component({
selector: 'app-chord-reference',
templateUrl: './chord-reference.component.html',
styleUrls: ['./chord-reference.component.css']
})
export class ChordReferenceComponent implements OnInit {
ChordReferenceList = CHORDREFERENCELIST;
ChordReferences = CHORDREFERENCES;
searchText;
selectedChordreference: ChordReference;
onSelect(Chordreference: ChordReference): void {
this.selectedChordreference = Chordreference;
}
constructor(private rsv: ChordReferenceService) { }
ngOnInit() {
}
}
6を入力した場合の画面
終わりに
今回はNg2SearchPipeModuleを使用し検索機能を実装した。
検索機能はかなり有用なため、今後Angularで開発するWebアプリケーションに役立てたい。
コメント