Can one obtain a public IP address using Typescript without relying on third-party links?

Though this question has been asked before, I am currently working on an Angular 4 application where I need to retrieve the public IP address of the user's system.

I have searched on Stackoverflow for references, but most posts suggest consuming a third-party API URL to obtain the IP address.

However, in my case, I want to programmatically trace the public IP address of the user's system without relying on external APIs.

If anyone has any suggestions or solutions for this, I would greatly appreciate it.

angulartypescript

Answer №1

If you're looking to find your public IP address, consider using the public-ip package. Keep in mind that this package relies on a third-party server to fetch the information, but it's handled behind the scenes for you.

import { Component, OnInit } from '@angular/core';
import publicIp from 'public-ip';

@Component({
  selector: 'public-ip',
  template: `<h1>Your public IP address is {{publicIpAddr}}</h1>`
})
export class PublicIpComponent implements OnInit {
  publicIpAddr: string;

  ngOnInit() {
    publicIp.v4().then((ip) => this.publicIpAddr = ip);
  }
}

Check out the demo here

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

Scrollable Turbo Table experiencing a problem with the PrimeNG filter dropdown

When using PrimeNG Turbo Table, I am facing an issue where the filter dropdown is getting placed inside the scrollable table. The dropdown works perfectly fine without the scrollable table. You can see it in action here. However, when the table is scroll ...

cssangularangular5primengprimeng-turbotable

Is there a way to send routerLink to an HTML element like <div [innerHTML]=""> without triggering the warning: "sanitizing HTML stripped some content"? Check out https://g.co/ng/security#xss for more information

Within the parent component, I am using the following construction: const link = `<a routerLink="${group.id}">${group.name}</a>`; // also tried using [routerLink] When attempting to work with it in a child component, I implement it l ...

angular

Display Facebook events using AngularJS technology

I am looking to showcase events on my website. Currently, I am fetching events from Facebook utilizing the following code: In my infos.service.ts file: getEvents(link: string): Observable<any>{ let id = link.split('facebook.com/')[1].sp ...

facebookangulardisplay

Discovering if objects possess intersecting branches and devising a useful error notification

I have 2 items that must not share any common features: const translated = { a: { b: { c: "Hello", d: "World" } } }; const toTranslate = { a: { b: { d: "Everybody" } } }; The code ab ...

typescript

Exploring Angular data iteration with Tab and its contentLearn how to loop through Tab elements

Upon receiving a response from the API, this is what I get: const myObj = [ { 'tabName': 'Tab1', 'otherDetails': [ { 'formType': 'Continuous' }, { 'formType& ...

javascriptjqueryangulartypescriptangular8

Version 1.0 of the Angular 4 branch integrated with Auth0 JWT

I have been trying to implement the code provided on this website https://github.com/auth0/angular2-jwt/tree/v1.0 However, I am facing an issue with the following code snippet that needs to be placed in the app.module.ts file. The problem is that this co ...

angular

Console error detected, yet content still appears on web browser

I encountered an issue in my Angular app where I am getting the ERROR TypeError: Cannot read property 'name' of undefined, even though the projects.name is successfully displaying. How do I troubleshoot this error appearing in the console.log? Th ...

angularangular-routingangular-formshttp-parameters

Transform a list of time slots into a time interval using Angular (2/4/5/6)

Hello everyone! Just wanted to share my updated solution after considering your feedback. Thank you! getTime(apptTime) { const fields = apptTime.split("-"); const startingTime = this.formatTime(+fields[0]); const endingTime = this.formatTime(+fie ...

angularstringswitch-statement

SplitChunks in Webpack 4 helps to cache modules so they do not need to be reprocessed

Currently, I am working on a TypeScript project that utilizes node packages and webpack for compiling and bundling. The folder structure of my project is as follows: Scripts App Various Modules Utility Various Utility components a ...

typescriptnode-moduleswebpack-4

We were unable to locate the module '@reactflow/core' or its associated type declarations

After forking reactflow, I attempted to make some modifications but encountered a type error even without making any changes. https://i.sstatic.net/EyTZE.jpg My next step was to try "pnpm i @types/reactflow," but it did not resolve the issue. ...

javascripttypescriptnpmtypes

Tips for creating a seamless merge from background color to a pristine white hue

Seeking a seamless transition from the background color to white at the top and bottom of the box, similar to the example screenshot. Current look: The top and bottom of the box are filled with the background color until the edge https://i.stack.imgur.com ...

javascriptcssreactjstypescriptmaterial-ui

What is the process for enabling Namespaces in CRA?

When creating a TypeScript React app, I used the following command: yarn create react-app my-app --template typescript This setup compiles my project using Babel and bundles it with webpack. Now, I want to utilize TypeScript namespaces, which are not nat ...

typescriptwebpackbabeljsreact-scripts

Guide on converting enums in Angular 6

I have been working on translating enums in Angular, but I'm facing a challenge. While I can read and display them in a dropdown menu, translating them is proving to be difficult. Here is an example of my code: export enum test { test1 = '1 - ...

angulartypescriptngx-translate

Angular micro front-end powered by module federation

I am interested in developing micro front-end applications using module federation. I have successfully implemented it following the guidelines provided on this informative page. However, I am facing a challenge where I want each project to have its own u ...

angulartypescriptsassmicro-frontendangular-module-federation

The Tanstack react-table feature is limited in its ability to output tsx from the cell

Currently conducting a test on Tanstack react-table library using React and TypeScript. It appears that I am encountering an issue with returning tsx/jsx from the cell function of ColumnDef: https://i.sstatic.net/d5X3y.png Is there something crucial that ...

reactjstypescriptreact-tabletanstack

Invoking Angular component method using vanilla JavaScript

For my web application, I am utilizing Angular and require Bluetooth functionality on a specific page. I am implementing loginov-rocks/bluetooth-terminal (https://github.com/loginov-rocks/bluetooth-terminal) for establishing the Bluetooth connection, which ...

javascriptangularweb-componentweb-bluetooth

Ways to define a static variable within a function using Typescript

There is a common approach to declaring a Static Variable or Function within a Class, demonstrated here: class SomeClass(){ static foo = 1; static fooBar(){ return ++SomeClass.foo; } } However, is it possible to declare a Static Local Variable ...

typescript

What is the best way to utilize a service that has been imported using forRoot() within a feature module

Currently utilizing the package found at: https://github.com/troyanskiy/ng2-resource-rest, I am encountering difficulties when attempting to correctly import it into my feature modules. The documentation provides the following instructions: @NgModule({ ...

angular

The JSON response is being tampered with by an unidentified entity while traveling between a PHP Laravel application hosted on an Nginx server and

After making an API call to the server, I noticed that the JSON response was being altered with some additional JSON at the beginning. This is causing the response to be invalid JSON and resulting in the API call failing during the decoding process. While ...

phpangularlaravelnginx

Type definition for Vuex store functionality

Working on creating a versatile type to provide typing hints for mutations in Vuex. After reading an inspiring article on Vuex + TypeScript, I decided to develop something more generic. Here is what I came up with: export type MutationType<S, P, K exten ...

typescriptvue.jstypesvuex