Angular - pass data between components

Question

I am working on a web application and I'm using Angular for frontend and .Net for backend and I am quite new with both technologies. I have a database stored in SQL Server, I am taking the data using C# classes and I am passing it to the frontend using some controllers. I have an api.server.ts file which calls the functions from the controllers and these functions I use for all the components in my app. I have a component in which I am taking an array of products(all the products from the database) and show them in html (using ngfor), along with a button for each product. What I want to do it's when I press the button to redirect me to another component(which is a hole new page) and show me details about that particular product.

This is where I am using the function from the controller in frontend (I don't think it's useful to show the function because it works fine):

  getProducts() {
    return this.http.get(this.baseUrl + '/Product/GetAll', { headers: this.header });
  }

This is the html part where I am displaying the products. The button 'Vezi produs' is redirecting me to the other component where I wanna see the product info for one particular product. I tried to use interpolation to take the product Id and return it in the api.service.ts(to set from the first components the value for product variable from api.service.ts) and from there I wanted to display it in the other component (using this.api.product), but it seems like I can't use interpolation.

  <div *ngFor="let product of products;">
        <div class="card" style="width: 15rem; height: 25rem; position:relative; margin-left:40px;">
          <img src={{product.picture}} class="card-img-top" alt={{product.name}} style="width:15rem; height:13rem;">
          <div class="card-body">
            <h5 class="card-title"><b>{{product.name}}</b></h5>
            <p class="card-text">{{product.description}}.</p>
            <table>
              <tr>
                <td>
                  <a href="#" class="btn btn-primary" id="veziprodus" (onclick)="getProduct({{product.Id}});" [routerLinkActive]="['link-active']" [routerLink]='["/view-product"]'>Vezi produs</a>
                </td>
                <td>
                  <p style="position:absolute; bottom:10px; right:10px;">
                    <b> {{product.price}} lei </b>
                  </p>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

Also, I am having trouble with "siblings" components as well. I don't really know if my thinking was good and if I really can set the api.product value from the first component and then use the same variable to show it in the second component.

vira.go · Accepted Answer · 2021-05-26 15:39:01Z

Usual approach provided in Angular documentation is using Route Parameters.

Shortly in the routing module there should be something as follows:

const someRoutes: Routes = [
  { path: 'products-list', component: ProductsListComponent },
  { path: 'product/:id', component: ProductItemComponent }
];

In the ProductItemComponent it is possible to get product id from route parameters:

@Component({
  selector: 'app-product-item',
  templateUrl: './product-item.component.html',
  styleUrls: ['./product-item.component.css']
})
export class ProductItemComponent implements OnInit {
  product$!: Observable<Hero>;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: ProductsService
  ) {}


  ngOnInit() {
    this.product$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) =>
        this.service.getProduct(params.get('id')!))
    );
  }
}

I've took the Angular's example and made a short-part of it at StackBlitz here. (Hero detail is Product, Hero list is Products)

usalin · Accepted Answer · 2021-05-25 22:11:30Z

0

One way you can do is by creating a route for this and navigate to related view on click.

 <a [routerLink]="['/product', product.Id">

on routing module you can create a path like

{ path: 'product/:id', component:ProductDetailComponent }

And receive the passed id afterwards in view component with

 constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.params.subscribe(params => {
     console.log(params) //log the entire params object
     console.log(params['id']) //log the value of id
   });
 }

afterwards you can make a request with id and use it as you like.

answered May 25, 2021 at 22:11

usalin

1311 silver badge9 bronze badges

Comments

Jonas Andreasson · Accepted Answer · 2021-05-25 22:07:01Z

0

One approach would be us the router support in Angular. You could set up the app in such a way that you have your product list component on one page (let's say the root / ) and then you have a product detail component on another route (i.e. /product). When the user clicks the button in you list u use the router service to navigate to the /product page passing a product identifier as a query parameter. The product detail would the make another backend call and render the product detail.

This and related concepts are described quite well in the angular "Tour of Heros" tutorial: https://angular.io/tutorial

answered May 25, 2021 at 22:07

Jonas Andreasson

1652 silver badges9 bronze badges

Comments

David B. · Accepted Answer · 2021-05-26 00:12:14Z

0

Just change this (onclick)="getProduct({{product.Id}}) to (onclick)="getProduct(product.Id); there is no need for {{}} in js code

answered May 26, 2021 at 0:12

David B.

7395 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular - pass data between components

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related