0

In Angular we can use *ngFor in the following way:

<li *ngFor="let hero of heroes">
  {{ hero }}
</li>

But how does Angular define the scoped variable hero and would I be able to implement the same thing? I am only interested in the scoped variable and not in the looping part.

Yeater
  • 155
  • 5

2 Answers2

0

All the public variables (functions) defined in component.ts are accesible from the component.html and can be showed using interpolation and template expresion

When you has a *ngFor, when you define "let variable of array", variable is accesible inside the *ngFor and is each element of the array

If you want to declare a variable use ng-if-let, e.g.

<div *ngIf="'hello word' as greeting">
  {{greeting}}
</div>
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • I'm sorry but I think you got my question wrong. Take a look at my solution, this way you can understand my question. – Yeater Jan 24 '19 at 08:35
  • sorry my answer, I update it. Is ng-if-let you are looking for? – Eliseo Jan 24 '19 at 09:04
  • I was just looking for a way to pass a scoped variable from a "component" (directive in this case) to its child – Yeater Jan 24 '19 at 09:13
0

Okay I was able to solve my problem. I failed to realize that I can use the following syntax myself:

*ngFor="let test...."

With this I was able to create the following directive:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appWrapper]',
})
export class WrapperDirective {
  constructor(viewContainer: ViewContainerRef, template: TemplateRef<any>) {
    viewContainer.createEmbeddedView(
      template,
      { ['$implicit']: 'Max Mustermann' },
      0,
    );
  }
}

This directive can now be used like this:

<div *appWrapper="let name">{{ name }}</div>

Is there a way to get rid of the let name part?

This Stackoverflow post helped me to implement my idea

Yeater
  • 155
  • 5