CODEWITHSUNDEEP
angularangular5
Alen
Alen

Reputation: 75

How do I call a function from another component

I would like to call a function from another component.

To describe it in more detail, I have a module with 3-4 different components inside them. One of them is sidebar, the sidebar contain labels with links to other components. One of those linked components contains a table that can be sorted by 3/4 different functions.

Previously I manually wrote the code of sidebar within the component that had tables for this code to work.

My main component contains left and right column, the left column never changes and it contains one outside component and a side bar, the right column changes.

<div class="wrapper">
    <div class="leftCol">
        <info></info>
        <sidebar></sidebar>
    </div>
    <div class="rightCol">
        <router-outlet></router-outlet>
    </div>
</div>

Within my sidebar, I made a label like this : 

 <label [routerLink]="['/users']" (click)="sortByName('all'); currSort='abc'">ABC</label>

What I want to achieve when I press this label is to open up /users, which works but it does not execute the command sortByName which is located in users component.

sortByName(str) {
    this.users = [];
    let token = localStorage.getItem('feathers-jwt');
    this.userService.getUsers(token).subscribe(res => {
      let users = res.data.sort((a, b) => {
        if (a.lastname.toLowerCase() < b.lastname.toLowerCase()) return -1;
        if (a.lastname.toLowerCase() > b.lastname.toLowerCase()) return 1;
        return 0;
      });
      for (let i = 0; i < users.length; i++) {
        let char = users[i].lastname.charAt(0).toUpperCase();
        if (str == 'all' || char == str.toUpperCase()) {
          let object = { name: char, array: [] }
          for (let j = 0; j < users.length; j++) {
            if (char == users[j].lastname.charAt(0).toUpperCase()) {
              object.array.push(users[j]);
              users.splice(j, 1);
              j = -1;
            }
          }
          i = -1;
          this.users.push(object);
        }
      }
      this.clicks = 0;
    }, err => {
      this.toast.error('Loading users', 'FAILED')
    })
  }

Putting this function in sidebar component.ts did not do the trick either.

What do I have to do in order for sidebar label to open up linked website and also execute function on click?

Thanks in advance.

Upvotes: 0

Views: 2876

Answers (2)

Mac_W
Mac_W

Reputation: 2987

If these are not siblings: Change Boolean from another component in angular 4

If you want to access a child component method: How to call sibling component method in angular 4?

Upvotes: 0

Daddelbob
Daddelbob

Reputation: 416

You could add a sorting-rule-parameter to your routerlink (keyword: paramMap) Then the user-displaying component could contain the sorting function or better a sorting service is called depending on the given params. https://angular.io/tutorial/toh-pt5#extract-the-id-route-parameter Components should only contain fields and methods they really need / use. Everything else should be extrected to different components, modules and (shared) services

Upvotes: 1

Related Questions