Sending a string value from an object to a component by clicking a button in Angular

Within the HTML template of my component 'a', there is a button designed to redirect to another component:

<button nbButton status="info" class="left" [routerLink]="['/centers', center.id, 'prices']">PRICES</button>

Upon clicking this button, it triggers navigation to component 'b'.

Inside component 'a', there exists a private object variable holding a string value called currenciesAccepted, specifically: myObject.currenciesAccepted.

In order for component 'b' to access this string value, it must be passed when clicking the button to transition from component 'a' to component 'b'.

angulartypescriptbuttoncomponentsrouterlink

Answer №1

give this a shot

<button nbButton status="info" class="left" 
[routerLink]="['/centers', center.id, 'prices']" 
[queryParams]='{currenciesAccepted: myObject.currenciesAccepted}' >PRICES</button>

this code should be placed in the centers component

import { ActivatedRoute } from '@angular/router';

currenciesAccepted: any = {};
constructor( private route: ActivatedRoute) { }

ngOnInit() {
    this.route.queryParamMap.subscribe( params => {
     this.currenciesAccepted  = params.get('currenciesAccepted') ;
     })

}

Answer №2

For passing the string in query parameters, simply include 

[queryParams]='{"obj":myObject.currenciesAccepted}'
in the button element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The numerical value of zero in React Native TypeScript is being interpreted as NaN

When attempting to map an array in React Native (Android) and use its values or keys as data for return, I encountered an issue where the value 0 is read as NaN. This problem also arose when utilizing a typescript enum. The versions I am using are: typesc ...

reactjstypescriptreact-native

What is the best way to navigate from a button in NextJS to another page that I have built within the same application?

As I work on developing a website for a pet rescue charity using Next.js, I am facing an issue with getting my button or link to function correctly. Every time I try to navigate to another page within my Next.js app, I encounter a 404 error stating "This p ...

javascriptbuttonnext.jsnext.js13

Unable to connect with '*ngFor' because it is not a recognized attribute of 'div'

I attempted to bind a value for filter in *ngFor, but it didn't work correctly. How can I successfully bind data to ngFor? Source code is shown below: In my .ts file, menuIcons:any[]; public pageName:any = "projects"; this.menuIcons=[{ ...

angularfilterdata-bindingpipengfor

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

Just delving into the world of web development and currently tackling a React project. Encountered an issue where I need to make a span element clickable. However, there's a dropdown within that span that doesn't have any onClick event attached t ...

javascripthtmlcssreactjstypescript

When validation fails, all fields are highlighted in the Div containing the FormGroup

In my Angular application, I need to utilize two fields - produced date and expiry date. It is important to note that I must use <div [formGroup]...> since this component will be called within other forms. Using the form tag here is not an option. ...

angulartypescriptvalidationformbuilderformgroups

Unable to integrate the bootstrap Modal within an Angular 2 application

I am working on an Angular 2 app and I am trying to implement Bootstrap Modal windows. I have added the jquery and bootstrap.js files at the end of the body tag. Although the app loads without any errors, when I try to use the modal function in the console ...

jqueryangulartwitter-bootstrap-3bootstrap-modal

Implementing delayed loading of Angular modules without relying on the route prefix

In my application, I am using lazy loading to load a module called lazy. The module is lazily loaded like this: { path:'lazy', loadChildren: './lazy/lazy.module#LazyModule' } Within the lazy module, there are several routes def ...

javascriptangulartypescript

When modifying the state of an array within a component, certain values may be overwritten and lost in the process

Currently, I'm faced with the challenge of ensuring that a component displays a loading screen until all images have completed loading. This is necessary because there are approximately 25 images that must finish loading before the page can be display ...

javascriptreactjstypescriptnext.jsreact-hooks

Issue detected in Angular 2 Heroes Tutorial: The element with the selector "my-app" was not found in the document

Currently, I am in the process of following along with the Heroes tutorial on the official angular website. The project was created using CLI and everything seemed to be working smoothly up until Part 6 on Routing: https://angular.io/tutorial/toh-pt5 In ...

angular

Encountering an error when setting up a React-TypeScript ContextAPI

I am currently attempting to understand and replicate the functionality of a specific package found at: https://github.com/AlexSegen/react-shopping-cart Working within a React-Typescript project, I have encountered challenges when creating the ProductCont ...

javascriptreactjstypescript

Exploring the process for transitioning between pages within Angular

I am working on an Angular project and I am looking to navigate to the registration page when the registration button is clicked. As a beginner, I attempted to link the registration page but encountered some issues. My goal is for the main page to disappea ...

angulartypescriptroutesnavigationregistration

having difficulty applying a border to the popup modal

Currently, I am utilizing a Popup modal component provided by the reactjs-popup library. export default () => ( <Popup trigger={<button className="button"> Guide </button>} modal nested > {(close: any) =&g ...

javascripthtmlcssreactjstypescript

I am experiencing issues with my Jest unit test case for Material UI's multi select component failing

I've been working on writing a unit test case for the material UI multi select component. The code for the parent component is as follows: import {myData} from '../constant'; export const Parent = () => { const onChangeStatus= (sel ...

reactjstypescriptjestjsmaterial-uienzyme

The HTML component fails to acknowledge width settings

I seem to be having trouble identifying an issue or perhaps I am misunderstanding something (I am using daisyui + nx + tailwind css + angular). To simplify my problem, let's consider the following scenarios: In the first scenario, I have: <div cl ...

htmlcssangulartailwind-cssdaisyui

Controlling Ionic 3 slides on a separate page

I have a collection of slides on one page, each slide representing a different page. I am looking to create a functionality where clicking a button on one of the pages will advance the slide to the next one: slides-page.ts @ViewChild(Slides) slides: Slid ...

angulartypescriptionic3

Looking to establish combinations in typescript? The answer lies in utilizing a discriminated union

I've been working with Typescript and I'm curious if it's possible to specify the valid combinations of input for a function. Below is a simplified version of the code: interface ActionType { type: string, payload: { count?: ...

typescripttypescript-typingsdiscriminated-unionuse-reducer

Trouble arises when trying to use add event listener on dynamically generated elements through (*ngFor)

Expanding the Accordion View Issue Whenever the section button is clicked, the event listener userSelection[i].addEventListener changes the id to 'open', thus expanding the accordion. This functionality works without any issues when not using t ...

htmlangulartypescript

Tips for Retrieving Information from Firebase in an Angular Application

I am facing an issue with my code where the ngFor directive is not working as expected when I use read_CheckOuts to return data from the database. Below are snippets of my code: crud.service.ts import { AngularFireDatabase} from '@angular/fire/datab ...

javascriptangularfirebase-realtime-databaseangularfire

In Typescript, try/catch blocks do not capture return values

I am currently working on a function that performs database operations, with the implementation contained within a try/catch block. Here is an example: async function update({id, ...changes}): Promise<IUserResult> { try { //insert code here retu ...

javascriptnode.jstypescript

In Vue, you can dynamically load a JavaScript file containing a JavaScript object during runtime

I'm in the process of developing a no-code application with Vue. I have come across an issue where I cannot add functions to a JSON file that I want to import at runtime. As a workaround, I decided to use a JavaScript or TypeScript file to store the J ...

javascripttypescriptvue.js