Search Posts

Category: components

Button working only on second click (any 2 clicks each)

I have a simple, but annoying problem: In my fragment, I have a button which should call function. but I have to click the button twice (any 2 clicks it works, but when i debug it any time I click the button the function is running , but only the second time I can see my output on the screen). HTML: <div class=”container”> <button ng-click=”$ctrl.getObject()” > GET MOVIES </button> </div> component: ‘use strict’; const appModule […]

Angular 1.5 component/require dependency injection of $log

I have been trying to inject $log in to a component created by a require statement for some client Angular. var App = require(‘./app/containers/App’); var Header = require(‘./app/components/Header’); require(‘angular-ui-router’); var routesConfig = require(‘./routes’); import ‘./index.css’; angular .module(‘app’, [‘ui.router’]) .config(routesConfig) .controller(App.App, [‘$log’]) .service(‘todoService’, todos.TodoService) .component(‘app’, App) .component(‘headerComponent’, Header); The code for header is module.exports = { template: require(‘./Header.html’), controller: Header, bindings: { todos: ‘=’ } }; /** @ngInject */ function Header(todoService) { this.todoService = todoService; } […]

How to bind any patricular object property in angular component

I am new to angular 1.6 component architecture and having a simple problem. I am having one src object with having two properties within it i.e. name and age. Now, what I want is binding that name property in html. The following is the code: test.js:- $ctrl.src = { details: [ { Id: 1, Name: “Test1”, Address: “Add1” }, { Id: 2, Name: “Test2”, Address: “Add2” } ] }; test.html:- <cell-component>Hi {{Name}}</cell-component> Expected Output:- Hi […]

Components in angular js

I have a requirement where there are many screens.All the screens follow same pattern. Submit. (A) common layout Page which changes (B) Some design. Common layout For this is the component approach is better using ui router presently. What i did was portion A is parent state and B is child state with different controllers.when i click submit in A it should perform action in B. What is the appropriate approach? Source: AngularJS

Way to decorate Angular 1.5 $onInit component for common functionality

We use Angular 1.5 components and we have views where we aggregate multiple components which load their own data mostly using asynchronous back end services. Now we show a loading div till services return response and hide it when we get the response to let user know that we are still processing data for the component. I started thinking if we can implement it in some common way instead of injecting service which shows and […]

Angularjs component not working in knockoutjs template

I’m trying to launch an AngularJS component from knockout template. Something like below in the html. <!– ko if:something –> <my-angular-component attr1= “text1″> <span data-bind=”text: text1″></span> & <span data-bind=”text: text2”></span> </my-angular-component> <!–/ko –> I need to get the data from the knockout scope to angular scope. But whenever I do so, my angular component is not triggered. Any ideas? Source: AngularJS

Angular 1.6 TDD routes, components, and controllers without unit testing

Before I explain, I want to be clear that I am asking HOW, not IF. Also, my team is XP with full TDD. It seems like everything I can find about testing Angular 1.6 components and controllers focuses on unit testing, but more and more, in coming to the conclusion that unit testing these items is mostly testing implementation. If I want to test whether clicking something goes to another page, there is no reason […]

Custom Components are not loading while using ng-Repeat

I want something like below. componentlist = [ {‘name’ :’component1′,’attri’:’x’},{‘name’:’component2′,’attri’:’y’}] <div ng-Repeat=”component in componentlist”> <component1 attri=’x’> </component1> <component2 attri=’y’> </component2> </div> This is my code. <div ng-Repeat=”component in componentlist”> <div> <{{ | lowercase}} attri=”{{component.attri}}” /> /div> </div> The issue is after dynamically created the elements my components are not loading my html template. myapp.component(‘component1′ ,{ template :'<h1> component1 <h1>’ controller :function(){}, bindings : {attri:”=”}, binToController:true }); In inspection, I am getting <component1 attri=’x’> </component1> == […]

Angular 4: Conditional parent template

On Angular 4, assuming that I have 5 components/routes and certain sets use specific parent templates, e.g.: a.component –> parent component b.component, c.component –> parent2 component e.component, f.component –> parent3 component Currently, the parent template is handled by app.component and child components are rendered inside a tag, say, <router-outlet>. My questions is, is there a way to make the parent template conditional based on the rules stated above? Thank you. Source: AngularJS

How to use angular 1.x services to update one component from another?

So I have a parent component that has a ton of smaller components inside of it. The general idea is that I need one component to take in the data in an input and display it on another component. This is what I have which doesn’t quite work, more details on the problem afterwards: const app = angular.module(‘app’, []); app.service(‘dataService’, function() { let data = { key1: “”, key2: “”, key3: { key4: 0, key5: […]

Next Page »