angular 1.5 component / default value for @ binding

angularjs component bindings not working
angularjs component templateurl
angularjs component require
angularjs component transclude
angularjs component bindings undefined
angularjs component vs directive
angularjs docheck
angularjs optional bindings

Is there any way to specify the default value for an @ binding of a component.

I've seen instruction on how to do it with directive: How to set a default value in an Angular Directive Scope?

But component does not support the compile function.

So, I have component like this:

  name: 'myPad',
  bindings   : {layout: '@'}

I want to free users of my component from having to specify the value of the 'layout' attribute. So..., this:


instead of this:

<my-pad layout="column">...</my-pad>

And... this 'layout' attribute is supposed to be consumed by angular-material JS that 'm using, so it needs to be bound before the DOM is rendered (so the material JS can pick it up & add the corresponding classes to the element).

update, some screenshots to clarify the situation:

Component definition:

  name : 'workspacePad',
  config : {
    templateUrl: 'src/workspace/components/pad/template.html',
    controller : controller,
    bindings   : {
      actions: '<', actionTriggered: '&', workspaces: '<', title: '@',
      flex: '@', layout: '@'
    transclude: {
      'workspaceContent': '?workspaceContent'

Component usage:

<workspace-pad flex layout="column" title="Survey List" actions="$ctrl.actions"
    <div flex style="padding-left: 20px; padding-right: 20px; ">
      <p>test test</p>

I want to make that "flex" and "layout" in the second screenshot (usage) optionals.


My "solution" to have this in the constructor of my component:

this.$postLink = function() {
  $element.attr("flex", "100");
  $element.attr("layout", "column");

I wish I didn't have to write those last 2 lines (addClass)... but well, since we don't have link and compile in component.... I think I should be happy with it for now.

First of there is great documentation for components Angularjs Components`. Also what you are doing I have done before and you can make it optional by either using it or checking it in the controller itself.

For example you keep the binding there, but in your controller you have something like.

var self = this;

// self.layout will be the value set by the binding.

self.$onInit = function() {
    // here you can do a check for your self.layout and set a value if there is none
    self.layout = self.layout || 'default value'; 

This should do the trick. If not there are other lifecycle hooks. But I have done this with my components and even used it in $onChanges which runs before $onInit and you can actually do a check for isFirstChange() in the $onChanges function, which I am pretty sure will only run once on the load. But have not tested that myself.

There other Lifecycle hooks you can take a look at.


That is interesting, since I have used it in this way before. You could be facing some other issue. Although here is an idea. What if you set the value saved to a var in the parent controller and pass it to the component with '<' instead of '@'. This way you are passing by reference instead of value and you could set a watch on something and change the var if there is nothing set for that var making it a default.

With angularjs components '@' are not watched by the component but with '<' any changes in the parent to this component will pass down to the component and be seen because of '<'. If you were to change '@' in the parent controller your component would not see this change because it is not apart of the onChanges object, only the '<' values are.

angularjs, First of there is great documentation for components Angularjs Components`. Also what you are doing I have done before and you can make it  One-way data-binding in Angular 1.5 ; if I change the reference Object and Primitive in the parent and the isolate Component, you’ll see both values continue to

To set the value if the bound value is not set ask if the value is undefined or null in $onInit().

const ctrl = this;
ctrl.$onInit = $onInit;
function $onInit() {
  if (angular.isUndefined(ctrl.layout) || ctrl.layout=== null)
    ctrl.layout = 'column';

This works even if the value for layout would be false.

angular 1.5 component / default value for # binding, default value in an Angular Directive Scope? But component does not support the compile function. So, I have component like this: { name: 'myPad', bindings  Build an Angular 1.5 component – An AngularJS tutorial - Step by Step Guide with Demo Click To Tweet What else can we do with components? Our previous example was a very basic one, so the HTML was not very complex.

Defining the binding vars in constructor will just initiate the vars with your desired default values and after initialization the values are update with the binding.

      this.layout = 'column';
    $onInit() {
      // nothing here

AngularJS: Developer Guide: Components, bindToController, Yes (default: false), No (use bindings instead) The < symbol denotes one-way bindings which are available since 1.5. a component such as cloning the bound value to prevent accidental mutation of the outer value. The < symbol denotes one-way bindings which are available since 1.5. The difference to = is that the bound properties in the component scope are not watched, which means if you assign a new value to the property in the component scope, it will not update the parent scope. Note however, that both parent and component scope reference the same

you can use

$onChanges({layout}) {
    if (! layout) { return; }
    this.setupLayout(); ---> or do whatever you want to do

Understanding Optional AngularJS Bindings, By default, when these bindings aren't set up with an initial value by the parent component, they simply translate to a function that does nothing  In AngularJS, 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 the new Angular's style of application architecture.

AngularJS component binding types, Component bindings from Angular 1.5 had few difficulties. you pass object/​array to binding you can unwillingly manipulate it's values inside a component. How to Use Angular 1.5's Component Method. option is on by default. Angular Components: Before and After a two way binding in and out of the component

AngularJS: Understanding Directive Scope, A continuation of an in-depth look at AngularJS directives, now looking at how they This is the default value of scope in the directive definition. Using prefixes helps establish a two-way or one-way binding between parent and directive However, since directives are independent components, the best practice would be  Two-way binding; Interpolation and property binding. This article explains interpolation and property binding. The next upcoming article will explain event binding and two-way binding. An Angular application starts with a component and the basis of data binding involves displaying data in a template rendered using a component. Let’s build a

One-way property binding mechanism in Angular, Angular components can receive values from the outside world and can send values to the outside world. If an Angular component needs to  Property binding in Angular 5 is one-way, in that communication goes from the component class to the template. Two-Way Data Binding What if we wanted to use our input textfield to both retrieve and set its value from a component class?

  • If you are not requiring users to specify the layout attribute, why have it on the scope of the directive at all?
  • I need to have that 'layout' property in the tag generated for the component (my-pad). Otherwise the layout of my page will be messed up. And if user forget (by accident) to specify a value for it, I want to give it a default value ('column').
  • Are you using the layout scope attribute anywhere in your link function? Can you please post the code for the entire directive or at least the relevant parts?
  • hi frishi.... i just updated the post to add the screenshots of the code. Thanks!
  • Thanks, but please refrain from posting screenshots of code. Always use the in-built markdown formatting or use services such as Plunkr or JSFiddle and post links to them.
  • I tried those callbacks, and while it I can add attr to the element (using $element.attr()), material JS didn't pick it up. I guess it's called too late in rendering cycle.
  • I made an edit above its a bit of a side step in a different direction but I have also do this before to get something like this to work.
  • Hi, it doesn't work for me. I wish angular had something like: flex: '@100' (whatever follows the @ will be taken as default value). for now i'll just make sure users (other progrmmers) write those attrs when using the component.
  • maybe you could set up a separate binding not listed that has a default value. like layout: '@', layoutDefault: 'value'. and in the template have layout={{ $ctrl.layout || $ctrl.layoutDefault }}. And play around with that. Which I have done before as well haha. I am sort of confused why none of this is working.
  • :) the thing is, in the parent template (user of component) I don't want to write that attr when calling out the component. i And specifying that attr in an inner div (inside the template definition of workspacePad) does not help either. those attr needs to be in < workspace-pad>; whether it's spelled out or not.
  • This solution is better than the accepted one because the accepted one doesn't work if the binding is a boolean for example.
  • The values are not replaced when using a @ binding.
  • @StevenVachon yeah right, the question itself has I think changed a lot since it was originally posted. But yeah the assignment to evaluated expression is not a very good idea :)