Understanding how to link data between sibling elements using typescript

How can I bind a value between two sibling controllers, child1.controller.ts and child2.controller.ts?

/*
file : 
index.html
|_app.ts
|_app.confing.ts (routing with parent.html and invoke parent controller)
  |
  |_parent.controller.ts
    parent.html
    |__ (invoke child1 Directive)
    |  |_child1.contoller.ts
    |  |_child1.html
    |
    |__(invoce child2 Directive)
       |_child2.contoller.ts
       |_child2.html

parent.html
<child1-tab></child1-tab>
<child2-tab></child2-tab>
*/

Code snippet from parent.controller.ts:

module app.parent{
  'use strict';
  class ParentController {
  static $inject = ["$scope"];
    constructor(public $scope)
    {
      scope.status = "Parent Controller";
    }
  }
}

Code snippet from child1.controller.ts:

/*child1-tab-Controller*/
module app.child1{
class child2Controller {
  comingValue :string;
  static $inject = ["$scope"];
    constructor(public $scope){
      this.comingValue = "";  //<= (I want to update it via child2.controller)
    }
  }
angular.module('myApp')
    .controller('child1Controller', child1Controller);
}

Code snippet from child2.controller.ts:

/*child2-tab-Controller*/
module app.child1{
class child2Controller {
  newValue:string;
  static $inject = ["$scope"];
  constructor(public $scope){
    this.newValue = "Send It to Child1"; //(newValue be send to child1Controller and set to the     comingValue field in child1Controller)
    }
  }
 angular.module('myApp')
    .controller('child2Controller', child2Controller);
}

Is there a way to use child2.controller's newValue to set the child1.controller's comingValue?

Answer №1

To achieve communication between directives in Angular, you have two options available:

<child1-tab my-model="vm.model"></child1-tab>
<child2-tab my-model="vm.model"></child2-tab>

You can either use two-way binding or utilize the Angular event system for inter-directive communication.

For further insights into collaboration between directives in Angular, check out this informative article: Communication Between Collaborating Directives in Angular.

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

What is the reason that property spreading is effective within Grid components but not in FormControl components?

Explore the sandbox environment here: https://codesandbox.io/s/agitated-ardinghelli-fnoj15?file=/src/temp4.tsx:0-1206. import { FormControl, FormControlProps, Grid, GridProps } from "@mui/material"; interface ICustomControlProps { gridProps?: ...

Instructions on how to include a conditional click attribute to a hyperlink

Is there a way to make an anchor tag trigger a function only if a specific variable is set? In this scenario, the variable name is assigned the value of "Shnick", so when the link is clicked it should activate the func() method. However, clicking the link ...

Error: The property '...' is not found in the ReactElement<any, any> type, but it is required in the type '{...}'

As a beginner in TypeScript, I am currently working on rendering a page by fetching data from getStaticProps. The code snippet I am using for this purpose is: import React, {FormEvent, useState} from "react"; import { InferGetStaticPropsType } fr ...

Style the typescript file to mirror the layout of a C# Visual Studio 2015 document

I am looking to align the formatting of my typescript files with that of my C# code files. While I have managed to configure Visual Studio 2015 to place the open brace on a new line, I am struggling to ensure that my parameters are formatted consistently ...

The Java REST service response is lagging and consuming excessive time

I've been grappling with this issue for nearly a week, unable to find a solid solution. Here's the dilemma at hand. Within my Angular client application, there is a button that triggers the creation of a CSV file. The process unfolds as follows: ...

Transferring information from a factory to an Angular controller

I am currently working with an Angular Factory and encountering issues while trying to insert new code. The main issue lies in passing the results of a $resource get to my Angular Controller through the "sendFilesToController()" function outlined below. I ...

Leverage the Angular2 component property when initializing a jQuery function

I'm currently developing a web app with Angular 2 and utilizing jQuery autocomplete. When making requests to the remote server for completion data, I found that the server address is hardcoded in the autocomplete function. Even though I tried using co ...

Is it possible to associate a generic TypeScript type with another type by utilizing its generic parameters?

I am faced with a situation where I have a family of APIs consisting of various related generic types (along with associated constraints). To illustrate this, I have crafted an example using familiar types as placeholders for better understanding. As I wo ...

AngularJS flexible route parameter

My AngularJS application has routes that can be either: www.website.com/blog/xyz www.website.com/blog/xyz/title/other-params In the second URL, the title parameter is used for readability purposes only and is not mandatory in the URL. Therefore, I have i ...

The validation directive is run on each individual item within the ng-repeat loop

As I develop a single page application utilizing Angular and Breeze, the challenge of managing entities with dynamic validation arises. With a set of entities displayed on the page using data-ng-repeat, I implement in place validation through toggling betw ...

selenium-webdriver waits for mouse movement before proceeding

Currently, I am creating test automation using Selenium, Protractor, and Jasmine for an Angular web application. The tests are being run within VirtualBox (Host OS: Windows 8, Guest OS: Ubuntu 15.04). At this point, the test is quite basic, with the onPrep ...

The JavaScript file failed to load

My HTML code is having trouble loading all the files. The Javascript files UserController.js and RepoController.js are not being loaded, which means they are not displayed in the developer tools source tab. When I press F5 in the network tab, the files are ...

Challenges when using deep linking to URL with AngularJS ui-router

Recently, I encountered an issue after restructuring the folder organization of my AngularJS application. Although I believe this might be a distraction from the root cause, I moved a section of functionality to its own directory for better organization. A ...

ng2-charts does not display the updated labels, it only shows the data

I am currently working on an Angular application using the ng2-charts package. In one of my components, I have a pie chart displaying data retrieved from the server. Here is the code snippet for that component: export class PieChartComponent implements On ...

Encountering an error with type mismatch for style transform properties while using react-native-reanimated

Currently working with the following versions: "react-native": "0.59.10" "react-native-reanimated": "^1.3.0" using TypeScript Encountering a type error related to transform properties. const Example = () => { const { translationX, gestureHandler } = ...

Detecting errors during user login

My login functionality is working fine, but I am having trouble displaying an error message when a user enters invalid credentials. Even though my code is functional, I can't seem to catch the error. Here is the code snippet that works: function us ...

I'm encountering an issue where my query parameter is not being accepted by the tRPC query request

I encountered an issue when I tried sending a request to http://localhost:5000/trpc/test?val=teststring using the minimal reproducible example below. The response message received was "Invalid input: undefined," indicating that the value 'val' is ...

When transitioning to a different page, Angular is creating a duplicate of $scope

My webpage features a section where I showcase all the individuals stored in the database, referred to as the All Persons Page. Within this page, there are two primary options: Add New Person Delete Person (Any selected individual) An issue arises when ...

What is the rationale behind allowing conflicting types in intersection types?

When presented with two interfaces containing conflicting member types: interface A { x: number } interface B { x: string } It becomes impossible to create an interface that extends both: interface I extends A, B // error TS2320: Interface 'I' ...

Directive template with a recursive ng-include template inside

Custom directive template : <script type="text/ng-template" id="child-map.html"> <b ng-click="selectNode(child.id)">{{child.title}}</b> <ul ng-if="child.children.length"> <li ng-repeat="child in ...