CODEWITHSUNDEEP
javascriptangulartypescript
sebaLinares
sebaLinares

Reputation: 485

use information from ngFor on another component

I need to capture data about the ngFor loop instance that is being rendered in the view, to then output it to a different view that renders extra information about the first information captured in the ngFor loop.

Example:

.ts file

user = [
  {name: "Lucho", lastname: "Pai"},
  {name: "Debora", lastname: "Melo"},
  {name: "Elba", lastname: "Lazo"}
]

.html file

<ul *ngFor="let user of users">
  <li> 
    Name: {{ user.name }}
    Lastname: {{user.lastname }}
  </li>
</ul>

That will render 3 , one for each user. I want to click in any of them and go to another view that shows me detail information about the lastname family. I.e., if I click in the "Elba" , I want to navigate to a full description of the "Lazo" family. So I need to capture that user information to navigate and to then make a request to my database to get the "Lazo" family information.

I've been thinking about this some days, but I cant grasp the concept that I need to understand to do it. It's to abstract for me. Between input(), output(), viewchild(), etc, I'm just tangling myself.

I really hope I explained myself, Regards.

Upvotes: 1

Views: 1074

Answers (4)

Hana Wujira
Hana Wujira

Reputation: 880

you can pass the value of selected family to the child component using @Input like this

component.ts

selectedFamily:any;

html

 <ul *ngFor="let user of users">
      <li (click)="selectedFamily=user;"> 
        Name: {{ user.name }}
        Lastname: {{user.lastname }}
      </li>
    </ul>
<detail-component *ngIf="selectedFamily" [value]="selectedFamily"></detail-component>

detail.component.ts

@Input() value:any;

UPDATE :- If the you want to navigate to another route to display the detail of the family you can use parameter to pass the unique id of the familiy

e.g

 <ul *ngFor="let user of users">
          <li (click)="onFamilySelect(user)"> 
            Name: {{ user.name }}
            Lastname: {{user.lastname }}
          </li>
        </ul>

component.ts

detailUrl:string="details/"// example route
onFamilySelect(user:any){
    this.router.navigate(this.detailUrl+user.UserId)//assuming UserId is unique Id
    }
}

on the new component 

ngOnInit(){
  let userId = this.route.snapshot.param['id'];
   //and get the detail from db by userid
}

on route.module.ts

export const routes: Routes = [
{ path: 'details/:id', component: NewComponent }
     ];

Upvotes: 3

Mohamed Gabr
Mohamed Gabr

Reputation: 441

dear Kaiser I think you can use the local storage as in this example

first.ts

//first component
//Inject Router in your constructor from 
import { Router } from '@angular/router';
constructor(private router:Router) { }
navigateToOtherComponent(user){
localStorage.setItem("user",user);
this.router.navigate(['/second.ts']);
}

.html

//first component
// Add Event (Click) on the <li> tag or add a button aside with your content

<li (Click)="navigateToOtherComponent(user)"> 
Name: {{ user.name }}
Lastname: {{user.lastname }}
</li>

second.ts

//second component
constructor() {
const user = localStorage.getItem("user"); 
}

Upvotes: 2

Nabil Shahid
Nabil Shahid

Reputation: 1458

You can pass the user object in a function and run the navigation logic based on that specific user. For example in the html file you can bind and event to the ul:

<ul *ngFor="let user of users">
  <li (click)="navigateBasedOnUser(user)"> 
    Name: {{ user.name }}
    Lastname: {{user.lastname }}
  </li>
</ul>

And then in the component, you can define navigateBasedOnUser function to navigate. For example:

user = [
  {name: "Lucho", lastname: "Pai"},
  {name: "Debora", lastname: "Melo"},
  {name: "Elba", lastname: "Lazo"}
]
navigateBasedOnUser(user){
// the user parametere here will have the user object of the `li` the user clicked on. you can access all the values of the user i.e. name, last name e.t.c.
 this.router.navigate(["detailsComponent",user.name])
}

Upvotes: 1

Vinod Bhavnani
Vinod Bhavnani

Reputation: 2225

Assuming your detail component has a route configured and is called details. Hence use this answer only if you are routing to the details component. If you are displaying the details on the parent component itself, use the answer given by someone else below.

In your list.component.html

<ul *ngFor="let user of users">
  <li> 
    Name: {{ user.name }}
    Lastname: {{user.lastname }}
    <button (click)="showDetails(user.name)">Details</button>
  </li>
</ul>

In your list.component.ts

constructor(private router: Router){}

user = [
  {name: "Lucho", lastname: "Pai"},
  {name: "Debora", lastname: "Melo"},
  {name: "Elba", lastname: "Lazo"}
]

showDetails(user){
    this.router.navigate(['/details', { user: user}]);
}

In your details component this is how you receive the data:

ngOnInit() {
  this.user$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => {
      this.user = params.get('user');
    })
  );
  //Do something with this.user
}

Hope this helps.

Upvotes: 1

Related Questions