Search Posts

Category: angularjs-components

AngularJS: Use variable inside component

I want to use an input variable and display it inside my component HTML but I can’t get it to work. I’m pretty sure I miss something important here but can’t say what. Here is my component declaration: app.component(‘requestSummary’, { templateUrl: “./Template/request-summary”, controller: function RequestSummary() { var vm = this; }, bindings: { request: “=” } }); The component template: <div> <h1>{{ vm.request.Pnr }}</h1> </div> (I have also tried without the vm) The component use: […]

Communicate changes between sibling components in AngularJS 1.6

I have an AngularJS 1.6 app that looks like this: angular.module(‘app’).component(‘parent’, { template: ‘ <parent> <display options=”ctl.options”></display> <controls options=”ctl.options”></controls> </parent>’, controller: function() { this.options = { x: 100, y: 0.2 }; }, controllerAs: ‘ctl’, bindToController: true }); I’d like to use inputs in controls component to modify properties of the options object, so that changes are reflected in display (but without rewriting entire object each time one property has been changed). How can I do […]

How to render a component within TableCell in custom Table component

I have written a Table component that allows a list of headers and rows to be passed which the Table will render. This all works great, and even allows basic HTML to be passed in via $sce, but on occasion I need to pass in a component or directive to be rendered within a cell. How do I go about doing this? Example of component I wish to render inside a TableCell <group-display groups=”item.listOfGroups”></group-display> Here […]

Pass template HTML into Directive / Component to be rendered later

I currently have an assortment of custom table, sorting and filtering directives. This all works but is based on older recommendations and, as part of my efforts to prepare the codebase for upgrade to Angular, I am looking to update my code base i.e. remove in-markup filters, orderBy etc. As such I figured it would be a good idea to consolidate this collection of table directives into one table component that solves these issues as […]

Use ng-model to avoid $digest delay in Component Directives

How to call controller’s any function in directive in angularJs I’m trying to call parent controller’s function, which has not much to do with the directive, when directive’s bind value has changed. I’ve been looking through the Q&A in stack, but all of them are related to passing a value from directive to controller, which is not my case. I thought my case was generally common, the scenario is that: display complex objects in a […]

$http get to REST service not showing in component template

Using the following code, i am able to do a http get from a json file, however when i try to run a http get against a REST service URL the angular webpage does not display the data on the form. When i go to the browser developer tools i can see the response data, it does not display the results on the page. Any help is appreciated. This is the controller i have – […]

How to pass parameter from one component to another

I have some components, which together form my menu. I’m wanting to get a parameter in the topmost component, and use it in the lower components. I want to pass the ‘app-rest’ value to my component. angular.module(‘app’).component(‘application’, { controller: applicationController, template: ` <cp-layout config=”$ctrl.config” menu=”$ctrl.menu” clientId=”$ctrl.clientId” logout=”$ctrl.logout()”> <div ui-view class=”content-wrapper ng-scope ng-fadeInRight”></div> </cp-layout> ` }); applicationController.$inject = [ ‘$window’, ‘$http’, ‘MensagemService’, ‘$filter’, ‘Siseg’ ]; function applicationController($window, $http, MensagemService, $filter, Siseg) { const vm = this; […]

Next Page »