Style will be applied to Angular2 when the object's ID exceeds 100

Question

I am working with object markers that have different Id's assigned to them. Now, I am trying to apply additional styling when the id > 100.

Check out the code snippet below:

<span *ngIf="result.object.reference > 100" class="tooltip-data">
   {{ result.resource.display_name }}
</span>

But I am wondering, how can I incorporate extra styling such as style="left: 12px"?

Answer 1

Answer №1

To apply styles conditionally, you can use the following methods:

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [style.left.px]="id > 100 ? 12 : 0">

or

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [style.left]="id > 100 ? '12px' : '0px'">

If you only want to set a style when id > 100, you can use this approach:

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [ngStyle]="getStyle(id)">

noStyle = {};
gT100Style = {left: '12px'};
getStyle(id) {
  return id > 100 ? this.gT100Style : this.noStyle;
}

Ensure that noStyle and gT100Style are defined outside of getStyle() to avoid issues with change detection.

Another option is:

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [ngStyle]="id > 100 ? {left: '12px'} : {}">

Answer 2

To apply styles conditionally, you can use the following methods:

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [style.left.px]="id > 100 ? 12 : 0">

or

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [style.left]="id > 100 ? '12px' : '0px'">

If you only want to set a style when id > 100, you can use this approach:

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [ngStyle]="getStyle(id)">

noStyle = {};
gT100Style = {left: '12px'};
getStyle(id) {
  return id > 100 ? this.gT100Style : this.noStyle;
}

Ensure that noStyle and gT100Style are defined outside of getStyle() to avoid issues with change detection.

Another option is:

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [ngStyle]="id > 100 ? {left: '12px'} : {}">