Having trouble with routerLink in your custom library while using Angular 4?

In my Angular 4 project, I have developed a custom sidebar library and integrated it into the main project. My current issue is that I want to provide the option for users to "open in new tab/window" from the browser's context menu without having the full page reload when a user clicks on a link within the same page.

<a routerLink="['/{menu.href}']" routerLinkActive="active" [ngClass]="{'router-link-active text-primary' : chileMenuId === cmenu.id }" (click)="onMenuClick(cmenu)">{{cmenu.labelKey}}</a>

Unfortunately, this functionality is not working in the sidebar project because it is part of a third-party library. Is there a way to achieve this? Thanks

angulartypescriptrouterlink

Answer №1

Experiment with target="_blank" to open in a new tab [routerLink]="['/payment']" target="_blank"

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

NodeJS executor fails to recognize Typescript's CommonJS Internal Modules

In the process of developing my NodeJS application, I am structuring it by creating internal modules to effectively manage my code logic. This allows me to reference these modules without specifying the full path every time. internal-module.ts export cla ...

javascriptnode.jstypescriptcommonjs

Troubleshooting Angular: Issues with Table Data Display and Source Map Error

I'm currently tackling a challenge in my Angular application where I am unable to display data in a table. When I fetch data from a service and assign it to a "rows" variable within the ngOnInit of my component, everything seems to be working fine bas ...

htmlangulartypescriptdebugginghtml-table

Angular service encounters NotYetImplemented error due to DOCUMENT injection token in SSR

I have a unique Angular SSR app with a special service that utilizes the document. I cleverly utilize the DOCUMENT injection token to provide this essential document for dependency injection. To take a peek at my innovative approach, check out my repo here ...

angularangular-servicesangular-dependency-injectionangular-ssr

The absence of the google-services.json file has rendered the Google Services Plugin inoperable. Attempted search location:

Having an issue while trying to integrate my app with Firebase. The error message keeps indicating: > File google-services.json is missing. For a more detailed view of the error, please refer to the image below: https://i.stack.imgur.com/sgNYu.jpg D ...

angularfirebaseionic-frameworkgoogle-play-services

Dynamically incorporate new methods into a class

Currently, I am in the process of implementing setters and getters for items that will be stored in session storage. These methods are being written within a service. However, upon attempting to call these functions in my component, I am encountering a tra ...

angulartypescriptangular5

How can I show the initial three digits and last three digits when using ngFor loop in Angular?

Greetings! I have a list of numbers as shown below: array = [1,2,3,4,5,6,7,8,9,10] By using *ngFor, I am displaying the numbers like this: <div *ngFor =" let data of array"> <p>{{data}}</p> </div> Now, instead of d ...

javascriptangular

The incorrect sequence of Angular/Protractor functions is causing issues within the tests

Trying to extract the values from a column in a grid and compare them before and after sorting can be tricky. I have two functions set up for this task - one to retrieve the initial column values, and another to check the order post-sorting. However, there ...

javascriptjqueryangularjsangularprotractor

The alertController will only appear on the original page where it was first activated

I am facing a peculiar issue with the alertController in my Ionic application. Let me explain the problem and then provide the relevant code snippets. In my Ionic app with tabs, I encounter an issue where alerts are not showing up correctly. For example, ...

angularionic-framework

"Optimize Your Data with PrimeNG's Table Filtering Feature

I'm currently working on implementing a filter table using PrimeNG, but I'm facing an issue with the JSON structure I receive, which has multiple nested levels. Here's an example: { "id": "123", "category": "nice", "place": { "ran ...

javascriptnode.jsangulartypescriptprimeng

When integrating external HTML into an Angular 2 component, relative references may become invalid and fail to

My server hosts basic HTML content that includes an image with a relative file location. While this displays correctly in a browser, loading the content using Angular causes issues with resolving the relative path locally. I have tried following suggestio ...

htmlangulartypescript

Which programming language or technology utilizes the syntax <%VARIABLE%> and in what context is it employed?

First things first, I want to clarify that I'm not a developer, so this might be a simple question. Despite my research indicating that ASP typically uses this syntax, it's important to note that it is not the case here. I am currently delving i ...

javascriptjavajsonnode.jsangular

After the rendering process, the React Component member goes back to a state of

One issue I encountered is related to a component that utilizes a separate client for making HTTP requests. Specifically, when trying to use the client within a click event handler, the call to this.client.getChannel() fails due to this.client being undefi ...

javascriptreactjstypescript

How come TypeScript does not detect when a constant is used prior to being assigned?

There's an interesting scenario I came across where TypeScript (3.5.1) seems to approve of the code, but it throws an error as soon as it is executed. It appears that the root cause lies in the fact that value is being declared without being initiali ...

typescript

Ionic is encountering a problem with module build, specifically an error related to the absence of a file or directory

Using Ionic has led to encountering the following error message: Runtime Error Uncaught (in promise): Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/r ...

visual-studioangularionic-frameworkionic2

Struggling with the TypeScript generic syntax for the GroupBy function

Struggling to figure out where I'm going wrong with this TypeScript signature after spending some time on it. I've been working on a group by function: const group = <T>(items: T[], fn: (item: T) => T[keyof T]) => { return items.re ...

typescript

A guide to customizing the page theme color in Angular 11

I recently encountered a scenario in my Angular 11 application where I needed to retrieve the brand color from an API upon page load. This brand color needs to be applied to various components such as headers, footers, and button styles throughout the app. ...

angularsassangular10scss-mixinsangular11

Tips for generating a hyperlink in a Typescript file using Angular version 16 and above

I am encountering an issue with my consts.ts file in the project. Specifically, I have defined a constant LINK1 as <a href='https://sample.com/'>LINK 1</a>; However, this setup is not working as expected. What I actually want is to d ...

angulartypescripthyperlink

Retrieve and showcase information from Firebase using Angular

I need to showcase some data stored in firebase on my HTML page with a specific database structure. I want to present the years as a clickable array and upon selecting a year, retrieve the corresponding records in my code. Although I managed to display a ...

angulartypescriptfirebasefirebase-realtime-databaseangularfire2

Generating PDF files from HTML using Angular 6

I am trying to export a PDF from an HTML in Angular 6 using the jspdf library. However, I am facing limitations when it comes to styling such as color and background color. Is there any other free library besides jspdf that I can use to achieve this? Feel ...

angulartypescriptangular6jspdf

Steps for Subscribing to a Component Event with a Directive

This is a custom Pagination component I have created. <pagination [boundaryLinks]="true" [(ngModel)]="currentPage" [totalItems]="100" previousText="&lsaquo;" nextText="&rsaquo;" first ...

angularangular-directiveangular12