Can I apply a template to a object-variable of a ngFor - loop in Angular?

Question

I have a app-projects template which is a list of ProjectComponent. For ProjectComponent. I have the app-project template.

<ul>
<li *ngFor="let project of projects">
  <app-project></app-project> 
</li>
</ul>

Component:

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {

  constructor(title: string, description: string, questions: string[]) { }

  ngOnInit() {
  }

}

So, now I want to iterate over the the individual projectComponents while applying their templates.

But I could not figure out how to do that: If I want to stick with the separate template I somehow would have to pass the item to the template.

I found that it would be possible for single properties via Inputs, but that does not help me much with this.

Component constructors are used for DI, not to pass data. That's what Inputs, Services etc are for. — Ingo Bürk
– Ingo Bürk, Commented Jul 15, 2018 at 18:06
sounds reasonable, but how would apply the templates for the objects? — JFFIGK
– JFFIGK, Commented Jul 15, 2018 at 18:09

coder · Accepted Answer · 2018-07-15 18:25:05Z

1

First you need to get the project into your ProjectComponent as input property using @Input() to do that.

You could use like bellow:

ProjectComponent:

export class ProjectComponent {

  @Input() project;

  constructor() { }

}

In the template you are using <app-project> you need to input that project property into ProjectComponent like bellow:

<ul>
    <li *ngFor="let project of projects">
        <app-project [project]=project></app-project>
    </li>
</ul>

WORKING DEMO

Hope this will help you!

edited Jul 15, 2018 at 18:25

answered Jul 15, 2018 at 17:51

coder

8,74216 gold badges41 silver badges54 bronze badges

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

6 Comments

JFFIGK Over a year ago

thanks for your answer, but would it not be kind of redundant to have the ProjectComponent and then the actual class as a property? In other words, would it not be better to have the properties of project directly in ProjectComponent?

coder Over a year ago

in Angular only way to input your project into <app-project> like this. this is the standard way to do that. I don't think you could do it like you think. it is not the better way to do that even. but you could defined Project modal in one place and you could use it that would be better I think

JFFIGK Over a year ago

"but you could defined Project modal in one place and you could use it that would be better I think" could you elaborate on that, please? Did not fully understand it

coder Over a year ago

also in Component constructor use to inject services. I mean title: string, description: string, questions: string[] take these things to separate modal if you prefer

JFFIGK Over a year ago

Indeed, I use a service for projectSComponent (via DI). But I do not know how it could make sense to use a service here, too...

|

Collectives™ on Stack Overflow

Can I apply a template to a object-variable of a ngFor - loop in Angular?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related