0

The problem I am having is the elements inside innerHTML when viewed in chrome's Debug -> Elements tab constantly collapse and refresh.. Assumedly due to it being bound dynamically. Perhaps there is some way to stop, or pause the update / change detection?

I am using the following code.. Just need a fix for debugging purposes as I need to look at Element's Styles in Chrome Debug Console.

<mat-card-content>
   <div [innerHTML]="getUnSanitizedLessonHTML()" class="mat-typography"></div>
</mat-card-content>

And

  public getUnSanitizedLessonHTML() {
    return this.sanitizer.bypassSecurityTrustHtml(this.lesson.HTML);
  }

I have searched for a way to stop or pause JS in Chrome.. With no luck. And I took a stab at inserting a 10 sec pause into 'getUnSanitizedLessonHTML()' with no success.

Thanks..

ttugates
  • 5,818
  • 3
  • 44
  • 54
  • Use pure pipe for it like https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsafe-value-exception/38037914#38037914 your `getUnSanitizedLessonHTML` method will be executed whenever new change detection cycle happens – yurzui Oct 18 '17 at 13:42
  • Add a break-point on that line ? – anteAdamovic Oct 18 '17 at 13:45
  • Thanks to both of you for super fast response.. [@yurzui](https://stackoverflow.com/users/5485167/yurzui), Pure pipe looks super promising. [@Ante Jablan Adamović](https://stackoverflow.com/users/2902161/ante-jablan-adamovi%c4%87) - I am embarrased to say I have never used breakpoints in Angular / webDev. A good prompt to learn now.. Been unable to get augury to work in past.. And my Souces tab never looks like what you see in [debugging-angular-2-applications](https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications) – ttugates Oct 18 '17 at 13:54
  • And in 2 min of research I learned it.. Add debugger; to source.. :) – ttugates Oct 18 '17 at 13:58

0 Answers0