Is it feasible in Angular 10 to have varying data for dynamic routes?

Take a look at the following dynamic route:

export const routes: Routes = [ 
{  
    path: 'template/:templateId',
    component: TemplateComponent,
    data: { pageTitle: 'TEMPLATES'}
}]

Can we dynamically change the pageTitle for the same route and component?

  • For instance:
  • If the URL is 'template/01', I want to set the pageTitle in data as 'TEMPLATES-01'.
  • If the URL is 'template/02', I want to set the pageTitle in data as 'TEMPLATES-02'.

In this case, the path remains constant as 'template/:templateId', and the component also stays as 'TemplateComponent', but the URLs vary between 'template/01' and 'template/02'.

javascriptangulartypescriptroutes

Answer №1

One way to achieve this (as hinted by R. Richards) is by utilizing the Title feature in @angular/platform-browser

You have the option to make these modifications locally (in each component during initialization - ngOnInit), but that could lead to repetitive code and making title changes across multiple pages would be time-consuming. Alternatively, you can create a service to dynamically change the page title based on the ActiveRoute.

Answer №2

In my opinion, using a Resolver could be a viable option to consider. The Resolver can accept the param of the ActivatedRouteSnapshot and provide a title based on the route in its resolve-function.

An example of how to implement this for a route:

export const routes: Routes = [
{
    path: 'template/:templateId',
    component: TemplateComponent,
    resolve: { pageTitle: TemplateResolveService },
}]

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

Whenever an Ajax request is made to a PHP file, it consistently fails to retrieve any data despite the fact that the

Whenever I try to call a basic PHP page using AJAX, the response is always empty, even though the PHP code itself is functioning correctly. If you visit the URL of the PHP file directly, it echoes "Hello World" as expected. But when accessed from JavaScrip ...

phpjavascriptajax

The axios requests are sent to the backend API, but the webpage remains empty without

I am trying to retrieve a base64 encoded image from my local backend by making a local API call. The logging on the backend confirms that axios is successfully calling the API, however, the frontend displays an empty page with no data. What could be caus ...

javascriptvue.jsaxios

Steps for converting a JSON-encoded object into a JavaScript variable

Is there a better way to return a JSON object to an Ajax call without using `json_encode`? My question is related to making the key a variable in JavaScript, which throws a "not defined error". Specifically, this line of code causes the issue: var display ...

javascriptphpjqueryjson

Scroll up event and sticky header using jQuery

I'm working on a function $(document).ready(function () { var lastScroll = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if ((lastScroll - st) == 5) { $("header").css("position", "fixed"); ...

javascriptjquery

Embedding links in v-bind:href

I inserted a dynamic link inside the <header></header> section using the method mentioned here: Vue JS and appending a variable to end of a URL Below are the relevant codes: <tr class="notice-row" v-for="(myCase, id) in case ...

javascripthtmlvue.js

Issue with refreshing a material

When updating a transaction, I am encountering the issue of inadvertently deleting other transactions. My goal is to update only one transaction. Can someone review my backend logic to identify the root cause? Schema Details: const mongoose = require(&apo ...

javascriptnode.jsreactjsmongoose

Angular 7: module not found error - unable to locate 'underscore' package

Currently tackling a project using Angular 7. Attempted to add npm install --save @types/underscore but encountered the following errors: npm WARN @agm/[email protected] requires a peer of @angular/common@^5.0.0 || ^6.0.0 but none is installe ...

node.jsangularnpm

Being able to automatically update my JSON file without needing to manually refresh the webpage is a feature I am interested in exploring

I have a server that automatically updates a JSON file. However, the JavaScript code I have implemented below reads the JSON file and displays it to the client, but it always refreshes the page. I am looking for a solution on how to read my JSON file ever ...

javascriptjsonajaxrefresh

Utilize jQuery to show a specific section of the page based on the hash in the URL

So, the inspiration for this project stemmed from a common issue I encountered: After hitting the register button, the PHP script processes it and displays an error, but the page remains on the login form. Here's the visual representation of the i ...

javascriptjqueryhtml

Tips for triggering a click event automatically after a 2-minute delay in ReactJS using TypeScript

I need assistance automating a button's onClick function to execute after a 2-minute delay. The current button invokes the handleEventVideos() function. What is the best way to automatically trigger the button click after 2 minutes? I had tried creat ...

reactjstypescriptonclick

Locate an object for editing or adding changes

My scenario involves the existence of an object named productCounts [{provisioned=2.0, product=str1, totalID=1.0}, {product=str2, provisioned=4.0, totalID=3.0}, {provisioned=6.0, product=str3, totalID=5.0}] In addition, there is an array labeled uniqu ...

javascriptjsonforeach

Retrieve information from subcategories in the Realtime Database using Firebase

Trying to access message inputs from ALL users has been a challenge. While it can be done for a specific user, the goal is to do so for all users by specifying in the code. Each UID is unique, adding complexity to the process. The Realtime Database struct ...

javascriptfirebasefirebase-realtime-database

Having trouble with Next.js and Next-auth? When I make an HTTP request in getServerSideProps, getSession is returning null in my secured API Route

I am currently working on securing an API Route that is being called from both the Client and Server-side on different pages. When accessing the test page, it returns a 401 error. However, when accessing the test2 page, the content is retrieved successfu ...

javascriptnext.jsnext-auth

Perform validation on input by monitoring checkbox changes in Angular 4

I am currently working on a project where I need to loop through an array of key values in order to create a list of checkboxes, each accompanied by a disabled input field as a sibling. The requirement is that upon checking a checkbox, the corresponding in ...

javascripthtmlangularangular-formsangular-validation

Routing URLs for asynchronous requests using AJAX

It appears that this situation is reminiscent of this particular question My webpage includes an AJAX request, and the current location of the page is /a/b/c. I am looking to direct the request to d. I am able to send it to /d or a/b/d, but I specifically ...

ajaxasp.net-mvc-2routes

Capture all form inputs in a JavaScript array

I am struggling to collect all the form values into a regular array[]. Initially, I was able to achieve this for input tags but after adding some select tags, I am facing difficulties. Previously, for only input tags, this code worked: var content = docu ...

javascriptjqueryhtmlarrays

Create a recursive CSS style for an angular template and its container

I am struggling with styling CSS inside an ng-container that is used in a tree recursive call to display a tree hierarchy. <ul> <ng-template #recursiveList let-list> <li *ngFor="let item of list" [selected]="isSelected"> <sp ...

cssangularrecursiontree

Error: PDFJS is not recognized in an Asp.net environment

Trying to showcase a PDF using the canvas and PDF.JS Stable v.2.2.228, but encountering an error in the console that says: ReferenceError: PDFJS is not defined. Information points towards the removal of the global PDFJS object; however, struggling to find ...

javascripthtmlasp.netpdf.js

Error: The dynamic selection function is experiencing an issue where it is unable to read the "map" property of an undefined

Currently, I am in the process of creating a React component that includes the usage of a select HTML input. The implementation is defined as shown below: <select className="form-control-mt-3" id="clientList" name="clientList" onChange={this.handleC ...

javascriptreactjs

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

javascripthtmljquerycss