Basically, my app isn't finding a function I've written. When the function runs, it passes the value of that clicked link's index to the element\_id variable, which I have outlined below. 

In summary, here is the program flow:

1. A menu is generated from an API call in a shared service and each link has a different
id, which is the index of the array from the call. - This works as needed.
2. A user should click on a link in the menu and have that link's index id passed to
the element\_id variable, which is used to specify what content is
called from content.ts and displayed on the page (in the content
controller).

Here are the details.

I have built the following service. **Notice the last function is: change\_val(element\_id).**

***api.service***

```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
    url = 'api address';
    element_id; // establishing the variable here
  constructor(private http: HttpClient) { }
  public getMenus(){
    return this.http.get(this.url);
  }
  public getData(element_id){
    return this.http.get(this.url);
  }
  public change_val(element_id){ //here is the function
    this.element_id = this.element_id;
    return this.element_id
  }
} 

```

\*\*\*\* element\_id is a variable that I am using in another component that uses the service as follows; it's value changes every time a user clicks on a link:

***content.component.ts***

```
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
  content;
  constructor(private api: ApiService) { }
  ngOnInit(){
    return this.api.getData(this.api.element_id).subscribe(res => {
    this.content = res[this.api.element_id]; //here is the variable again so the content will change as the element_id changes
  });
}
}

```

Here is the the function again (last line of the logic) being used in the component. 

***nav.component.ts***

```
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
  menus;
  constructor(private api: ApiService){}
  ngOnInit(){
    return this.api.getMenus().subscribe((data: any[]) => {
      console.log(data);
      this.menus = data;
      this.api.change_val(this.api.element_id); // here is the function in the component. When this runs, an id should be passed to element_id.
  });

  }
}

```

***Here is where the function change\_val() is run and the index id is passed to its parameter, but its not being found.*** Here is the error: Property 'change\_val' does not exist on type 'NavComponent'.

***nav.component.html***

```
<div *ngFor="let menu of menus; index as id">
    <ul>
       <li><a [routerLink]="['/contact', id]" (click)="change_val(id)">{{menu['course-lesson-name']}}</a></li>
    </ul>
</div>

```

Just in case it is needed, here is the ***app-routing.module.ts:***

```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NavComponent } from './nav/nav.component';
import { ContentComponent } from './content/content.component';

const routes: Routes = [
{path: 'content/:id', component: ContentComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

```

Thanks for your help.