How to filter object properties from arrays in angular html

Question

Im creating a "Presentation-Editor" and in this editor i have an overview of all the presentations created. In the overview i want to display the first slide of each presentation as a preview.

The problem is that i only store the image url in the "slides" array. The "presentations" array is just a list of the the slides id's used in the presentation.

So in order to filter the background image from all that out i tried this:

<div [ngStyle]="{'background-image': 'url('+(slides | filter : {'_id':'presentation.slides[0].slideid'}).imageurl+')'}">

I wanted to filter the slides array for the id of the first slide of the presentation and then get the url from that slide.

Since i want to display every presentation, i have to display this "preview slide" dynamically, so this is what my html roughly looks like rn

<div *ngFor="let presentation of presentations">
   // The div from above
</div>

Maybe its a syntax error or its just too much ^^, Do you guys have an idea on how to solve my problem?

MoxxiManagarm · Accepted Answer · 2019-11-05 11:38:26Z

I recommend to map your object beforehand and enhance it with a property, lets name it thumbnail.

You likely have something like this in your component right now:

ngOnInit() {
  this.anyService.getPresentations().pipe(
    /*some kind of unsubscription*/
  ).subscribe(presentations => this.presentations = presentations);

  this.anyService.getSlides().pipe(
    /*some kind of unsubscription*/
  ).subscribe(slides => this.slides = slides);
}

I recommend to use rxjs and async pipe. It will result in something like this

ngOnInit() {
  this.presentations$ = this.anyService.getPresentations();
  this.slides$ = this.anyService.getSlides();

  this.extendedPresentations$ = combineLatest([this.presentations$, this.slides$]).pipe(
    // TODO: care about falsy values
    map(([presentations, slides]) => presentations.map(
      presentation => {
        return {
          ...presentation,
          thumbnail: slides.find(slide => slide._id === presentation.slides[0].slideid).imageurl
        }
      }
    )),
  )
}

And in template:

<div *ngFor="let presentation of extendedPresentations$ | async">
   <div [ngStyle]="{'background-image': presentation.thumbnail}">
</div>

jitender · Accepted Answer · 2019-11-05 09:43:50Z

1

You can create a function in your TS file to get url for given slide id like

getUrl(slideid){
let slide=slides.find(s=> s._id==slideid);
return slide.imageurl
}

Then on UI

<div *ngFor="let presentation of presentations">
   <div [ngStyle]="{'background-image': 'url('+getUrl(presentation.slides[0].slideid)+')'}">
</div>

answered Nov 5, 2019 at 9:43

jitender

10.4k1 gold badge22 silver badges49 bronze badges

2 Comments

MoxxiManagarm Over a year ago

blog.appverse.io/…

jitender Over a year ago

@MoxxiManagarm I know other way could be to create a pipe for that if OP want to do so

Reginaldo Costa · Accepted Answer · 2019-11-05 09:51:29Z

1

You could try something like this:

and in the loop you could do this

<div *ngFor="let presentation of presentations; let i = index;">
  <div [ngStyle]="getBackgroundImage(i)">
</div>

your function for getting background will look like this

getBackgroundImage(i) {
let presentation = presentations[i];
let slide = presentation.slides.filter(
          slide => slide.id === presentation.slides[0].slideId);
}

return {
'background-image': `url($slide.imageurl)`

};

}

answered Nov 5, 2019 at 9:51

Reginaldo Costa

8799 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to filter object properties from arrays in angular html

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related