CODEWITHSUNDEEP
angulartypescript
Paco Zevallos
Paco Zevallos

Reputation: 2295

ActivatedRoute Params Angular 6

I am trying to obtain the data of each record through ActivatedRouted, I have managed to obtain the ID of each one but I can not get the other data. Any ideas?

My stackblitz: https://stackblitz.com/edit/angular-activatedroute-params

services.ts

getProductos() {

this.productos = [
  {
    id: 'lomoFino',
    titulo: 'Lomo fino',
    descripcion: 'Es la pieza más fina de la res, de textura tierna.',
    recomendaciones: ['Guisos', 'Freir', 'Plancha'],
    ubicacion: 'Lomo',
  },
  {
    id: 'colitaCuadril',
    titulo: 'Colita de cuadril',
    descripcion: 'Es un corte triangular y ligeramente marmoleado.',
    recomendaciones: ['Guisos', 'Freir', 'Horno'],
    ubicacion: 'Trasera',
  },
  {
    id: 'asadoCuadrado',
    titulo: 'Asado cuadrado',
    descripcion: 'Corte fibroso, de sabor agradable.',
    recomendaciones: ['Guisos', 'Freir', 'Plancha'],
    ubicacion: 'Entrepierna',
  }
]

return this.productos
}

productos.component.ts

ngOnInit() {
  this.productos = this.ps.getProductos();
}

productos.component.html

<div *ngFor="let producto of productos">
  <a [routerLink]="['/productos', producto.id]">{{ producto.titulo }}</a>
</div>

producto-detalle.component.ts

constructor( private activatedRoute: ActivatedRoute ) { }

ngOnInit() {
  this.id = this.activatedRoute.snapshot.paramMap.get('id')
  this.titulo = this.activatedRoute.snapshot.paramMap.get('titulo')
  this.descripcion = this.activatedRoute.snapshot.paramMap.get('descripcion')
}

producto-detalle.component.html

ID: {{ id }}<br>
Título: {{ titulo }}<br>
Descripción: {{ descripcion }}<br>

How can I get titulo anddescripcion for example.

Upvotes: 1

Views: 10278

Answers (3)

zahid
zahid

Reputation: 33

You can create a new method in service.ts like 

getproduct(id:int) {
//code to return product based 
on id.
}

which will accept an id and gives you back the product based on the id. How to write code for filtering object? See below link. https://expertcodeblog.wordpress.com/2018/02/26/typescript-filter-object-array-with-multiple-conditions/

Now this is your flow.. 1. From activated route pull out the id. 2. In producto-detalle.component.ts from ngOninit call the getproduct(id) method from service.ts. (Remember to inject the service) 3.Assign id ,titulo,descripcion from the product received from getproduct(id) and display it on the html .

Upvotes: 0

Alexis_Ni
Alexis_Ni

Reputation: 907

You have to add all the data to the params list. First update the app.router.ts with the following code:

{ path: 'productos/:id/:titulo/:description', component: ProductoDetalleComponent }

Update the code at productos.component: 

<a [routerLink]="['/productos', producto.id,producto.titulo,producto.descripcion]">

Here is a working stackblitz

Upvotes: 0

Andriy
Andriy

Reputation: 15472

You can use ActivatedRoute's resolver(see Resolve: pre-fetching component data). This way, your producto data will be pre-fetched to the ActivatedRoute's data object and be available under activatedRoute.snapshot.data. Now you can use it in your component:

ngOnInit() {
  const producto = this.activatedRoute.snapshot.data.producto;

  this.id = producto.id;
  this.titulo = producto.titulo;
  this.descripcion = producto.descripcion;
}

Your router config should be updated with resolver:

const routes: Routes = [
  { path: '', component: ProductosComponent },
  { 
    path: 'productos/:id', 
    component: ProductoDetalleComponent,
    resolve: {
      producto: ProductoResolver
    }
  },
];

STACKBLITZ

Crisis center code

Upvotes: 4

Related Questions