Questions tagged [angularjs-components]

Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. A Component cannot do any DOM manipulation like directives (in the link and compile methods).

Component is an feature introduced in version 1.5.

From Understanding Components in the AngularJS documentation:

In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

This makes it easier to write an app in a way that's similar to using Web Components or using Angular 2's style of application architecture.

Advantages of Components:

  • simpler configuration than plain directives
  • promote sane defaults and best practices
  • optimized for component-based architecture
  • writing component directives will make it easier to upgrade to Angular 2

The applications built using the new framework are completely component-oriented. So using them in your application it's not only a good practice but will make your application closer to the new Angular style.

350 questions
78
votes
7 answers

AngularJS 1.5+ Components do not support Watchers, what is the work around?

I've been upgrading my custom directives to the new component architecture. I've read that components do not support watchers. Is this correct? If so how do you detect changes on an object? For a basic example I have custom component myBox which has…
41
votes
6 answers

How to watch component binding change using Angular component

How can I listen to angular component binding change and perform actions? angular.module('myapp') .component('myComponent', { templateUrl: 'some.html', controller: MyController, controllerAs: 'myCtrl', bindings:…
Dor Cohen
  • 16,769
  • 23
  • 93
  • 161
36
votes
7 answers

What is best practice to create an AngularJS 1.5 component in Typescript?

I am experimenting with the .component() syntax in Angular 1.5. It seems that the latest fashion is to code the controller in-line in the component rather that in a separate file, and I can see the advantage of that given that the component…
kpg
  • 7,644
  • 6
  • 34
  • 67
36
votes
4 answers

angularjs 1.5 component dependency injection

this may sound newb, but I have been following this tutorial for angularjs component. I am new to components and how do I inject a constant Utils or authService to my component like this? app.component('tlOverallHeader', { bindings: { …
Hokutosei
  • 2,114
  • 5
  • 24
  • 42
28
votes
2 answers

Purpose of $element and $ attrs in component controllers with angularJS components 1.5

I am working on getting up to speed with 1.5 angular components. I have been following todd Motto's videos to get a start on components along with angular's documentation https://docs.angularjs.org/guide/component. At this point it seems…
Winnemucca
  • 3,309
  • 11
  • 37
  • 66
16
votes
3 answers

In Angular 1.5, how to bind an attribute component as boolean?

I would like to know if in Angular 1.5, when you use components, there is a simple way to bind an attribute which is a boolean without be converted as string with @. For example, I have two components "app-menu" and "app-menuitem" without…
15
votes
2 answers

Angular 1.5 components with ui-router resolve : Unknown provider

I'm facing an issue with converting controllers to components preparing my application for Angular 2, but the problem the migration is not going well, I have the ui-router to route between states and using resolve in a few controllers, the version…
15
votes
1 answer

Using expression `("&")` binding to pass data from AngularJS component to parent scope

Can't access controller scope from angular component output binding function I'm trying to access my home controller scope from dashboard component but it's undefined. I also tried a second approach but then my function variable is undefined. I'm…
Dor Cohen
  • 16,769
  • 23
  • 93
  • 161
14
votes
3 answers

Angular 1.5 Component Bindings: Check if Callback is Present

I've got a simple contactList component, which has 2 bindings: contacts and onRemove. contacts is just an array of contacts to display onRemove is a callback function app .component('contactList', { template: `
14
votes
2 answers

More than one template in same component in AngularJS 1.5

Can I use more than one template in AngularJS 1.5 components ? I have one component having one attribute, so I want to load different template based on that attribute name. How can I achieve loading of templates based on attribute name of…
wmnitin
  • 3,387
  • 1
  • 13
  • 19
14
votes
1 answer

Pass object to component

I have created a component that needs to have a reference to the object for which the component was created. I didn't make to work and all my trials have failed. Below, I try to describe the intention. The component definition would maybe look like…
Amio.io
  • 20,677
  • 15
  • 82
  • 117
13
votes
1 answer

When to use the AngularJS `$onInit` Life-Cycle Hook

With the release of AngularJS V1.7, the option to pre-assign bindings to has deprecated and removed: Due to 38f8c9, directive bindings are no longer available in the constructor. To migrate your code: If you specified…
13
votes
1 answer

Angular 1.5 component dependency injection

I've been trying to use the new Angular 1.5 component syntax in a project, but I can't figure out how to inject a dependency into the component definition. Here's my attempt at refactoring an existing directive to a component: angular …
epb
  • 454
  • 4
  • 15
13
votes
1 answer

What is the best way to pass functions between inner components in AngularJS 1.5?

I was wondering what is the best way to pass functions down through 2 or more levels of components? There's no simple way of skipping the function wrap when using '&' bindings? Here's an use case: angular.module('app', []).component('app', { …
Hodes
  • 895
  • 2
  • 10
  • 18
13
votes
3 answers

angularjs: broadcast from directive to controller

Im trying to send a message from within a directive to its parent controller (without success) Here is my HTML
Here is the code in the controller which listens for the event $scope.on('go',…
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
1
2 3
23 24