Angular(ionic)에서 DOM변경사항을 반영하는 방법

안녕하세요.

오늘은 Angular5에서 DOM의 변경이 발생되지 않는 이벤트에 대해서 강제로 변경 감지를 호출 시키는 방법에 대해서 알아보도록 하겠습니다.

Angular는 많은 핵심기능들을 가지고 있지만, 그중에서도 Two-way-databinding 기능은 프론트 개발을 하는데 있어서 큰 편리함을 제공합니다. 

그러나, javascript 또는 typescript에서 데이터 변경이 일어났음에도 불구하고 DOM에 변경사항이 반영되지 않는 상황이 종종 발생하곤 합니다. 오늘은 이 문제를 해결하는 방법에 대해서 간단하게 알아보도록 하겠습니다.

문제

•  javascript 또는 typescript에서 데이터 변경이 일어났음에도 불구하고 DOM에 변경사항이 반영되지 않는 문제

이유

• 여러가지 이유가 있을 수 있지만, 아래 링크를 참조하면 도움이 될 것 같습니다.
• http://mobicon.tistory.com/328

해결 방법

• AngularJS(1.xx)에서는 $scope의 $apply() 메소드를 사용하여 해결 할 수 있습니다. 여기를 참조하세요.
• Angular5(2.xx이상)에서는 @angular/core 모듈중 ChangeDetectorRef를 사용하여 해결 할 수 있습니다.
  
  

사용 방법

참조

• https://stackoverflow.com/questions/33174146/angular-2-0-equivalent-to-scope-apply
• http://mobicon.tistory.com/328

모두 즐거운 코딩하세요~