how to filter my data on the same page according to the origin click

In my DB i’ve got a list of names with specifics origins.
In my navbar, i’ve got a link for each origin.
I’m new in angular and my first approach was to create a "page" for each origin.
My question is : is there any shortcut for doing that?
like : on click on the link A, i’m going on the page and i’ve got list of origin A. on click on the link B, i’m still going on the same page but i’ve got a list of origin B …

controller laravel for each origin (origin 1,2,3 …)

 public function index()
{
    $identity = name::orderBy('name')->where('origin_link', 1)->get();
    return response()->json($identity);
}

html angular (it’s exactly same page for each origin)

<div class="ci">
<div class="container">
<ul *ngFor="let name of names">
    <li><a role="button">{{name.name}}</a></li>
</ul>
</div>
</div>

html for link

 <div class="dropdown-menu">
        <a class="dropdown-item" routerLink="names">origin 1</a>
        <a class="dropdown-item" routerLink="names1">origin 2</a>
        <a class="dropdown-item" routerLink="names2">origin 3</a>
        <a class="dropdown-item" routerLink="names3">origin 4</a>
 </div>

ts (for now, he gets all the list)

export class NamesComponent implements OnInit {
public names: string;

constructor(public namesService: NamesService
 ) { }

ngOnInit() {
this.namesService.index().subscribe((data:any) => {
  this.names= data;
 })
}

service

index(): Observable<any> {
return this.http.get(this.apiUrl + '/names');
}

Source: Laravel

Leave a Reply