# Category: components

## 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 […]

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> <{{component.name | 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: […]

## Communication between spread out AngularJS components

We have various components in the application that are not in parent/child or sibling relationships. Let’s say a checkbox that when in checked state is supposed to change the state of another component which is in a completely different container. The application is over 500 different views, so a controller for each one is not an option. Those interactions are also completely custom, so we would need tens of methods to cover all of them […]

## Sharing data between Angularjs components

I’m trying to refactor an Angularjs 1.4 webapp to use components. The webapp has a header with a “Search” input box: the main section shows a list of contacts filtered according to the value entered in the Search input text. I’m trying to use ui-router (to switch from list to details. I’ve created Header and Index component, defined a service in which I store the Search value, defined a state app.index with “resolve” that calls […]

## Dynamically set chart type with AngularJS and chart.js

I want to write an AngularJS component which uses a template and a controller to display a chart.js chart that has a dynamic type (bar, line, pie, …) I use angular-chart.js to combine angular and chart.js My template looks like this: <div class=”card”> <div class=”card-body”> <h4 class=”card-title”>{{$ctrl.name}}</h4> Type is set to: {{$ctrl.type ? $ctrl.type : ‘pie’}} <div id=”container” class=”container” style=”width:100%”> <div class=”panel-body”> <canvas id=”chart_test” class=”chart chart-{{$ctrl.type ? \$ctrl.type : ‘pie’}}” chart-data=”data” chart-labels=”labels” chart-series=”series” chart-options=”options” chart-dataset-override=”datasetOverride”></canvas> […]