Is it possible to retrieve the hero id parameter from the ApplicationComponent?
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
Trying to access the route params from your root component is not feasible since it lacks a defined route.
I can propose two solutions to resolve this issue:
ngOnInit() {
this.router.events
.pipe(
filter(e => e instanceof NavigationEnd),
map((e: NavigationEnd) => e.urlAfterRedirects),
// parse the url as required
)
.subscribe();
}
Develop a service (named RouteParamsService in this example) to store the current ids. Then access the id within your AppComponent.
HeroComponent
constructor(private route: ActivatedRoute,
private paramsService: RouteParamsService) {
}
ngOnInit() {
this.route.paramMap.subscribe(params => this.paramsService.set('heroId', params.get('id')));
}
ngOnDestroy() {
this.paramsService.delete('heroId');
}
AppComponent
constructor(private paramsService: RouteParamsService) {
}
ngOnInit() {
this.paramsService.params.subscribe(params => params['heroId']);
}
provides a list of the ID numbers for the URLs
var urlIDs = window.location.pathname.match(/(\d+)/g);
console.log(urlIDs);
console.log('questions/52706460/how-to-obtain-a-url-parameter-in-the-application-component'.match(/(\d+)/g));Currently, I am dealing with two objects: First Object - A { key1 : 'key1', key2 : 'key2' } Second Object - B { key1 : 'override a' } I am looking to combine them to create the following result: The Merged Re ...
In my setup, the parent component is utilizing a FormGroup and I am expecting the child components to notify any changes in value back to the parent. To achieve this, I am trying to implement NG_VALUE_ACCESSOR in the child component so that it can act like ...
Is there a way in javascript (or typescript) to prevent redundant object rewriting within an if statement condition? For example: if (A != null || A != B) { // do something here } // can it be done like this: if (A != null || != B) { // avoid repeating ...
Trying to handle a http.post() request that results in a 302 redirect, but struggling to extract the redirected URL. Any tips on how to achieve this? Appreciate any help. ...
When the button is clicked, certain specific rows are selected using a preselected grid option in Angular Slickgrid. However, if I do this, the preselected row in the grid options changes but it does not display properly. Please assist me. Typescript File ...
I am currently developing a function that will send notifications to all devices where a user is logged in whenever a new order document is added to their account. Below is the code I have written to execute this function. My main query revolves around ac ...
I've developed a signup feature using React and Redux, and have completed all the necessary actions and reducers. However, I encountered the following error: Expected an assignment or function call and instead saw an expression This particular file s ...
In this example, I am demonstrating TypeScript interfaces in a simple way: interface A: { id: number; email: string; } interface B extends A { login: string; password: string; } My goal is to have certain requirements when creating objects fr ...
After defining the root routing as shown below: const routes: Routes = [{ path: '', component: HomeComponent }, { path: 'module1', loadChildren: './module1/module1.module#Module1Module' }, { path ...
I have been working on a pick list component and have come up with the following layout https://i.stack.imgur.com/TnHAp.gif Whenever I try to move consecutive items, it keeps toggling between those two Here's a snippet of my code: moveDown(){ ...
Encountering a peculiar behavior in one of my Angular applications. In the component.html file, I aim to display "UAT" and style the Angular mat elements with a vibrant orange color when in UAT mode, while displaying them in blue without any mention of UAT ...
Is there a way to change the font in Angular 4 Material material.angular.io using the styles file in .CSS format instead of SASS? While the documentation offers an example for SASS at: https://github.com/angular/material2/blob/master/guides/typography.md ...
Having a function like this: getCategories(): Observable<any> { return this.category.find({where: {clientId: this.userApi.getCurrentId()}}) }; The return type of this.category.find is Observable<T[]>. When I invoke g ...
When utilizing templates with ngx-datatable-column and binding comparator functions, only the final bound comparator is applied to all sortable columns. For instance: <div class="m-333"> <button mat-raised-button color="primary" (click)="openP ...
We've encountered an issue while upgrading our project from typescript2.4 to typescript3.2 specifically with immutable.js. Prior to the update, simply using if(x instanceof Immutable.Iterable) would result in the type of x being Immutable.Iterable< ...
My project is built on angular 4, and I am looking to change the background color of the <body> tag using the component's .ts file when a specific element is clicked. The issue I'm facing is that once the color is changed to blue, it persi ...
I'm diving into Angular and currently working on the @Input phase. Within my main app, there's a child component. Inside app.component.ts, I've declared a test variable that I wish to pass from app.component.ts to child.component.ts. // ap ...
I have created a function that simulates a hostname. This function is defined before the actual test, prior to the describe block. const mockHost = (hostname: string) => { global.window = Object.create(window); Object.defineProperty(window, ' ...
I received a POST request from my payment gateway with the following form data: Upon trying to fetch the data using the code snippet below, I encountered errors and gibberish content: this.http .post<any>('https://xyz.app/test', { ti ...
Hey there! I've been trying to include Angular in my TypeScript script, but unfortunately I keep encountering this error: error TS2307: Cannot find module 'angular'. I have attached my webpack configuration file below: context: __dirname ...