Obtain the link to a Component

I am attempting to retrieve the current URL in Angular 8 using 

this._my.dialog = location.pathname.replace('/', '');
, but it is not consistently returning the desired result, even when placed within ngOnInit().

This issue seems to occur most notably when:

  • Modifying the URL
  • Loading for the first time

In my app.component.html file, I have the following structure:

  <app-nav-menu></app-nav-menu>
  <div class="container">
    <router-outlet></router-outlet>
    <app-myAppForGettingTheURL></app-myAppForGettingTheURL>
  </div>

Could someone guide me on how to achieve this correctly?

angulartypescript

Answer №1

To see a complete working demo, click on this link: StackBlitz Demo

In order to track router events in your project's root component, follow the same approach as shown below.

 this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) this.url = this.router.url
 });

Simply update the URL from 'home' to 'about' and observe the routed URL in app.component.

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

Bespoke directive - Angular 2/4/5

Currently, I am using Angular 5 CLI but for some reason my custom directive is not working as expected. There are no errors showing up in the console either. I am trying to apply some styles to make the image fill the full width. Below are two different i ...

angularangular5custom-directive

Chrome Driver Protractor Angular 2 encountering issue with unclickable element

My issue is with clicking the second level menu options to expand to the third level. I have tried using browser.driver.manage().window().setSize(1280, 1024) in the before all section. Here is my code snippet: it('Should trigger the expansion of the ...

javascripthtmlangularprotractor

Expanding a class in Typescript by adding a function with the same name but varying properties and types

class A { play(a: string): string{ return a; } } class B extends A { play(c: string, b: number): string{ return c + ' ' + b.toString(); } } let x = new A(); console.log(x.play('John')); let y = new B(); console.lo ...

typescript

How can you retrieve the preceding sibling using an Angular directive?

Currently, I am utilizing ELEMENTREF to interact with the DOM via Renderer2. Allow me to provide a simple example: import { Directive, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export c ...

javascriptangulartypescriptangularjs-directivefrontend

Tips for positioning a mat-form-field beside an h1 tag

I've been attempting to place an h1 next to a mat-form-field from Angular Material, but I'm encountering some difficulties. Here's what I've attempted so far: <div class="mat-elevation-z8"> <mat-form-field> <mat-l ...

htmlcssangularangular-material

Tips for converting module.exports object structure from JavaScript to TypeScript

I am currently in the process of converting my node.js app to TypeScript, and I have come across a number of index.js files with the following setup: module.exports = { query: require('./query'), mutation: require('./mutation') } T ...

javascripttypescript

Learn how to navigate through the extensive file structure in Eclipse's Project Explorer after compiling the Angular 2 tutorial 'Tour of Heroes'

I am currently in the process of learning AngularJS 2 using the 'Tour of Heroes' tutorial with Typescript. Everything has been going well so far, but I have noticed something peculiar while working on this tutorial. After compiling with NodeJs, a ...

eclipseangular

Enhance user experience in Aurelia with Bootstrap tooltips

I'm working on implementing bootstrap-tooltip in the aurelia framework. To achieve this, I've created a custom attribute class called BootstrapTooltip. import {customAttribute, inject} from "aurelia-framework"; import $ from "bootstrap"; @custo ...

twitter-bootstraptypescriptaureliatwitter-bootstrap-tooltip

Warning: Unhandled promise rejection detected

I'm encountering an issue with Promise.reject A warning message pops up: Unhandled promise rejection warning - version 1.1 is not released How should I go about resolving this warning? Your assistance is greatly appreciated public async retrieveVe ...

javascripttypescriptunhandled

How to send Multipart form data with a string payload

Many suggestions in regards to this issue recommend utilizing some form of FormData within nodejs for building a multipart form. However, I am seeking to achieve the same result without relying on the FormData library. Instead, I aim to use only request h ...

javascriptnode.jstypescripthttp

Is Firestore the best choice for organizing data on a per-user basis with a logical collection schema

Currently working on a structure for an angular application that will give each user their own dataset upon logging in. This means every user should have separate 'Expenses', 'Contacts', and 'Invoices' collections. My underst ...

angularfirebasegoogle-cloud-firestore

What is the best way to utilize Typescript in developing a versatile API SDK that can dynamically determine the return type based on a specified string literal parameter?

Is there a way to use a pre-defined map of string to object types to determine both the return value and ensure type safety in an implemented function? Let's take a look at this example: import Axios from "axios"; export const axios = Axio ...

typescript

Creating a generic that generates an object with a string and type

Is there a way to ensure that MinObj functions correctly in creating objects with the structure { 'name': string }? type MinObj<Key extends string, Type> = { [a: Key]: Type } type x = MinObj<'name', string> Link to Playgr ...

typescriptgenerics

Differences between Angular's form builder and form control and form groupIn the

What are the benefits of using form control and form group instead of form builder? Upon visiting this link, I discovered: The FormBuilder simplifies creating instances of a FormControl, FormGroup, or FormArray by providing shorthand notation. It helps ...

angularangular-reactive-formsformgroupsangular-formbuilder

Angular (15) Encountering difficulties in expanding a typed FormGroup

Currently, I am experimenting with typed FormGroup. This is what I have created so far: export interface CustomFormControls { name: FormControl<string|null> content: FormControl<string|null> } export class CustomForm extends FormGroup< ...

angularforms

Update the name of the table header dynamically based on the checkbox that is selected in Vue

I am working on a project where I have checkboxes that determine the header of my table based on selection. Starting from <th>Default</th>... If checkbox1 is checked, the header will change to "CheckBox1". If checkbox2 is checked, the header ...

typescriptvue.js

Utilizing Angular Material's <mat-selection-list> and <mat-list-option> components seamlessly between different sections of a template

How can a <mat-list-option> declared in component sub subscribe to a <mat-selection-list> outside of component sub (for example, in component app)? (Unfortunately, I couldn't get Stackblitz to work due to my corporate's proxy restric ...

angularangular-material2

Encountering a CORS problem following a successful API request within an ABP application

Access to XMLHttpRequest at 'serversiteurl//api/services/app/QklyProcessEngine/CallProcess' from origin 'clientsiteurl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resou ...

angularentity-framework.net-coreazure-signalr

Adapt button functionality according to selected dropdown value in Angular

I have implemented a License Key generation process in my application where user input is used to create a unique key that is then passed to the Java backend. The code snippet for generating the key is as follows: @PostMapping("/generate") public Li ...

javahtmlangulardrop-down-menu

What is the method for transmitting a URL API from an ASP.NET Core server to my Angular 2 single application?

Is there a way to securely share the url of the web api, which is hosted on a different server with a different domain, from my asp net core server to my client angular2? Currently, I am storing my settings in a typescript config file within my angular2 ap ...

urlangularasp.net-web-apitypescriptasp.net-core