CODEWITHSUNDEEP
angularangular-ui-router
lmngn23
lmngn23

Reputation: 521

Passing an object to another component in router

I have a todoDetail component like this: 

<mat-card class="todos" [class.done]="todo.done === true">

  <h3>
    <input (change) = "done(todo.id)" [checked]="todo.done" type="checkbox"/>
    <a [title]="todo.name + ' details'" >
      {{ todo.name }}
    </a>
    <button (click)="delete(todo.id)" class="del" mat-mini-fab color="warn" aria-label="Delete todo">
      x
    </button>
    <button routerLink="/editTodo" class="edit" mat-mini-fab color="accent" aria-label="Edit todo">
      Edit
    </button>
  </h3>
  <p>{{todo.urgency}}</p>
  <p *ngIf="todo.description">
    Description: {{ todo.description }}
  </p>
</mat-card>
<br>

What I want is when I click on the edit button, it will take me to the edit todo screen, which is the add todo screen but with the values of the todos filled. I specified the routes below: 

{ path: 'addTodo', component: AddTodoComponent },
{ path: 'editTodo', component: AddTodoComponent },

How would I pass the todo data to that component when I click on edit? I'm new to Angular so I hope that makes sense. Thank you!

Upvotes: 0

Views: 333

Answers (1)

Barremian
Barremian

Reputation: 31145

You could bind the routing to a function in the controller and send additional optional parameters to the recipient. Try the following

app.component.html

<h3>
  <input [(ngModel)]="todo.done" type="checkbox"/>
  <a [title]="todo.name + ' details'" >
    {{ todo.name }}
  </a>
  <button routerLink="/dashboard">
    Cancel edit
  </button>
  <button (mouseup)="gotoEdit()">        <!-- binding to a function instead of directly routing here -->
    Edit todo
  </button>
</h3>
<p>Urgency: {{todo.urgency}}</p>
<p *ngIf="todo.description">
  Description: {{ todo.description }}
</p>

<router-outlet></router-outlet>

app.component.ts

import { Router } from '@angular/router';

export class AppComponent  {
  todo = {
    done: true,
    id: '2',
    name: 'Groceries',
    urgency: 'high',
    description: 'Get groceries immediately'
  }

  constructor(private _router: Router) { }

  gotoEdit() {
    this._router.navigate(['/editTodo', {todo: JSON.stringify(this.todo)}]);
  }
}

And retrieve it in the recipient using Angular ActivatedRoute.

edit-todo.component.ts

import { ActivatedRoute } from '@angular/router';

export class EditTodoComponent implements OnInit {
  todo: any;
  constructor(private _actRoute: ActivatedRoute) { }

  ngOnInit() {
    this.todo = JSON.parse(this._actRoute.snapshot.paramMap.get('todo'));
  }
}

edit-todo.component.html

<ng-container *ngIf="todo">
  Got 'todo' object from parent:
  <pre>{{ todo | json }}</pre>
</ng-container>

Here is the routing config I used for reference

app.module.ts

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'editTodo', component: EditTodoComponent }
];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ],
  ...
})

Working example: Stackblitz

Upvotes: 1

Related Questions