I need help with adding a value to an array in the 2nd component when a button in the 1st component is clicked. I am working on Angular 4. How can I achieve this?
@Component({
selector: 'app-sibling',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`,
styleUrls: ['./sibling.component.css']
})
newMessage() {
console.log("button clicked");
}
If your goal is to establish communication between two components,
You have the option of utilizing a service with Array functionality. In Angular, a service operates as a singleton, meaning it exists as a single instance. Consequently, if multiple components access the service, they will be accessing the same shared data.
export class cartService{
prod :any = [];
UpdateArray (newObject: any) {
this.prod.push(newObject);
}
}
Within your component, you can implement the following:
this._cartService.UpdateArray(this.prod);
The 'any' type in the code can be substituted with your specific object type.
My goal is to utilize the ng4-loading-spinner spinner when making HTTP calls to my API. I referred to the examples provided in the following resources: Angular Guide on Intercepting HTTP Requests/Responses Stack Overflow Post on Using HttpClient Interce ...
Currently, I have a functional Angular project that connects to real data using WebAPI2. However, I am now working on an Express.js project for demo purposes which mocks the data, providing random information instead of consuming the actual WebAPI2 data. T ...
I am faced with the task of merging two arrays of objects into a single array based on their timestamps. One array contains exact second timestamps, while the other consists of hourly ranges. My goal is to incorporate the 'humidity' values from t ...
In my quest to create a type called GoodNestedIterableType, I aim to transform something from Iterable<Iterable<A>> to just A. To illustrate, let's consider the following code snippet: const arr = [ [1, 2, 3], [4, 5, 6], ] type GoodN ...
I am currently developing an app that performs static analysis on components from an Angular application and then renders them within another Angular app. This app serves as a comprehensive style guide with detailed information on inputs and other key aspe ...
Dealing with asynchronous calls in Angular can be tricky. One common issue is getting an array as undefined due to the asynchronous nature of the calls. How can this be solved? private fetchData(id){ var array = []; this.httpClient.get('someUrl ...
I have a react/typescript app and prior to updating vite, my code checked whether the environment was development or production with the following logic: function getEnvironment(): "production" | "development" { if (process.env.NODE_E ...
Greetings! I trust everyone is in good spirits. My dilemma lies in the fact that I am hesitant to include email and passwords in version control. I am considering using environment variables in my cypress tests and utilizing secrets for runtime value pro ...
I am having trouble generating an expired JWT token for testing purposes and need some guidance on how to approach it. How do you handle expiration times in unit tests? This is what I have attempted so far : it('should return a new token if expired& ...
Looking to set up a basic WebAPI using Firebase cloud functions with express and TypeScript. Here's the code I have so far: import * as functions from 'firebase-functions'; import * as express from 'express'; const app = express( ...
I've been struggling to describe a route with get parameters in my platform-server/universal application, but haven't had any luck so far. Does anyone have suggestions on how to achieve this? Based on my understanding of express routing, I atte ...
Attempting to hash a password using the .pre() hook: import * as bcrypt from 'bcrypt'; // "bcrypt": "^1.0.2" (<any>mongoose).Promise = require('bluebird'); const user_schema = new Schema({ email: { type: String, required: tru ...
Encountering an issue in the build process on Vercel with product being passed into CartItem.tsx, despite being declared in types.tsx. The error message reads: Type error: Property 'imageUrl' does not exist on type 'Product'. 43 | ...
As someone relatively new to TypeScript and inexperienced in managing deployments in a production setting, I've been working on a project based on this repository: https://github.com/suren-atoyan/react-pwa?ref=reactjsexample.com. Using this repo has a ...
I have encountered an issue with my Ionic 3 Android application where the startup time is longer than desired, around 4-5 seconds. While this may not be excessive, some users have raised concerns about it. I am confident that there are ways to improve the ...
Here's how I'm implementing an inline input edit component: <app-inline-input-edit [label]="'Manufacturer'" [required]="true" [(ngModel)]="ctrlTypes.manufacturer" name="manufacturer" [changed]="onChange"> ...
Check out this link for more information: https://github.com/NativeScript/NativeScript/issues/6607 Software Stack: NativeScript 5 Angular 7 Demo repository: https://github.com/reposooo/ns-out-of-memory This issue is based on a similar problem i ...
During my work on a project involving reactive forms, I encountered an issue with form submission. I had implemented a 'Submit' button that should submit the form upon clicking. Additionally, there was an anchor tag that, when clicked, added new ...
I'm attempting to loop through this object { "2021-11-22": [ { "id": 1, "standard_id": 2, "user_id": 4, "subject_id": 1, "exam_date": "2021-11-22" ...
I am struggling with handling data retrieved from the server. I have a provider that fetches the data through HTTP, and I want to ensure the data is loaded before the page loads. However, there is a delay in reflecting the data on the page. Can someone pro ...