iOS / Safari Style Tag

#1

This code works in Chrome … but in Safari/iOS it doesn’t work. I get an error stating “attempt to set readonly property”. Upon searching … turns out Safari will not allow you to set the entire attrib with an angular value.

SO! I am looking for a work around. The gist of what I am trying to do is … have an image with several clickable hotspots. Either resulting in a toaster pop-up or nav to another page.

<div class="guidecanvas" style="max-width:695px">
         <img style="position:relative; z-index: 0;left:0;top:0 " src='assets/images/guidescreens/{{guideObj?.screen}}'>
         <a  (click)="doJump(jump.page_link)" class="jump" 
            [style]="jump.position | safeHtml" *ngFor="let jump of guideObj?.jumps  "></a>
        
            <a  (click)="doRemark(remark.msg)" class="remark" 
            [style]="remark.position | safeHtml" *ngFor="let remark of guideObj?.remarks  "></a>    
              
        </div>
#2

… Thanks for the input. Which there was none… I figured how to get around this. For anyone who is struggling with this problem, the best approach is to use ngClass. Load all your style information into a CSS/SCSS and then dynamically set the class for each element.

For me this resulted in about 370 definitions… I stored the Class name in my JSON file so I could loop through my JSON file and set the position of each element dynamically.