Tips for sharing data between two components

Question

Tips for sharing data between two components

In my project, I have a customized Shared Component which consists of an input search bar with a "continue" button. This Shared Component is being utilized within two other components - the buy component and sell component. The challenge I am encountering is how to hide the "continue" button specifically in the buy component while displaying it in the sell component. To address this issue, I implemented an @Input property known as continueButtonCheck within the buy component. Although this successfully conceals the button within the buy module's component, it also unintentionally hides it in the sell component. My goal is to apply the same continueButtonCheck functionality to the sell component as well.

The structure of the shared component is as follows:

(shared) search-bar-component.html file:

<input />
<button *ngIf="continueButtonCheck">continue</button>

This particular setup is used across both the buy and sell components.

For reference, you can view a demonstration here:

https://stackblitz.com/edit/angular-ivy-jaqbnn?file=src%2Fapp%2Fbuy%2Fbuy.component.ts

The main issue I am currently grappling with is figuring out how to access the "continueButtonCheck" property within my sell component.

javascript angular typescript

Answer 1

Answer №1

The reason for this behavior is because the @Input() continueSearchButton is initially undefined. Therefore, in the code snippet

<button *ngIf="continueSearchButton">Continue</button>

, the condition check for continueSearchButton will evaluate to false and hide the button.

To address this issue, you can set

@Input() continueSearchButton = true;

as the default value. This way, if you need to hide the button, you can follow a similar approach as seen in the buy component.

Answer 2

The reason for this behavior is because the @Input() continueSearchButton is initially undefined. Therefore, in the code snippet

<button *ngIf="continueSearchButton">Continue</button>

, the condition check for continueSearchButton will evaluate to false and hide the button.

To address this issue, you can set

@Input() continueSearchButton = true;

as the default value. This way, if you need to hide the button, you can follow a similar approach as seen in the buy component.

Tips for sharing data between two components

Answer №1

Similar questions

Sending files to the server through HTML5

The HttpInterceptor is programmed to identify and capture 401 error responses

Utilizing JavaScript as the front-end client for a web application connected to the backend of

Error: Property 'mytest' is undefined and cannot be read

Hey there! I'm experiencing an issue with the jquery function $(this).childen().val()

What is the best way to retrieve a {collection object} from a JavaScript map?

"Troubleshooting async/await issue with Node.js Sequelize and configuring the connection

The type 'FormikValues' is deficient in the subsequent properties compared to the type 'Exact<{'

How can you utilize a computed property in a Vue component to select all the text within it?

Click on a new tab to enable printing options for the page

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

Validating forms using ajax, php, and mysql for seamless user input processing

Add an input element to a form fieldset by employing vue

Switching sub components based on routing through navigation links after logging in

Encountering an unexpected token error in Vercel during deployment, even though the code runs smoothly in the

Activate the onclick event for HTML select-options when there is only a single option available

My ability to click() a button is working fine, but I am unable to view the innerHTML/length. What could be the issue? (NodeJS

Interact with a React dropdown using SeleniumBase

JavaScript event listener on the "change" event only triggers when changed manually [CodePen]

HTML: Mark the chosen hyperlink or tag