Issue at hand - There are two input controls on the same page, each belonging to separate components. When a value is entered into the first input box, it calculates the square value and updates the second input control accordingly. Conversely, if the value in the second text box is changed, it calculates the square value and updates the first input control. How can I design the component structure in Angular 8 to meet this requirement?
By utilizing ngmodal and performing value calculations in the TS file, you can easily transfer values between HTML and TypeScript. The ngModal feature facilitates the seamless exchange of values from HTML to TypeScript and back again.
Let's begin by addressing the implementation issue before delving into potential solutions.
The Issue at Hand
The problem arises when altering the value in the first textbox triggers the ngOnChange() lifecycle hook, calculates the square value, and updates the second textbox. However, updating the value in the second textbox subsequently triggers ngOnChange() again, prompting further changes and updates in an endless loop.
A Possible Solution
Constructing the Component Design Structure
child.component.html
<input type="text" name="name1" id="txtName2" [(ngModel)]="childText" (change)="valuechange2($event.target.value)" />
child.component.ts
import { Component, Input, OnChanges, SimpleChange, SimpleChanges, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
templateUrl: './child.component.html'
})
export class ChildComponent implements OnChanges {
@Input() childText: number;
@Output() text2Change: EventEmitter<number> = new EventEmitter<number>();
constructor() { }
ngOnChanges(changes: SimpleChanges) {
let currentVal = changes.childText.currentValue;
let previousVal = changes.childText.previousValue;
if (currentVal != previousVal) {
this.childText = currentVal * currentVal;
}
}
valuechange2(val: number) {
this.text2Change.emit(val);
}
}
Child2.component.html
<input type="text" name="name1" id="txtName3" [(ngModel)]="childText" (change)="valuechange2($event.target.value)" />
Child2.component.ts
import { Component, Input, OnChanges, SimpleChange, SimpleChanges, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child1-component',
templateUrl: './child1.component.html'
})
export class Child1Component implements OnChanges {
@Input() childText: number;
@Output() text2Change: EventEmitter<number> = new EventEmitter<number>();
constructor() { }
ngOnChanges(changes: SimpleChanges) {
let currentVal = changes.childText.currentValue;
let previousVal = changes.childText.previousValue;
if (currentVal != previousVal) {
this.childText = currentVal * currentVal;
}
}
valuechange2(val: number) {
this.text2Change.emit(val);
}
}
Parent Component
app.component.html
<child-component [childText]="text1" (text2Change)="childChange($event)"></child-component>
<child1-component [childText]="text2" (text2Change)="child1Change($event)"></child1-component>
app.component.ts
import { Component, OnChanges, SimpleChanges, OnInit } from '@angular/core';
import { of, merge } from 'rxjs';
import { mergeMap, delay } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnChanges, OnInit, OnChanges {
title = 'my-app';
text1: number;
text2: number;
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
childChange(child: number) {
this.text2 = child;
}
child1Change(child: number) {
this.text1 = child;
}
}
Is there a more efficient approach for accomplishing this task? theTitle = responsesToUse[i]["Title"]; if(theTitle == null) theTitle = ""; ...
Working with a dynamically generated checklist in Angular/Nativescript: <StackLayout *ngIf="assessment"> <StackLayout *ngFor="let instance_item of assessment.exam_instance_items; let i= index"> <ns-examitem [attr.id] ...
Currently, I am implementing @ngrx router and facing a scenario where one of the routes includes child routers for passing route parameters. Here is how it looks: { path: '/browse', component: BrowseComponent, children: [ { path: ':ca ...
Within my application, I am able to display data from a JSON array which includes radio buttons for each item. What I am trying to achieve is that when a radio button is clicked, the data of that specific JSON array item will be printed in HTML format in a ...
I'm encountering an issue when trying to connect a Google sheet to an AWS Lambda function. While the code runs smoothly during local testing, upon deployment to the function, I receive an error message indicating that the credentials.json file cannot ...
Currently, I am tackling a TS project that involves testing concurrent code and its interactions with a database, specifically focusing on idepotency. My goal is to ensure that multiple requests modifying the same resource will either apply changes correct ...
In my application, I have implemented a FormControl/service that updates when the user types input into a field. Here's how it works: term = new FormControl(); page = new BehaviorSubject(1); .. .. // Calling the search function search(th ...
Upon running the code snippet below, an error is thrown: Error: (SystemJS) Can't resolve all parameters for $WebSocket: ([object Object], [object Object], ?). app.component.ts import { Component } from '@angular/core'; import {$WebSocket} ...
I'm interested in defining a method within a class that will have its type based on the argument provided in the constructor. For example: class A { private model: any; constructor(model: any) { this.model = model; } getModel( ...
Currently, I am intrigued by the comparison between using the react hook useForm and the react-dom useFormState. The Nextjs documentation suggests utilizing useFormState, but in practice, many developers opt for the react hook useForm. I am grappling with ...
I recently made the switch from Bokeh's convenient inline extension framework to their npm based out of line build system. I'm currently working on getting my extension to build, but I've noticed that Bokeh organizes all TypeScript *.ts.d fi ...
Is there a way to convert an array of objects with the following structure: { id: number, data: Observable<string> } into an array of objects with this structure: Observable<{id: number, data: string}> using only RxJS operators? ...
I am facing an issue in creating an Angular2 service for downloading files from the server. I have a table where each record represents a single file. When clicking on a specific record, the download method is called: download(r: FileObject) { this.re ...
Within my application, there is a Module that consists of two components: ListComponent and DetailsComponent, as well as a service called MyModuleService. Whenever a user visits the ListComponent, I retrieve the list from the server and store it in the Li ...
In my display screen, customer details are shown in a table format. When a row is clicked, a modal should pop up displaying detailed information about the customer. The issue I'm facing is that data is not populated on the first click, but it works fi ...
I have developed an AngularJS App using TypeScript The main app where I initialize the App: module MainApp { export class App { public static Module : ng.IModule = angular.module("mainApp", []) } } And my controller: module MainApp { exp ...
I have implemented the code below to convert a video file into a blob for iOS. Takevideo() { const options: CameraOptions = { sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, destinationType: this.camera ...
I'm encountering an error when running this code Type 'symbol' cannot be used to index type '{ [x: string]: string; }'.: let symbol = Symbol() let obj = { [symbol] : 'value'} let { [symbol]: alias } = obj // ...
I'm currently working on a Spring Boot application that includes the following Rest function: @SecuredMaster @GetMapping(path = "/mitarbeiter") @Operation(security = {@SecurityRequirement(name = "jwt")}) public Page<MitarbeiterListRow> getMitar ...
I have a class defined as shown below: import { Injectable, Inject } from '@angular/core'; @Injectable() export class MovieIndustry { constructor(private music: MusicIndustry) { } producer() { this.music.album(); al ...