CODEWITHSUNDEEP
javascripthtmlangulartypescriptangular-material
John w.
John w.

Reputation: 531

Implement two conditions in the presentation of data

I created an image gallery. This gallery may or may not have several types `(A, B ...).

To present the types I am missing the following array: Cats = ["A", "B"].

The images only appear when this array is filled, that is, the size is different from 0 or undefined.

How can I display images, usually, when the size of the Cat array is 0 or undefined?

When the cat array has these conditions, the images appear normally, when the array is different from undefined or greater than 0, it presents the images separated by types as shown in the figure.

Is there a way to implement this without creating two "html"? Can someone help me?

<div style="margin-left: 16px; margin-right: 16px;" class="first" *ngIf="Cats != undefined">
    <div *ngFor="let cat of Cats">
        <div *ngIf="counts[cat]">
            <div class="row">
                <span class="nomeCategoria">{{cat}}</span>
            </div>
            <ul class="mdc-image-list my-image-list">
                <ng-container *ngFor="let it of items">
                    <li class="mdc-image-list__item" *ngIf="it.Cat == cat">
                        <div class="mdc-image-list__image-aspect-container">
                            <ng-container *ngIf="it.image == null; else itImage">
                                <img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
                            </ng-container>
                            <ng-template #itImage>
                                <img [src]="it.image" class="mdc-image-list__image">
                            </ng-template>
                        </div>
                    </li>
                </ng-container>
            </ul>
        </div>
    </div>
</div>

Upvotes: 2

Views: 79

Answers (1)

Ilija Iličić
Ilija Iličić

Reputation: 507

I'll check if Cats array is empty and if it's then I'll populate an array with all items Cat. Something like this:

export class AppComponent  {

ngOnInit(){
  this.checkCatsArray()
}

Cats=[]

items=[
  {
    ID:1,
    Cat:"A",
   image:"https://material-components-web.appspot.com/images/photos/2x3/3.jpg",
},
  {
    ID:2,
    Cat:"B",
   image:"https://material-components-web.appspot.com/images/photos/3x2/10.jpg",
},
  {
    ID:3,
    Cat:"M",
   image:"https://material-components-web.appspot.com/images/photos/2x3/6.jpg",

},
]

get counts() {
    return this.items.reduce((obj, value) => {
      if (value.Cat in obj) {
        obj[value.Cat]++;
      } else {
        obj[value.Cat] = 1;
      }

      return obj;
    }, {});
  }

checkCatsArray() {
  if (this.Cats.length == 0) {
    for (let cat of this.items) {
      this.Cats.push(cat.Cat)
    }
  }
}
}

In this scenario, I didn't touch HTML and I got the desired result - show every Cat if Cats array is empty. Maybe you need to configure checkCatsArray() at your own but I believe that this is something that you are looking for.

Hope that will help!

Upvotes: 1

Related Questions