Ionic 토글(toggle) 사용하기 (설정)

안녕하세요. IT김군입니다.

사용자 설정같은 부분에 토글(toggle)버튼을 많이들 사용하실텐데요.

이 토글버튼 활용에 대해서 알아보도록 하겠습니다.

아래는 토글 버튼을 추가하실 html에 넣을 소스입니다.

<ion-list>
   <ion-item>
      <ion-label>토글 버튼</ion-label>
         <ion-toggle value="test" [(ngModel)]="test" color="danger" (ionChange)="toogleTest(test)">
         </ion-toggle>
   </ion-item>
</ion-list>

위에서 보시면 test라는 변수와 toggleTest(test)라는 함수를 포함하였습니다.

아래는 typescript 파일의 소스입니다.

private test : boolean = true;

toggleTest(value){
   if(value){
      console.log("toggle Value : "+value); //toggle True
   }else{
      console.log("toggle Value : "+value); //toggle False
   }
}

최초 test변수가 true로 되어있으면 toggle 버튼도 체크되어 있는 상태입니다.

위 html에서 (ionChange)에 toggleTest(test)를 넣었기에 toggle 버튼을 클릭하여 상태가 바뀔 때 마다 toggleTest()에 변동값 (test = true / false)를 파라미터로 활용하여 실행합니다.

위 예제 소스를 보시고 응용해서 사용하시면 될 것 같습니다.

감사합니다.