ionic spinner 예제 example

ionic spinner를 통하여 데이터 리스트를 통신하는 동안 페이지에서 데이터를 가져오고 있다고 표시할 수 있다.

 

이를 위하여 4가지 처리를 해주어야 한다.

 

1. 노출 처리를 위한 변수 생성

2. 생성자에  setTimeout으로 변수 값 변환처리

3. html에 ion-spinner 삽입

4. *ngIf 사용

 

 

알고리즘은 아래와 같다.

ngif문을 사용하여 노출처리 변수값에 따라 내용은 비노출 ion-spinner은 노출한다.

 

 

HTML

<ion-content> 
  <div style="width:100%;height:100vh;" *ngIf="isShow"> 
    <ion-spinner  style="width:100%;position: absolute; 
    top: 50%;"> 
    </ion-spinner>   
  </div> 

  <div *ngIf="isShow==false">
    <p>1.5초후 표출될 내용</p>
  </div>
</ion-content>

 

TS

//초기 변수
private isShow =true;
  
    
  //생성자
constructor() {    
  //1.5초 후 false로 변경 처리
  setTimeout(()=>{
  this.isShow =false;
  },1500)  
}