Inter-component communication in Angular

Question

Inter-component communication in Angular

I am working with two components: CategoryComponent and CategoryProductComponent, as well as a service called CartegoryService. The CategoryComponent displays a table of categories fetched from the CategoryService. Each row in the table has a button that redirects to the CategoryProductComponent, which shows the list of products in that category.

When retrieving JSON data from the API, there is a links array containing rel = category-product with the related product link.

The issue arises when I manually input the URL in the browser, as the link is not fetched by the CategoryComponent. I have tried assigning the link to a variable in the CategoryService, assuming it would persist after the initial assignment due to services being singletons. However, this approach did not solve the problem. What is the best way to handle communication between these components?

In addition, passing the link as an extra object in router.navigate seems less than ideal, especially for direct URL entry in the browser.

This is the structure of my code:

// Sample code goes here

Any suggestions or insights are appreciated. Thank you!

angular typescript rxjs

Answer 1

Answer №1

Upon revisiting your question, I noticed something I missed initially.

It appears that manually inputting the URL into the browser does not function as intended.

Utilizing the Angular router ensures that your application maintains its state, as you are not technically navigating anywhere when utilizing it. Conversely, manually typing in the link into your browser results in deep linking into your app - and it is likely that any previous state is lost, essentially causing a restart of the application.

A side note: I find it somewhat surprising that this issue has surfaced for you. Is it possible that this behavior was expected?

If you wish to address this requirement, consider storing the data in CategoryService using localstorage like so:

  setCategoryProductLink(link: string) {
    localStorage.setItem('categoryProductLink', link);
  }

  getCategoryProductLink(): string {
    return localStorage.getItem('categoryProductLink');
  }

By following this approach, the data will persist between sessions.

Answer 2

Upon revisiting your question, I noticed something I missed initially.

It appears that manually inputting the URL into the browser does not function as intended.

Utilizing the Angular router ensures that your application maintains its state, as you are not technically navigating anywhere when utilizing it. Conversely, manually typing in the link into your browser results in deep linking into your app - and it is likely that any previous state is lost, essentially causing a restart of the application.

A side note: I find it somewhat surprising that this issue has surfaced for you. Is it possible that this behavior was expected?

If you wish to address this requirement, consider storing the data in CategoryService using localstorage like so:

  setCategoryProductLink(link: string) {
    localStorage.setItem('categoryProductLink', link);
  }

  getCategoryProductLink(): string {
    return localStorage.getItem('categoryProductLink');
  }

By following this approach, the data will persist between sessions.

Inter-component communication in Angular

Answer №1

Similar questions

Set the styling of a div element in the Angular template when the application is first initialized

Challenges with Displaying Filtered Arrays in Angular

Converting a string to the Date class type in Angular 4: A comprehensive guide

The Angular CLI has encountered an issue - Syntax Error: Unexpected token {

Encountering a Nuxt error where properties of null are being attempted to be read, specifically the 'addEventListener' property. As a result, both the default

The requested 'export '_supportsShadowDom' could not be located within the module '@angular/cdk/platform'

Incorporating traditional Javascript classes for modeling in React development

Properties of a child class are unable to be set from the constructor of the parent class

user interface grid element in Materia

Having trouble with react-responsive-carousel in Next.js version 13?

`Is there a way to effectively test an @Input component in Angular?`

Error encountered during Angular upload using Asp.net core: System.Text.DecoderFallbackException is thrown when bytes [FF] cannot be translated at the specified index

Steps for sorting items from a list within the past 12 hours

Exploring the power of Angular Module Federation in leveraging remote services

Prevent the Vue page from loading until the data has been fetched successfully

Removing data from a table using an identifier in Typescript

Using the async pipe with the ngIf directive

Tips for effectively handling the data received from a webservice when logging into a system

AngularJS: Integrating OAuth2 for RESTful API Development

What is the best way to provide JSON data instead of HTML in Angular?