Steps for passing the :id parameter to an Angular 2 service using routes

Currently, I am trying to find a way to pass a Mac ID into a service using routes in order to filter data efficiently. In my app.html file, there is a dropdown menu where I manually input a list of Mac addresses. Through Angular activated routes, I am attempting to figure out how to retrieve the Mac ID and utilize it in an Angular service for filtering purposes.

[app.html]

<ul class="dropdown-menu scrollable-menu" role="menu">

      <li><a routerLink="mac/:id">3s-ds-23-sf-23-ce-33</a></li>
      <li><a routerLink="mac/:id">3s-ds-23-sf-23-ce-34</a></li>
      <li><a routerLink="mac/:id">3s-ds-23-sf-23-ce-35</a></li> 

</ul>

service.ts

@Injectable()
export class TabuleService {

  //private headers = new Headers({'Content-Type': 'application/json'});
  private _Url = 'http://localhost:3000';  // URL to web api

  constructor(
     private _http: Http,
     private route: ActivatedRoute ) {}

getTemperature(): Observable<testing\[\]> {
    const url = this._Url+'/temperature';                    
    return this._http.get(url)
               .map(res =>{
                let data=res.json();
                let parsedData = \[\]; 
 // To effectively filter the data, I need to extract the parameter of mac from the routes
                data.filter(function(el){ return el.mac=="3s-ds-23-sf-23-ce-35" }) 

                .forEach(function(item){ parsedData.push({ 
                          x:item.epoch_time_stamp, y:parseFloat(item.temp) });  });
                          //console.log(parsedData);
                return parsedData; })
               .catch(this.handleError);
               } 

https://i.sstatic.net/NNjVt.png

Answer №1

<ul class="dropdown-menu  scrollable-menu" role="menu">

      <li *ngFor="address in macAddress>
             <a  [routerLink]="['/mac', address]">
                 {{address}}
             </a>
     </li>
</ul>

To display a list of MAC addresses, use the following array in your component:

macAddress:Array<string>=['3s-ds-23-sf-23-ce-33', '3s-ds-23-sf-23-ce-34', '3s-ds-23-sf-23-ce-35';

If you want to get the parameter using Angular's ActivatedRoute, you can do it like this:

 constructor(
     private _http: Http,
     private route: ActivatedRoute ) {
           this.mac= this.route.params.subscribe(params => {
                   this.category = + params['address'];


    });
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a report file based on Typescript type checking results

Is there a way or third-party library that can help generate a report file (such as .html, .csv, etc.) after running TypeScript typechecking with tsc? I need to create a report on typechecking in my Next.js Project, capturing all the output from tsc --noE ...

Discover the wonders of utilizing @blur events on your custom Vue components!

Trying to create a customized component that mimics an input field with validation, I'm encountering issues with getting @Change, @blur, and other events to function properly as they would on a standard input field. This is the structure of my custom ...

Invoke the method saved as a class attribute

Within my codebase, there exists a class named Process. This class has a constructor that takes in a type of object () => void. Initially, everything seemed to be working perfectly fine when I passed this object into the class. However, issues arose whe ...

Utilize a ReplaySubject to capture and replay only the most recent value from an observable stream

Here is my ReplaySubject setup: matchCount = new ReplaySubject<number>(); totalCount = new ReplaySubject<number>(); This is how I am utilizing it: getMatchedEventsCount(){ return this.dcs.matchCount.asObservable(); } getTotalEvent ...

Enabling Angular Elements to handle non-string properties and inputs

When working with Angular Elements, inputs can be supplied through HTML attributes like so: <some-custom-element someArg="test value"><some-custom-element> An alternative method is utilizing setAttribute. However, it's important to note ...

Angular 2/NPM: setting up a new directory with all the necessary files for running the application

I'm feeling a bit frustrated, but I'm giving it a shot anyway. Our goal is to create a TypeScript Angular 2 hello world app that we can use as the front end for a Spring app. Currently, we're using the Angular 2 quickstart as our foundation ...

"The process of logging in to Facebook on Ionic app speeds up by bypassing

I'm facing a minor issue with Facebook login in Ionic. I've tried using Async - Await and various other methods to make it wait for the response, but nothing seems to work. The login function is working fine, but it's not pausing for me to p ...

What is the best way to set up a variable in Typescript that will be assigned the value of an asynchronous request once it is completed?

As a newcomer to typescript, I encountered an issue that hadn't occurred in my previous project. It appears that declaring a variable before an API request inside a try-catch block leads to typescript errors when attempting to use this variable after ...

How can I receive live notifications for a document as soon as it is created?

My Angular app is connected to Cloud Firestore, and I've created a function in a service to retrieve a user's rating from the 'ratings' collection. Each rating is stored in this collection with the document ID being a combination of the ...

Utilizing several data sources within a single mat-table

Hello, I require assistance with a task. I am trying to display multiple mat-tables with different data sources in my component.ts file Groups(){ this.apiSvc.Cards().subscribe((rsp: any) => { this.groups = rsp; this ...

Oops! There seems to be a syntax error near "NOT" in TypeORM

I am currently developing an app using NestJs with a Postgres database and TypeOrm as the ORM. I have created my migration file, configured the package.json file, but when I try to run yarn typeorm migration:run, I encounter the following error: query fail ...

Tips on narrowing down the type of callback event depending on the specific event name

I've been working on implementing an event emitter, and the code is pretty straightforward. Currently, tsc is flagging the event type in eventHandler as 'ErrorEvent' | 'MessageEvent'. This seems to be causing some confusion, and I ...

Issue encountered while using Typescript with mocha: Unable to utilize import statement outside a module

Exploring the world of unit testing with mocha and trying to create a basic test. Project Structure node_modules package.json package-lock.json testA.ts testA.spec.ts tsconfig.json tsconfig.json { "compilerOptions": { "target&qu ...

Implement a conditional statement in Angular 5 to dynamically control the layout of Bootstrap columns in

I am facing an issue in my Angular 5 project where I need to display certain columns based on specific conditions. Recently, I updated Bootstrap to version 4 and now I am encountering a problem with conditional templates. Some columns with the "ng-star-in ...

The View does not get updated by Angular's *ngFor directive

When I modify the Array of servers from outside the class declaration, the View/HTML component does not update accordingly. However, when I perform the same modification from inside the class, it works fine. Both functions successfully update the servers A ...

Generating a composer method in TypeScript (Flow $Composer)

While flow supports $Compose functions, the equivalent mechanism seems to be missing in TypeScript. The closest thing I could find in TypeScript is something like https://github.com/reactjs/redux/blob/master/index.d.ts#L416-L460. Is there a native equivale ...

TypeScript NodeJS Error: Unable to access the 'address' property as it is undefined

Having just started using TypeScript, I am puzzled by the error it's throwing. The VanillaJS version works perfectly, but when I transferred it to TypeScript and checked my index.ts file, the same error persisted even after compiling the TS code usin ...

What's the best approach to ensure Angular 2 routing functions smoothly with App Engine when the page is refreshed?

I'm currently working on an Angular 2 application running in the App Engine Standard Environment. I've managed to get it working smoothly by configuring the app.yaml like this for navigating within the app: handlers: - url: /api/.* script: _go ...

What is the best way to implement multiple ternary operators within HTML code?

Consider the following code snippet: It currently applies CSS classes up to red4, but I want to apply CSS classes up to red11. Additionally, the variable "size" in myData should be dynamic. For example, size could range from 0-20 // 0-100 // 0-10000, etc., ...

When the ngFor data reaches a count of four, it will be shown in a separate container div

I am struggling to find a way to display my ngFor data in a new container div once the length reaches four. It's easier to hard code the data into separate divs, but using ngFor results in the data being displayed in a single container div. In the co ...