I am currently working on a project that involves the integration of angularjs and typescript.
Within this project, I have developed a component specifically designed to handle errors. However, I am facing a challenge in retrieving the parameter sent to the component so that it can be displayed on the screen within my controller.
Below is the code snippet for my error component (errors.component.ts):
module MainErrors.Components {
'use strict';
export class MainErrorsComp extends MiApp.Components.ParentComponent {
public templateUrl: string | Function;
public controller: string | Function | (string | Function)[];
static instance(): ng.IComponentOptions {
return new MainErrorsComp();
}
constructor() {
super();
let bindings = {
msgErrorMicro: '='
}
this.templateUrl = '/templates/errors.html';
this.controller = 'mainErrorsController as MainErrCtrl';
this.setBindings(bindings);
}
}
}
Furthermore, here is the code snippet for my error controller(errors.controller.ts):
constructor(public $injector, public $scope) {
super($injector);
let vm = this;
vm.setInjections($injector);
vm.initComp();
vm.msgError = // Here I want to retrieve the value of the msgErrorMicro parameter passed from an HTML element in the component, but I'm not sure how to accomplish this
}
The HTML template used for displaying errors (errors.html) is shown below:
<p>{{MainErrCtrl.msgError}}</p>
To demonstrate how the error component is invoked within another HTML file, consider the following example where the component is called from login.html:
<main-errors-comp msg-error-micro="Problems to connect from login"></main-errors-comp>
My primary objective is to extract the value of the "msg-error-micro" parameter and load it into the variable vm.msgError within "errors.controller.ts". Any advice or guidance on achieving this would be greatly appreciated!