Pass the object in route link Angular

Question

hi guys i wondering how to pass a object in a route when i click on link, for example , in my case, i have a page with products and if i click in "purchase", then will be redirect to my component purchase, passing the full product object

HomeComponent

<div class="container main-container
    <ul  class="nav product-list">
        <li *ngFor="let products of product" >
            <div class="card">
                <img src="{{products.Image}}" alt="Denim Jeans" style="width:100%;height:250px;">
                <h1>{{products.name}}</h1>
                <p class="price">€ {{products.price}} </p>
                <p><a type="button" class="btn btn-info botaoProduto" [routerLink]="['/shop/purchase',objecProducttHere]">Purchase</a></p>
            </div>
        </li>
    </ul> 
</div>

<script>
</script>

In my ShopRoute.ts

const shopRoutingConfig:Routes = [
    {
        path:'',component:ShopAppComponent,
        children:[
            {path:'purchase/objectproduct',component:PurchaseCompoet}
        ]
    }
]
    
@NgModule({
    imports:[
        RouterModule.forChild(shopRoutingConfig)
    ],
    exports:[RouterModule],
})
export class ShopRoutingModule{}

Update

product:Product;
tempData:BasicproductData;

ngOnInit() {

   if(this.obterUsuarioLogado())
    {
        this.router.events.pipe(
            filter(e => e instanceof NavigationStart),
            map(() => this.router.getCurrentNavigation().extras.state)
          ).subscribe(result=>{ 

              this.product = result as Product //here product object its fine

              this.tempData.id = this.product.id; // here, even product object filled, tempData receive undefinned
              this.tempData.name = this.product.name;//same here problem here
              console.log(this.tempData);

              console.log( this.product);
             
          },
          error=> this.errorMessage);

          //this.sendOrder(this.tempData);
    };
}

my model BasicProductData in basicproductdata.ts

export class BasicProductData
{
    id:strring;
    name:string;
}

Answer 1

you can put object in extras in route

<p>
     <a type="button" class="btn btn-info botaoProduto" 
     [routerLink]="['/shop/purchase']" [state]="products">Purchase</a>
</p>

in purchase component

product:Product;
tempData:BasicproductData;

ngOnInit() {

   if(this.obterUsuarioLogado())
    {
        this.router.events.pipe(
            filter(e => e instanceof NavigationStart),
            map(() => this.router.getCurrentNavigation().extras.state)
          ).subscribe(result=>{ 

              this.product = result as Product //here product object its fine
              this.tempData=new BasicproductData();
              this.tempData.id = this.product.id; // here, even product object filled, tempData receive undefinned
              this.tempData.name = this.product.name;//same here problem here
              console.log(this.tempData);

              console.log( this.product);
              this.sendOrder(this.tempData);
          },
          error=> this.errorMessage);

          // you cant reach outside of subscribe this is async
    };
}