0

I want to send a variable to another component.

HTML-doc in component A where I want to send user.id to component B

<li class="list-group-item list-group-item-action" *ngFor="let user of users">
 <a routerLink="/profile"  routerLinkActive="active" (click)="testFunc(user.id)">
  {{user.name}}
 </a>
</li>

Component A where I want to send the id to component B (This is where I'm stuck)

 testFunc (id: JSON): string {
    //Send to component B
  }

I don't know if this is enough information but I can provide with more if needed.

4
  • You can use a broadcaster event as describe in this thread stackoverflow.com/questions/33338276/angular-2-event-broadcast Commented Sep 21, 2017 at 12:58
  • How are Component A & B related (parent-child, siblings, or unrelated at all)? Where are they present in your app? Commented Sep 21, 2017 at 13:09
  • Should be parent-child but I think its unrelated atm Commented Sep 21, 2017 at 13:26
  • It does depend on how the components are related, could you please show your template showing both components or at least an overview of how it looks? Commented Sep 21, 2017 at 14:49

1 Answer 1

1

If I understand your code when you click on the link you go to /profile page. So if the content B is the profile component you can send your user.id throw the router parameter like:

<a [routerLink]="['/profile', user.id]">

Of course configure the right route before. You can check these documentations:

In app.module.ts

const appRoutes: Routes = [ 
  {path: 'addProfile', component: AddProfileComponent }, 
  {path: 'listProfiles', component: ListProfilesComponent}, 
  {path: 'profile/:id', component: ProfileComponent}
]

And

In ProfileComponent

export class ProfileComponent implements OnInit {
     private selectedId: number;

     constructor(private route: ActivatedRoute) {}

     ngOnInit() {
       this.route.paramMap
                 .switchMap(params => this.selectedId = +params.get('id');
       // second option
       this.route.params.subscribe(params => this.selectedId = +params['id'])
    }
}

OR

If when you click on the link you just want to send a value to a component which is in your page, you can use @Input decorator. Like this :

<componentA>
    <li class="list-group-item list-group-item-action" 
        *ngFor="let user of users">

        <a routerLink="/profile"  routerLinkActive="active"
           (click)="testFunc(user.id)">{{user.name}}</a>
    </li>

    <componentB [inputName]="userId"></componentB>
</componentA>

In the ts files:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'componentA',
  templateUrl: 'url'
})
export class ComponentA {
  public userId: string = ""
  constructor() {}

  public function testFunc(id: string): void {
     this.userId = id
  }
}

....

import { Component, Input } from '@angular/core';

@Component({
  selector: 'componentB',
  templateUrl: 'url'
})
export class ComponentB implements OnInit {
  @Input() inputName: string;
  constructor() {}

  function ngOnInit(): void {
     console.log(inputName)
  }
}

Be careful, don't try to show your input variable into constructor that doesn't work

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

2 Comments

The first answer is what I'm looking for, but how will the component fetch the id? Through the constructor?
Because this is how my routes look like in app.module.ts const appRoutes: Routes = [ { path: 'addProfile', component: AddProfileComponent }, { path: 'listProfiles', component: ListProfilesComponent}, { path: 'profile', component: ProfileComponent} ];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.