Angular Ng2SearchPipeModule 検索機能の実装

はじめに

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を入力した場合の画面

6を入力した場合の画面

 

 

終わりに

今回はNg2SearchPipeModuleを使用し検索機能を実装した。

検索機能はかなり有用なため、今後Angularで開発するWebアプリケーションに役立てたい。

 

コメント