0

I have the next code in the html:

<div *ngFor="let obj of objts; let i = index" class="col-md-3">
   {{obj.name}}
</div>

And in my component I have the next:

catchName( petition ) {
    console.log( petition );
}

I have tryied the next thing:

<div *ngFor="let obj of objts; let i = index" class="col-md-3">
   {{obj.name}}
   <div (click)="catchName(obj.name)"></div>
</div>

but doesn't works

how could I catch the value in a function of the name/variable in everyloop of NgFor?

Thank you very much

tremenk
  • 73
  • 1
  • 8
  • What get's logged in `catchName` currently? In this situation you could easily move each "child" to a new component with `@Input`. Then you have easy access to the obj and it's child properties. – Alexander Staroselsky Nov 25 '20 at 18:50
  • Sorry... I want to call the function catchName when ngFor does the loops in every loop I want to clarify that sorry for the mistake – tremenk Nov 25 '20 at 19:21

4 Answers4

1

Based on this solution, what you are looking for is to create a directive like this:

@Directive({ selector: '[invoke]'})
class InvokeDirective {
  @Output() invoke:EventEmitter = new EventEmitter();
  ngAfterContentInit() {
    this.invoke.emit(null);
  }
}

And then call it in your ngFor like this:

<div *ngFor="let obj of objts; let i = index" class="col-md-3" (invoke)="catchName(obj.name)">
   {{obj.name}}
</div>
Tombery
  • 266
  • 2
  • 15
0

You can put you {{ obj.name }} inside the <div (click)="catchName(obj.name)"></div>, so when you click the name of the element you also clicks on the div.

<div *ngFor="let obj of objts; let i = index" class="col-md-3">
   <div (click)="catchName(obj.name)">
     {{obj.name}}
   </div>
</div>
Christian Gomes
  • 31
  • 3
  • If I don't wanna to click to catch the variable in a function. What I want is when ngFor does the loop call the function. – tremenk Nov 25 '20 at 19:19
  • 1
    The best way you can do it is on the .ts component with a for loop for example. But if you really need to do this on html you can just call {{ catchName(obj.name) }} without putting it in any tag. For example:
    {{obj.name}} {{ catchName(obj.name) }}
    – Christian Gomes Nov 25 '20 at 20:52
  • It is perfect what you printed there but i have a problem... the functions is looping infinity... and I can't stop it... – tremenk Nov 25 '20 at 22:54
  • The function will be fired every time you do an action in the page, you really need to call that method from the html? Maybe one of the life cycle hooks, ngOnInit for example can help you do this better – Christian Gomes Nov 25 '20 at 23:53
0

If you were trying to call the function when the text is clicked it will not work because you created a new empty div next to the text which would be hard to click because it's empty. Try this:

<div *ngFor="let obj of objts; let i = index" class="col-md-3" (click)="catchName(obj.name)">
   {{obj.name}}
</div>
Eliav Cohen
  • 151
  • 7
  • What happens behind the scenes is that angular creates a new component for the loop and wraps the rest of the div with it, so it's safe to call obj in click although it's in the same line with its declaration. – Eliav Cohen Nov 25 '20 at 18:52
  • If I don't wanna to click to catch the variable in a function. What I want is when ngFor does the loop call the function. – tremenk Nov 25 '20 at 19:19
0

Now that I understand better your request I think the most efficient way of doing it properly is to create a new component for the inner element, pass the object to it, and use ngOnInit to call the function

EDIT

Example:

  1. run this in your workspace (you may change inner-component to whatever you like)

    ng g c inner-component

  2. open the file src/app/inner-component/inner-component.ts, and do the following edits to your component class:

  • add a new class property as follows (just under the class title): @Input('obj') obj;. Don't forget to import the { Input } decorator from '@angular/core'
  • add catchName as a class method wherever you want in your class
  • inside the existing ngOnInit method, call catchName(this.obj.name)

  1. put this in the file src/app/inner-component/inner-component.html {{obj.name}}

  2. put this in the main component: <div *ngFor="let obj of objts; let i = index" class="col-md-3"> <app-inner-component [obj]="obj"></app-inner-component> </div>

Eliav Cohen
  • 151
  • 7