Unlock the ability to view the specific child route with the identifier :id

Question

Unlock the ability to view the specific child route with the identifier :id

In my application, I have a child component and its parent component. The child component uses the following pipe to subscribe to the activated route:

this.route.paramMap.pipe(
  map(paramMap => +paramMap.get('id')),
  switchMap((id: number) => this.apiService.getTasks(id.toString())),
).subscribe(tasks => this.tasks = tasks);

{ path: '', component: DashboardComponent, children: [
      { path: '', redirectTo: '0', pathMatch: 'full' },
      { path: '0', component: NoListComponent },
      { path: ':id', component: ListComponent }
    ]},

My question is how can I access the route parameter :id within the parent component DashboardComponent?

I need to work with the same id in the parent component as well. I've attempted passing it via @ViewChild, but this does not update upon route changes.

EDIT: Due to using router outlet, event emitting is not possible.

angular typescript

Answer 1

Answer №1

Communication between parent and child components using the router outlet involves adjusting the onActivate function in the Parent component:

onActivate(childComponent) {
    childComponent.eventEmitter.subscribe((data) => {
    // Data received from child component will be handled here 
})

The Child component defines an EventEmitter as usual:

export class ChildComponent {
  @Output() eventEmitter: EventEmitter<any> = new EventEmitter();

  processEventData(data) {
    // Send data to parent component
    this.eventEmitter.emit(data);
  }
}

In the HTML file:

<button type="button" (click)="processEventData()">Perform Action</button>

Answer 2

Communication between parent and child components using the router outlet involves adjusting the onActivate function in the Parent component:

onActivate(childComponent) {
    childComponent.eventEmitter.subscribe((data) => {
    // Data received from child component will be handled here 
})

The Child component defines an EventEmitter as usual:

export class ChildComponent {
  @Output() eventEmitter: EventEmitter<any> = new EventEmitter();

  processEventData(data) {
    // Send data to parent component
    this.eventEmitter.emit(data);
  }
}

In the HTML file:

<button type="button" (click)="processEventData()">Perform Action</button>

Unlock the ability to view the specific child route with the identifier :id

Answer №1

Similar questions

Typescript errors in console not being displayed by swc-loader

Using TypeScript to wrap a class with a Proxy object

"Time" for creating a date with just the year or the month and year

Retrieving an array of objects from an API and attempting to store it using useState, but only receiving an empty

Tips for importing a module such as 'MyPersonalLibrary/data'

Using a dropdown list to filter values in a table with Angular ngBootstrap

Learn how to utilize React lazy effectively in components that utilize Redux compose without any similarities to type 'IntrinsicAttributes'

Angular Notification not visible

Retrieve: Type 'string | undefined' does not match the parameter type 'RequestInfo'

There was an error reported by TypeScript stating that Nest.js is not considered a module

Margin is being overlapped by the DropDown

What is the result of using `X ? A : B` in typescript?

Making an HTTP request from Angular 6 to a Node.js server

Set the class function to be uninitialized

Execute Angular's custom builders one after the other

Resetting all services and components in Angular 2 navigation

Guidelines for converting an array into checkboxes using React Native with TypeScript

Guide on linking an Angular2+ app with an external API

Having trouble building the React Native app after adding react-native-vector icons?

Error with Array type encountered in Typescript's find method