Management of routerlink parameters through the use of controlling directives

Here is the code snippet that I am working with:

<a *ngIf="!menuItem.children" (mouseenter)="onHoverItem($event, item)" [routerLink]="[menuItem.url, menuItem.code]" [target]="menuItem.target" class="al-sidebar-list-link">
    <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
</a>

However, some of the links are showing this URL: 

http://localhost:3000/URL/undefined

This happens because not all menuItems have a value for the code property.

To address this issue in Angular, I want to implement the following logic:

If the menuItem.code is defined:

<a *ngIf="!menuItem.children" (mouseenter)="onHoverItem($event, item)" [routerLink]="[menuItem.url, menuItem.code]" [target]="menuItem.target" class="al-sidebar-list-link">
    <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
</a>

Otherwise:

<a *ngIf="!menuItem.children" (mouseenter)="onHoverItem($event, item)" [routerLink]="[menuItem.url]" [target]="menuItem.target" class="al-sidebar-list-link">
    <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
</a>
angulartypescriptangular2-routing

Answer №1

<a *ngIf="!menuItem.children" 
   (mouseenter)="onHoverItem($event, item)" 

   [routerLink]="[menuItem.url, menuItem.code!=undefined?menuItem.code:'']" // an important line to note is here

   [target]="menuItem.target" class="al-sidebar-list-link">
   <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
</a>

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

Sign out of Google and Facebook accounts using Angular framework

Upon logging in to both Facebook and Google using this package, I am facing an issue with signing out. Even after using the code provided below, I cannot seem to sign out of Google and Facebook: this.authService.signOut(); sessionStorage.clear(); Any as ...

angularfacebook-graph-apinpmgoogle-signinlogout

Component imported from Ionic/Angular is taking over the webpage

In my IONIC-Angular App, I am facing an issue with using the same Header (a div with an image, which is a custom element) in two Tabs - Tab1 and Tab3. The problem arises when the content gets overwritten, as only the header HTML code is visible without any ...

angularionic-frameworkangular-components

Adding additional functionalities to ng-blur within the controller: A step-by-step guide

I am seeking to enhance the functionality of ng-blur for all input and textarea fields by adding a new function. These elements already have an existing ng-blur defined in the HTML, and my goal is to incorporate a new function into this existing setup from ...

javascriptangularjsangular

I am restricted from using history with BrowserRouter in Typescript

Trying out React and decided to experiment with TypeScript. Code: import { BrowserRouter } from 'react-router-dom' import history from './utilities/history' ReactDOM.render( <BrowserRouter history={history}> <App /> ...

javascriptreactjstypescriptreact-router

Updates made in package.json are being disregarded

My package.json file used to contain the following: "angularfire2": "^5.0.0-rc.0-next" Due to compatibility issues, I had to change it to: "angularfire2": "^5.0.0-rc.4", 1- I attempted to update using 'npm update' but it did not work 2- I de ...

angularnpmionic2

There seems to be a console error in Angular 5 when using IE 11

I've developed an Angular 4 application using MVC and Visual Studio 2015. Everything runs smoothly when I access the application on Chrome, but I encounter the following exception on IE 11: XHR error: (404 Not Found) loading http://localhost/src/ma ...

angulartypescriptinternet-explorer-11

Customize TypeScript Generic Types in Method<T> Extending from a Base Class<T> as a Backup Plan

In my example, I have created an Angular Service with multiple Generic Types that can be overridden through the methods. The issue I am encountering revolves around = versus extends and how it affects typing in the arguments. Strangely, using = works perfe ...

typescriptgenericstypes

Obtaining radio button values from user input forms in Angular

I need help with retrieving values from a user input form. The first option is a select dropdown, the third one is a time picker which are both working fine. However, I'm struggling with the second option, which is a radio button group with two button ...

angularformsangular-formbuilder

Error message: The specified type is incomplete and lacks certain properties, according to Typescript

I'm encountering an error that's hindering the deployment of my website on Vercel. Any assistance would be greatly appreciated. Usually, I retrieve the pageInfo data from Sanity and use it on my website. The issue lies in this peculiar TS error t ...

reactjstypescriptnext.js

Is there a way to retrieve the requested data in useEffect when using next.js?

As a newcomer to next.js and TypeScript, I am facing an issue with passing props from data retrieved in useEffect. Despite my attempts, including adding 'return scheduleList' in the function, nothing seems to work. useEffect((): (() => void) = ...

reactjstypescriptnext.js

What is the proper way to utilize the ES6 import feature when using a symbolic path to reference the source file?

I am seeking a deeper understanding of the ES6 import function and could use some assistance. The Situation Imagine that I have a portion of code in my application that is frequently used, so I organize all of it into a folder for convenience. Now, in t ...

javascripttypescriptimportecmascript-6ecma

Tips for modifying the width of the mat-header-cell in Angular

Is there a way to customize the mat-header-cell in Angular? I've been trying to change its width without success. Any suggestions would be greatly appreciated. <ng-container cdkColumnDef="name"> <mat-header-cell *cdkHeaderCellDe ...

javascriptangulartypescript

Looking to build a library with Angular 5?

Is it possible to develop a library in Angular 5? Will this library be guaranteed to maintain compatibility with upcoming versions of Angular? ...

angular

Seeking a solitary undeniably corroborated statement from witnesses

I have implemented a messageBox functionality using p-toast. When a user clicks on delete, they are prompted with a yes or no option before hitting the API to delete the item. The issue I am facing is that if I click on the delete button for one item, sele ...

angulartypescriptobservable

Angular 9: Trouble encountered with utilizing custom error handler for error instances

I'm currently working on implementing a custom error handling system in Angular using the ErrorHandler class. This is what my Globalerror service looks like: export class CustomErrors extends Error { button?: any; errObject: any; constructor() ...

javascriptangulartypescripterror-handling

Passing a FormGroup from an Angular 2 component as a parameter

I have a FormGroup that contains a SubFormGroup: sub formGroup initialize: this.fg=new FormGroup({ name: new FormControl(), abcFg: new FormGroup({ aaa: new FormControl(), bbb: new FormControl() }) }) ...

angulartypescriptangular2-templateangular2-forms

What is the process for passing input values to a dynamic Angular component?

https://i.sstatic.net/hghse.png My goal is to develop a dynamic filtering system where users can specify multiple attributes and their corresponding values to filter a list of components. The dynamically added component includes two dropdown menus: one fo ...

angulartypescript

What is the process for defining an opaque type in programming?

[ This is not this ] Take a look at this snippet of code: interface Machine<OpaqueType> { get(): OpaqueType, update(t: OpaqueType); } const f = <U, V>(uMachine: Machine<U>, vMachine: Machine<V>) => { const u = uMach ...

typescript

Displaying values from TypeScript to the view in Angular 5

When using basic HTML and JS, the following code functions correctly: // main.js function videoHTML(videoNumber, trackName, trackType = 'srt') { return '<video id="video-js" class="video-js vjs-default-skin" ' +'controls p ...

angular

Undefined values do not function properly with discriminated unions

In my React component, there are two props named required and fallback. The type definition for these props is as follows: type Props = | { required? : true | undefined, fallback : React.ReactNode } | { required? : false, fallback? : React.Rea ...

reactjstypescript