How to pass an expression to a component as an input in Angular2?

Question

I need to pass an expression to a component that will be evaluated inside an component's template.

For example, component:

@Component({
  selector: 'app-my-component',
  ...
})
export class MyComponent {
  @Input items: MyClass;
  @Input expression: String;
  ...
}

with component's template:

<div *ngFor="let item of items">
  {{expression}}
</div>

Usage of MyComponent:

<app-my-component [items]="listOfItems" [expression]="'[item.id] item.name'">
</app-my-component>

As there will be more than one input, I would like to avoid usage of TemplateRef.

What is '[item.id] item.name' supposed to do? That doesn't look like an expression to me. You can't pass bindings around. — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 11, 2016 at 9:24
pass it as [expression]=" '{"id":[item.id],"name": item.name}' " and use as expression.id and expression.name — Atal Kishore
– Atal Kishore, Commented Oct 11, 2016 at 9:49
@GünterZöchbauer this should evaluate to string, for item = {"id": 1, "name" : "Item1"} to [1] Item1 — Marin Relatic
– Marin Relatic, Commented Oct 11, 2016 at 10:44
@AtalKishore I need input 'expression' to be generic, so in MyComponent's view I can just pass it as an expression to be evaluated or as a template, without knowing it's structure — Marin Relatic
– Marin Relatic, Commented Oct 11, 2016 at 10:45
then use [expression]=" '[' + item.id + '] ' + item.name " — Atal Kishore
– Atal Kishore, Commented Oct 11, 2016 at 10:48

yurzui · Accepted Answer · 2017-10-19 09:08:49Z

20

Maybe one of this options can helps you:

1) Using ngForTemplate input property of NgFor directive:

Component

@Component({
  selector: 'app-my-component',
  template: `
  <div *ngFor="let item of items template: itemTemplate"></div>`
})
export class MyComponent {
  @Input() items: any;
  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
}

Parent

<app-my-component [items]="listOfItems">
  <ng-template let-item>[{{item.id}}] {{item.name}}</ng-template>
</app-my-component>

Plunker

2) Using the NgTemplateOutlet directive

Component

@Component({
  selector: 'app-my-component',
  template: `
  <div *ngFor="let item of items">
    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
  </div>`
})
export class MyComponent {
  @Input() items: any;
  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
}

Parent remains the same:

<app-my-component [items]="listOfItems">
  <ng-template let-item>[{{item.id}}] {{item.name}}</ng-template>
</app-my-component>

Plunker

This way inside of <ng-template let-item>...</ng-template> you can use desired expression

edited Oct 19, 2017 at 9:08

answered Oct 11, 2016 at 12:30

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

1 Comment

TrySpace Over a year ago

The first one doesn't seem to work anymore. Other than the change to ng-template I can't figure out why its is not working for me. It gives me no items, but does error when I use the wrong let-* property...

Collectives™ on Stack Overflow

How to pass an expression to a component as an input in Angular2?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related