CODEWITHSUNDEEP
angular
Bail P
Bail P

Reputation: 271

Getting access to an element in ngFor loop

I want to access the current image url (the url is a property of the image object) in the ngFor loop that loops through an array of image objects. I want to access this in same components typescript file.

I though that maybe I could bind to property in the same components .ts file using the @Input() but I believe this is for a child/parent relationship.

How would I go about doing this in angular?

Relevant html:

<div
      class="image-container"
      *ngFor="let image of galleryList"
      [imageUrl]="image.Url">

</div

Relevant ts code:

  @Input() imageUrl: string;

I am not expecting the above code to work but I just wanted to show you what I am trying to achieve.

Ultimately, I am trying to use the image url in this method within the typescript file:

checkLike(imageUrl: string): boolean {
    const users = this.usersService.getUsers();

    if(this.isLoggedIn) {
      const currUsersIndex = this.usersService.getCurrUserArrIndex();
      console.log(currUsersIndex);
      const FavouritesList = users[currUsersIndex].likes;

      if(FavouritesList.includes(imageUrl)) {
          return true;
      } else {
          return false;
      }
  }
    }

Then conditionally add html elements depending on the result:

 <div *ngIf="checkLike(image.imagePath)" class="heart-icon-container">
        <ion-icon name="heart" class="heart-icon" (click)="updateLike(image.imagePath)"></ion-icon>
      </div>
      <div *ngIf="!checkLike(image.imagePath)" class="heart-icon-container">
        <ion-icon name="heart-outline" class="heart-icon" (click)="updateLike(image.imagePath)"></ion-icon>
      </div>

Upvotes: 0

Views: 865

Answers (1)

Aakash Garg
Aakash Garg

Reputation: 10969

Lets say you have a component abc-component, you can go with it like

<abc-component *ngFor="let image of galleryList" [imageUrl]="image.Url"></abc-component>

But you can't pass inputs to normal div, unless you change selector of your component as a attribute, For eg:- 

@Component({
  selector: [abc-component],
   ....
  })

Then you can use it like :- 

<div *ngFor="let image of galleryList" [imageUrl]="image.Url" abc-component></div>

And have it inside Abc component like

@Input() imageUrl: string;

Upvotes: 1

Related Questions