Is there a way for me to retrieve the current URL from the browser within my Angular 2 application? Usually in JavaScript, we would use the window object for this task. Can anyone guide me on how to achieve this in Angular 2 using TypeScript?
Appreciate any help.
Although this response is delayed, I believe it contains valuable information that should be shared. With the release of Angular2, you now have the option to import DOCUMENT from @angular/common in order to access the location.
import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
...
export class YourComponent {
constructor(@Inject(DOCUMENT) private document: Document) {
console.log(this.document.location.href);
}
}
No need for complex imports or injections. Simply utilize the functions provided by window.location!
Some examples include:
window.location.href to access the complete URLwindow.location.hostname to retrieve the host namewindow.location.origin which combines the protocol and host name (e.g. https://)For users on older versions of IE (<=10), if location.origin is not supported, you can use
alternatively. Alternatively, consider using a polyfill likelocation.protocol + "//" + location.hostnamelocation-origin
To retrieve the URL in Angular 2, you have several options:
Location and use location.path() to get the URL (you can also refer to Location and HashLocationStrategy stopped working in beta.16)window.location.pathnameFor more information, check out:
How do I get the absolute path of the current page in Angular 2?
Ensure you import the ActivatedRoute along with other necessary Router components.
import { ActivatedRoute, Params, Router, UrlSegment } from '@angular/router';
Remember to inject it into the constructor:
constructor(private route: ActivatedRoute) { ... }
Once done, you can utilize this.route in the ngOnInit function to examine the URL. For example, you can concatenate all segments within an array using the following method as recommended by @ibgib:
let path = this.route.snapshot.url.join('/');
This will result in a string like "mars/moons/phobos".
For those planning their next trip, consider some of the suggestions provided in previous responses. Another alternative, if you prefer to capture everything before the pathname (for example, https://example.com), is by utilizing:
window.location.origin
You can also explore a variety of properties available within the window.location object by referring to this informative W3 article:
http://www.w3schools.com/js/js_window_location.asp
Cheers to future adventures!
I found guidance in this helpful resource:
public static getCurrentAbsoluteSiteUrl(): string {
if (window
&& "location" in window
&& "protocol" in window.location
&& "pathname" in window.location
&& "host" in window.location) {
return window.location.protocol + "//" + window.location.host + window.location.pathname;
}
return null;
}
Angular offers a wide range of options and promotes the use of simple coding over complicated approaches. The key is to keep it simple. Take a look at the code snippet below:
const url = new URL('../cats', 'http://www.example.com/dogs');
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
In reference to @JayChase's comment,
Using window functions in Angular Universal can cause rendering issues and potentially lead to application failure. It's best to avoid using such functions.
What is the updated method to hash CSS class names for nextJS v14? The previous approach used to involve: const path = require("path"); const loaderUtils = require("loader-utils"); const hashOnlyIdent = (context, _, exportName) => ...
I'm currently in the process of learning how to utilize React's Context API and Hooks while working on a project that involves using fetch(). Although I am able to make the request successfully, I encounter an issue where I can't retrieve t ...
I am currently working on an Android Application with the help of jQuery Mobile and Phonegap. My goal is to implement pinch zoom functionality on the App pages. I have come across several suggestions that involve using the following line, but unfortunatel ...
As a newcomer to EXT JS, I am exploring the use of MVC in my projects. Consider a scenario where I have a web service with a flexible data model. I would like to dynamically create models, stores, and components based on the data from these stores. Let&a ...
My plan is to create a room using THREE.js starting from a basic cube. Here's what I have written so far: function loadModelcube() { console.log("Function executed successfully"); cube.traverse( function( node ) { if( node.material ) { ...
I am currently attempting to create a timer using vue.js, but I am encountering some issues with my methods section: methods: { saveRunningMethod() { var runningData = { duration: `${this.hour} : ${this.minute} : ${this.se ...
Hey there, I recently tried out the autocomplete script created by tomickigrzegorz. Check it out here! It's been working smoothly for me, but I'm facing an issue with external link tags like https//google.com not functioning properly. Here is ...
parent.component.ts public test(){ //some code..... } parent.component.html <app-child (eventfire)="test($event)"></app-child> In this scenario, the child component button is displayed within the parent component. However, there i ...
I recently came across a fantastic jQuery tabs script on a website called Tutorialzine. The link to the article can be found here. As I was implementing this script, I realized I needed to customize it by adding specific classes to certain tabs. Specifica ...
This is a complex v-for loop nested inside another v-for. It displays a list of questions along with the corresponding answers for each question. The key for the question will be used as the key for grouped_answers. The structure of the v-for loop is show ...
Having trouble rendering multiple populated collections from mongoDB in EJS. To provide more context, I'll share snippets of my code: models, routes, and views. Model Schema var mongoose = require("mongoose"); var playerSchema = mongoose.Schema({ ...
I am trying to develop a download script that enables the Force Download of JPGs. Below is my PHP script: <?php header("Pragma: public"); // required header("Expires: 0"); header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); ...
I'm encountering an issue when trying to set a session cookie for storing an Address. It seems that whenever I include a comma followed by a space in the cookie's value, Safari automatically removes the spaces after the commas, causing the format ...
jQuery is designed to work within HTML pages that contain JavaScript code. While SVG and HTML both use the same DOM Level 2, SVG is XML-based and employs ECMAScript. What potential issues could arise from utilizing jQuery with SVG? Is it more advisable t ...
How can I effectively manage file uploads in node js? I would like users to be able to upload profile images with the following specifications: -Validated size of at least 200 * 200 -Accepted file formats are png, jpg, jpeg, or gif -Additional functi ...
I am currently experimenting with testing an HttpInterceptor, using ng-mocks: @Injectable() export class AuthTokenInterceptor implements HttpInterceptor { constructor(private store: Store) {} intercept(req: HttpRequest<any>, ...
When the user clicks on my eraser, I want the color to be hidden or not display its dropdown elements. I attempted this with the following code snippet. $('#chooseEraser').mousedown(function(e){ curTool = "eraser"; checkEraser ...
I've created a function that retrieves and displays values from a CSV file. Here is the code for the function: var IDArr = []; var fileInput = document.getElementById("csv"); readFile = function() { console.log("file uploaded") var reader = new ...
Seeking help with a JavaScript issue on my Joomla website. I'm not an expert, so please bear with me. I am using a regular plugin (not a Joomla specific one) to display my portfolio. It should work like this: ... black.html This is how it shouldn&a ...
I have implemented an autosuggest feature in a text box with predefined values. When typing the first letter in the textbox, a dropdown displays all related values. Is there a way to limit the number of displayed related values to 20? This is what my cu ...