はじめに
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() {
}
}
終わりに
今回はNg2SearchPipeModuleを使用し検索機能を実装した。
検索機能はかなり有用なため、今後Angularで開発するWebアプリケーションに役立てたい。
コメント