2018年7月30日 星期一

Angular2 Learning Note (4):How to control div style through Angular2


1. Assign backgroud image
Use [style.xxx] directly
<div class="Layout" [style.background-image]="backgroundImg">
</div>

Meet error message: something like trust issue

Add this into app.component.ts
this.backgroundImg = this.sanitizer.bypassSecurityTrustStyle('url(' + this.IndoorLayoutPath + ')');





Check detail in
https://stackoverflow.com/questions/34875426/how-to-add-background-image-using-ngstyle-angular2/34875479

2. To adjust the location of div
<div *ngFor="let rList of RoomList" (click)="assignFacility(rList.name, rList.facility._id, rList.facility.name)">
    <div class="RoomInLayout" *ngIf="rList.facility.name==fList.facility.name"[style.top.px]="rList.x" [style.left.px]="rList.y">
        >{{rList.name}} [x,y]=[ {{rList.x}} ,{{rList.y}}]
    </div>
</div>







沒有留言:

張貼留言