Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding to a component property in angular2

I'd like to reference a property on a component within A. that' component's constructor B. that component's template. The apis on this seem to be shifting a little bit, but i'd expect the following to work:

<my-component [greeting]="hello"></my-component>
// my component.es6.js
@Component({
  selector: 'my-component',
  properties: {
   'greeting': 'greeting'
  }
})
@View({
  template: '{{greeting}} world!'
})
class App {
  constructor() {
    console.log(this.properties) // just a guess
  }
}

Plunkr

What am I doing wrong?

like image 488
Nick Tomlin Avatar asked May 01 '15 16:05

Nick Tomlin


People also ask

What is used to bind a component property?

To bind to an element's property, enclose it in square brackets, [] , which identifies the property as a target property. A target property is the DOM property to which you want to assign a value.

What is property binding and event binding?

Property binding is the same thing as interpolation, except you can set the properties and attributes of various HTML elements. Event binding allows you to define events that occur in the template (user-initiated), and communicate to the component class.

What is component binding in Angular?

Angular processes all data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components. Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.

What is property binding with example?

In Angular 7, property binding is used to pass data from the component class (component. ts) and setting the value of the given element in the user-end (component. html). Property binding is an example of one-way databinding where the data is transferred from the component to the class.


1 Answers

I was experimenting with Angular2 and came up against the same problem. However, I found the following to work with the current alpha version (2.0.0-alpha.21)

@Component({
  selector: 'hello',
  properties: {'name':'name'}
})
@View({
  template:`<h1>Hello {{_name}}</h1>`
})
class Hello {
  _name: string;

  constructor() { 
    console.log(this);
  };

  set name(name){
    this._name = name;
  }
}

@Component({
  selector: 'app',
})
@View({
  template:
  `
    <div>
      <hello name="Matt"></hello>
    </div>
  `,
  directives: [Hello]
})
class Application {
  constructor() { };
}

bootstrap(Application);

It seems that properties on the Class that is passed to bootstrap are ignored. Unsure if this is intended or a bug.

Edit: I've just built Angular2 from source and tried the @Attribute annotation, it works as per the docs (but only on the nested component).

constructor(@Attribute('name') name:string) { 
    console.log(name);
};

Prints 'Matt' to the console.

like image 103
Matt Mackay Avatar answered Sep 20 '22 02:09

Matt Mackay