ionic 팝업창 글 순서 정렬하기 actionSheet

우측 상단 버튼을 눌러 액션 시트를 열고
요소를 클릭할시 정렬되어 글 리스트가 다시 표출되는 기능을 만들어 보겠습니다.

1.먼저 아이오닉 앵귤러에서 제공하는 액션 시트를 import 해줍니다.

 

import { ActionSheetController } from '@ionic/angular'; 

2. 생성자 constructor에 변수를 생성합니다.

  constructor( 
    public actionSheetCtrl:ActionSheetController, 
  )

 

3. 아래와 같이 함수를 생성합니다.

 

 async showOrderByType(){
    const actionSheet = await this.actionSheetCtrl.create({
    header: '정렬기준을 체크하세요',  
    buttons:[
      {
        text:"최신순",
        handler:()=>{
          var id='reg_date';
          this.router.navigate(['home','review-list', id]);
        }
      },
      {
        text:"호감도순",
        handler:()=>{
          var id='remember_count';
          this.router.navigate(['home','review-list', id]);
        }
      },
      {
        text:"거리순",
        handler:()=>{
          var id='distance';
          this.router.navigate(['home','review-list', id]);
        }
      },
      {
        text:"리워드순",
        handler:()=>{
          var id='rewardPoint';
          this.router.navigate(['home','review-list',id]);
        }
      }
    ]  
    });
    await actionSheet.present();
  }

 

3. 아래와 같이 함수를 생성합니다.
여기까지 소스를 작성했으면 기능은 개발이 완료 되었습니다.

4. html에 버튼을 만들고 함수로 연결하면 완료됩니다.

 

      <ion-button  (click)="showOrderByType()">