Sharing data between two AngularJS components using TypeScript

I am working with two components:

export const TopBarMemberComponent: angular.IComponentOptions = {
        bindings: {},
        require: {
            controller: '^EngagementSetupMember'
        },
        templateUrl: 'topBarMembers.component.html'
    }

And a parent component:

export const EngagementSetupMember: IComponentOptions = {
    controller: EngagementMembersController,
    templateUrl: 'engagement.component.html'
}

This is within a module

import {EngagementSetupMember} from './../engagementMembers.component';
import {TopBarMemberComponent} from './topBarMembers.component'

export const topBarMembersModule: string = angular
.module('topbar-members', [])
.component('topbarMemberComponant', TopBarMemberComponent)
.name;

When trying to use it, an error message appears

"Cannot find EngagementSetupMemberController"

Please assist!

angularjstypescriptangularjs-controllerangularjs-components

Answer №1

Here is an example of how your code should be structured at this point:

// topBarMember.component.ts
export const TopBarMemberComponent: angular.IComponentOptions = {
  bindings: {},
  require: {
    controller: '^EngagementSetupMember'
  },
  templateUrl: requrire('./topBarMembers.component.html')
}


// engagementSetupMember.component.ts
export class EngagementMembersController {}

export const EngagementSetupMember: IComponentOptions = {
  controller: EngagementMembersController,
  templateUrl: require('./engagement.component.html')
}

// module.ts
import {EngagementSetupMember} from './../engagementMembers.component';
import {TopBarMemberComponent} from './topBarMembers.component'

export const topBarMembersModule: string = angular
  .module('topbar-members', [])
  .component('engagementSetupMember', EngagementSetupMember)
  .component('topbarMemberComponant', TopBarMemberComponent)
  .name;

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

Presenting information on the user interface

Recently, I have been working on an API endpoint that retrieves comments by ID, using the endpoint get/comments/:id. When I tested this endpoint using Postman, the response I received was as follows: { "id": 401478, "page": 1, "results": [ ...

javascriptnode.jsangulartypescriptexpress

Retrieve particular data points from the object based on its unique identifier

Hey there, I'm facing an issue with Angular where I need to retrieve a specific object from an array based on its ID. I'm quite lost on how to approach solving this problem. var Obj = [ { Id: "1", shape: "circle", color: "red" }, { Id: " ...

javascriptarraysjsonangularjssearch

Encountering status code 0 when handling 413 (Request Entity Too Large) error in AngularJS with Loopback API

1. Revealing Some Details In my client-side application built with AngularJS 1.3.15, I am utilizing a loopback API for handling requests. Within the application, I have set up interceptors using $httpProvider.interceptors to interpret status codes and di ...

angularjsloopbackjshttp-status-code-413

Ways to modify this request in order to update the current status

How can I optimize these calls to avoid repeating the same sentence for refreshing the state? I'm not looking for a major overhaul, just some suggestions like putting this call inside a function and invoking it when needed... export const CategoriesPa ...

reactjstypescriptcode-cleanup

Encountering a 400 error in Application Insights

Today I discovered a problem with application insights. I am now receiving a 400 error when attempting to track an event: POST 400 (106: Field 'type' on type 'Device' is of incorrect type. Expected: string, Actual: undefined) No chan ...

angularjsazure-application-insights

Combining Various Data Types in a Flexible List

I'm looking for a way to dynamically add rows to a table. Right now, I have the input type on the server (whether it's int, bool, string, etc), but I want to know how to implement a field accept combobox. Here is the code in cshtml: <tr ng-r ...

javascriptangularjs

Avoiding redundant form submissions using AngularJS

Seeking a solution in AngularJS to prevent multiple submissions for each task. Not interested in disabling buttons after submission or having the form wait until the task is complete. Instead, I require that requests are unique. Specifically, looking for ...

angularjs

Troubleshooting the issue of AngularJS Autocomplete failing to display available

I am facing an issue with my Angular autocomplete functionality. I have configured it to use an object array and successfully return the correct result list. However, after mapping the variables to name and id fields, the drop-down selector stops displayin ...

javascriptjqueryangularjsautocomplete

How do I pass a value from my Angular2 directive into the template?

My current setup includes a template named "starrating.component.html" <ng-container *ngFor="let star of arrayStarts"> <span class="glyphicon star" aria-hidden="true" [class.glyphicon-star-empty]="activeStar>=star? false : true" ...

angulartypescriptangular2-directives

AngularJS: Issue with directive function not being executed

I created a directive in my code, but for some reason the function I provided to define the directive is not being called. It was working perfectly fine before, and now it just suddenly stopped without any clear explanation. Below is the code snippet of m ...

javascriptangularjsangularjs-directivedirective

Encountered a snag while trying to add an extension to Eclipse

I'm having trouble installing the AngularJS extension for Eclipse IDE (Helios Release for PHP developers) because I keep getting this error message: Cannot complete the install because one or more required items could not be found. Software being i ...

phpangularjseclipse

Can you point me in the direction of the source code for dependencies stored in the node_modules

I'm new to TypeScript and NPM, so my question might seem basic. I've added some dependencies to my package.json file and used the npm install command to install them. After installation, I noticed that many dependencies were added to the node_mod ...

node.jstypescriptnpm

Was anticipating 1 argument, however received 5 in TypeScript

When running the code in this part, I expected to receive 0-1 arguments but ended up getting 5 instead. Do you have any suggestions for a solution? Register() { let newUser = new User(this.registerForm.value, newUser.city =this.cityid, ...

angulartypescript

Manage both React keyboard and mouse events within a single function

I'm working on enhancing the accessibility of my web app by making it keyboard accessible. However, I am facing an issue when trying to handle both click and keyboard events using the '|' symbol in my function: Property 'key' does ...

javascriptreactjstypescripttypes

Angular 12: TypeScript Issue TS2339 - Unable to Locate Property on Type

Whenever I use the code below, I encounter error TS2339: Property 'timestamp' does not exist on type 'LogRepair[]' In the component's HTML file, I am attempting to loop through an array of properties defined in the LogRepair typ ...

angulartypescript

The directive attribute in AngularJS fails to connect to the directive scope

I have been attempting to pass an argument to a directive through element attributes as shown in the snippet below: directive app.directive('bgFluct', function(){ var _ = {}; _.scope = { data: "@ngData" } _.link = function(scope, el ...

javascriptangularjsangularjs-directiveangularjs-scope

AngularJS - UI Bootstrap: Easily expand or collapse all items in the Accordion widget

I have created a code to open and close all tabs of an accordion individually using separate 'open' and 'close' buttons. However, it requires me to dynamically add a key value pair (a Boolean value) to my JSON data. What is the best ap ...

javascriptangularjsjsonangular-ui-bootstrap

React App generation error - Missing module: Error encountered while resolving

In my React front-end app created with create-react-app, all the source files are located in the ./src folder. Additionally, I have a Firebase cloud functions project for the backend in the ./functions folder with its sources in ./functions/src. Within th ...

reactjstypescriptwebpackcreate-react-app

A loop in JavaScript/TypeScript that runs precisely once every minute

Here is a snippet of my code: async run(minutesToRun: number): Promise<void> { await authenticate(); await this.stock.fillArray(); await subscribeToInstrument(this, this.orderBookId); await subscribeToOrderbook(this, this.orderBookId ...

javascripttypescriptloopssettimeout

Having trouble configuring CORS in Sails.js for fetching Google Maps geolocation data?

Struggling to enable CORS in my local app, I've been following the sails.js documentation which suggests changing the setting "allRoutes: true" for enabling cors. However, when attempting to access the Google API using Angular: getLocation: function( ...

javascriptangularjscorssails.js