Angular 7: *ngFor with a component and passing variable parameters

Question

I have a portfolio item that is being used in a parent component, web-portfolio.html, getting data from web-portfolio.ts.

I'm trying to pass data from an array in the web-portfolio.ts file in an *ngFor loop.

<app-portfolio *ngFor = "let site of this.sites" name = "site.name" img = "site.img" description = "site.description" link = "site.link"></app-portfolio>

The app-portfolio component has inputs for these:

export class PortfolioComponent implements OnInit {

  isOpen: boolean = false;
  @Input() name: string;
  @Input() img: string;
  @Input() description: string;
  @Input() link: string;

}

But instead of getting the correct output, I receive three of the initial array's value;

export class WebPortfolioComponent implements OnInit {
 sites = [
    {
     "name":"Site A",
     "description": "Lorem Ipsum",
      "img":"/web/sitea.png",
      "link":"http://sitea.com"
    },
    {
     "name":"Site B",
     "description": "Lorem Ipsum",
      "img":"/web/siteb.png",
      "link":"http://siteb.com"
    },
   {
     "name":"Site C",
     "description": "Lorem Ipsum",
      "img":"/web/siteC.png",
      "link":"http://siteC.com"
    },
  ];
}

 // OUTPUT => Blank, blank, blank

What am I doing wrong?

portfolio.component.html:

<div class = "portfolio-item">
  <div class = "portfolio-thumb">
    <a (click) = "this.isOpen = !this.isOpen">
      <img src = "" alt = ""/>
    </a>
  </div>
  <div class = "portfolio-full" [ngClass] = "{'port-show':this.isOpen}">
    <div class = "portfolio-full-image" (click) = "this.isOpen = !this.isOpen">
      <img src = "{{this.img}}">
      <div class = "portfolio-description">
        {{this.description}}
      </div>
    </div>
  </div>
</div>

Neither name nor [name] seems to work. Which is correct, [name]? @pindev — MaxRocket
– MaxRocket, Commented Jun 26, 2019 at 3:46
It should be either name="{{ site.name }}" or [name]="site.name" — Julian W.
– Julian W., Commented Jun 26, 2019 at 3:47
Your code looks correct when you change your html code as @pindev's comment. I was wondering whether the value of sites was changed somewhere. Try to write <p>{{ sites | json }}</p> in your html to print out the value of it. And you don't need to write this. in html. You can just use img, name and etc. — Samuel
– Samuel, Commented Jun 26, 2019 at 3:53

Hien Nguyen · Accepted Answer · 2019-06-26 04:05:47Z

1

You need add {{}} for property component name = "{{site.name}}"

<app-portfolio *ngFor = "let site of this.sites" name = "{{site.name}}" 
 img = "{{site.img}}" description = "site.description" link = "site.link"></app-portfolio>

https://stackblitz.com/edit/angular-ns1qli

Update for your HTML still worked

https://stackblitz.com/edit/angular-input-parameter?file=src/app/portfolio.html

edited Jun 26, 2019 at 4:05

answered Jun 26, 2019 at 3:45

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MaxRocket Over a year ago

That doesn't seem to make any difference, unfortunately

MaxRocket Over a year ago

Looks like I'd made a mistake leaving out the image src in the HTML. Thank you for your demo!

sagars01 · Accepted Answer · 2019-06-26 03:52:51Z

1

Just wrap the component like property binding in Angular

<app-portfolio *ngFor = "let site of this.sites" [name] = "site.name" [img] = "site.img" [description] = "site.description" [link] = "site.link"></app-portfolio>

answered Jun 26, 2019 at 3:52

sagars01

3862 silver badges9 bronze badges

Comments

Naren Murali · Accepted Answer · 2019-06-26 03:48:39Z

0

The img is an html attribute so it cannot be used with @Input so please use [image] instead, please check the below example.

Stack Blitz Demo

answered Jun 26, 2019 at 3:48

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Collectives™ on Stack Overflow

Angular 7: *ngFor with a component and passing variable parameters

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related