Search Posts

Category: components

AngularJS: Component communication – interpolate child content

Here is an official example of intercomponent communication I want a little different behavior. Lets say, I want pane content to be a tab name. For example <my-tabs> <my-pane>Hello</my-pane> <my-pane>World</my-pane> </my-tabs> And then in parent template I tried something like this, but it does not work. <div class=”tabbable”> <ul class=”nav nav-tabs”> <li ng-repeat=”pane in $ctrl.panes” ng-class=”{active:pane.selected}”> <a href=”” ng-click=”$ctrl.select(pane)”><div class=”tab-content” ng-transclude></div></a> </li> </ul> </div> How is it possible? Source: AngularJS

AngularJS Component Bindings/Data overwritten?

I’m really hoping this is just my own growing understanding of Angular, I have a Component, which calls a HTTP request for some data to create a datalist, (snipped code) indexForm.component(‘autoComplete’, { transclude: true, templateUrl: ‘js/components/autoComplete.template.html’, bindings: { placeholder: ‘@’, requestapi: ‘@’, nameandid: ‘=’, localclass: ‘@’, datam: ‘=’ }, controller: function($scope, $http, $window, ajaxRequestApi) { ac = this; this.listItems = false; ac.$onInit = function() { console.log(ac.requestapi); // <- confirmed works console.log(ac.listItems); ajaxRequestApi.getmy(ac.requestapi).then(function(data) { console.log(data); // […]

Angular Component not rendering no error received

In a system I am working on there are multiple angular custom components being used. The one screen that has worked up until yesterday; it uses two types of these components. One being a button and one being multiple components put together create a entering field for information (It amounts to a bunch of labels and text-boxes). The problem I seem to have is that the component for the address (the one that is currently […]

Display different contents in a given component Angular

I’m new to AngularJs and I’m trying to build a single page website. My goal is to have a sidebar(menu) on the left and a page content on the right. Whenever I click on a given button into this sidebar, I would like to see the corresponding content on the page content. +————————————————-+ | Navbar | +————+————————————+ | Sidebar | | | | | | Menu 1 | Content | | Menu 2 | => […]

Not able to print data using Angular js 2

I’m not sure where I went wrong, created aMean Stack app both server side and client. Server side works fine I’m able post, get and delete data from Table, but not able to display get data in component.html file. I have shared my component, services and html files, please find what’s the error. If you need any another file I can share. This is ideas.component.html <div class=”container”> <div *ngFor=”let idea of ideas”> <div class=”col-md-3″> {{ideas.Name}} […]

router injection doesn’t fill input param to the component

I have this code: app.js var promptoWeb = angular.module(‘promptoWeb’, [‘ngMaterial’, ‘ngAnimate’, ‘ngMessages’, ‘ngAria’, ‘ui.router’, ‘ui.sortable’, ‘ngFileUpload’]); (function (app) { app.config([‘$stateProvider’, ‘$urlRouterProvider’, ‘$compileProvider’, function ($stateProvider, $urlRouterProvider, $compileProvider) { self = this; $compileProvider.preAssignBindingsEnabled(true); $urlRouterProvider.otherwise(‘/’); $stateProvider.state(‘home’, { url: ‘/’, template: ‘<home-component></home-component>’, component: ‘homeComponent’, params: { selectedFilter: undefined }, resolve: { ldapGroup: function (authorizationService) { return authorizationService.getLdapGroup() === ‘WazeAdOps’; } } }) }]); })(promptoWeb); and home-component.js (function (app) { app.component(‘homeComponent’, { templateUrl: ‘partials/home-partial.html’, bindings: { ldapGroup: ‘<‘ }, controller: […]

AngularJS $compile: how to access child component DOM

I have a two components, lets name them parent-comp and child-comp child-comp markup is pretty simple <ul> <li></li> <li></li> </ul> parent-comp markup just contains a child component for example <child-comp></child-comp> So in my jasmine tests I’m doing the following thing let element = $compile(‘<parent-comp></parent-comp’)(scope) And then I can test my parent-comp template behavior very carefully. BUT, I can’t access child component DOM. console.log(angular.element(element[0].querySelector(‘child-comp’))); Gives me the following output <child-comp></child-comp> without nested ul list. And console.log(angular.element(element[0].querySelector(‘child-comp […]

No component content in AngularJS unit test

how to No component content in AngularJS unit test my setup is AngularJS 1.5+, jasmine, karma and the issue is with testing a component together with it’s template. The issue is that after compiling the component’s template, it does not have the content it should. Consider the following test snippet: const ELEMENT_HTML = ‘<some-component></some-component>’; const scope = $rootScope.$new(); const markup = angular.element(ELEMENT_HTML); const component = $compile(markup)(scope); $scope.$digest(); console.log(component); The template of some-component can have any […]

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; } […]

Next Page »