CODEWITHSUNDEEP
htmlcssangulartypescript
JohnDev
JohnDev

Reputation: 81

Using ngClass 'Missing expected }' error being received

I am trying to conditionally add a class to a list item (through a child components selector), depending on the images width size. The width size is hard coded when the new image item is created in another component.

I keep receiving the error message :

'Missing expected }' in my gallery-list.component.html file.

I can't see that I am missing } anywhere. Can anyone help?

Here is the gallery-list html code:

  <ul class="container">
    <li class="item-list-container" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 160 }'><app-image-item
    class="image-item"
    *ngFor="let imageEl of images;"
    [image]="imageEl"
    [ngClass] ="{ 
    'widthOne': imageEl.widthSize === 50px, 
    'widthTwo': imageEl.widthSize === 100px,
    'widthThree': imageEl.widthSize === 150px,
    'widthFour': imageEl.widthSize === 200px,
    }"
    (click)="onImageSelect(imageEl.id)"   
    ></app-image-item>
    </li>
</ul>

Upvotes: 0

Views: 191

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17494

That's not a correct syntax. Take a look at this similar demo. Try

  <ul class="container">
    <li class="item-list-container" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 160 }'><app-image-item
    class="image-item"
    *ngFor="let imageEl of images;"
    [image]="imageEl"
    [ngClass] ="getClass(imageEl.widthSize)"
    (click)="onImageSelect(imageEl.id)"   
    ></app-image-item>
    </li>
</ul>

in ts file:

getClass(widthSize): string{
  if(widthSize === "50px") {
    return "widthOne"
  }
  if(widthSize === "100px") {
    return "widthTwo"
  }
  if(widthSize === "150px") {
    return "widthThree"
  }
  if(widthSize === "200px") {
    return "widthFour"
  }
}

Note:

I would recommend you to add a property on images array deciding the class which has to be added, rather than using function call as I did using getClass(). Using function on HTML is a bad practice.

If the image is coming from some service, you can use .map and add className property on it.

Upvotes: 1

Related Questions