Stack Overflow
Stack Overflow

Questions tagged [property-binding]

Property binding is the primary way of binding data in Angular. The square braces are used to bind data to a property of an element, the trick is to put the property onto the element wrapped in brackets: [property] .

Usage

  • This tag is intended for questions which ask about Angular Property Binding

Code Sample

Let's consider an example where we are binding the value property of the input element to a component's myText property.

import { Component } from "@angular/core";
@Component({
   selector: 'app-example',
   template: `
              <div>
              <h3 [value]='myText'></h3>       
              </div>
              `
})
export class AppComponent {
  myText: string = "Hello World";
}

Result:

Hello World


Asking a question

  • Mention you want to update/bind DOM elements to property in compoent.
  • Reduce your issue to a small example
  • Post a reduced working code on plnkr.co or stackblitz.com
  • If there's a bug (or some unintentional behavior), try to troubleshoot the problem. (If it's a bug report, please create a new issue at Angular's Github repository instead.)

Learn more

To learn more about Angular Material, visit the following resources to help you get started:

161 questions
0
votes
2 answers

How to re-apply a property binding without re-render the component?

Context A business component A rely on a business service which say either: true: all collapsable components should be open by default. false: all collapsable component should be closed by default. A pass this knowledge (a calculation, not a…
Flyout91
  • 782
  • 10
  • 31
0
votes
1 answer

Getting the center of a circle that using property binding Javafx

How can I find the center of a circle after binding it to the pane? circle.centerXProperty().bind(pane.widthProperty().divide(2)); circle.centerYProperty().bind(pane.heightProperty().divide(2)); I used the code above to bind the properties of the…
Omar Jarkas
  • 1
0
votes
2 answers

Why isn't my input bound property changing in my angular child component?

I have a parent component with two children. The parent component has a property which is actually a dictonary like this: dict = {a: 0, b: 0, c: 0}; I do input binding so that both of the child components can have access to dict.
Alexander Soare
  • 2,825
  • 3
  • 25
  • 53
0
votes
0 answers

Property change not updating bound control property

I have made a test application using Winforms and C#. 2 textbox's Text properties are bound to the same custome property. custom property implements an event PropertyChangedEventHandler as is described in this post. the issue is that then I modify…
r9guy
  • 65
  • 7
0
votes
2 answers

src property binding not working in angular6

I have two urls for two different images, on one the [src] property binding is working while on the other one it is not. What can possibly be the reason? works: doesn't work:
Furquan Saifi
  • 1
  • 2
0
votes
1 answer

When custom drawing a Checkbox, how can I bind my Ellipse Shape's Fill color to the CheckBox's Foreground?

I'm trying to make a CheckBox that looks like a little LED light: brightly colored when checked, gray when unchecked. In my app I need such status lights with different LED colors. I'm told the "WPF Way" is to find the control that works almost…
Charles Jenkins
  • 340
  • 4
  • 10
0
votes
1 answer

I want to make a conditional property bind for 2 inputs

I have a list of animals for different types like cats and dogs. when I choose an animal in the list, for edition, I need to assinged the value to the child component. The Child Component have two inputs in the edit.ts: @input cat:animal, @input…
alexandre monassa Moreira
  • 79
  • 10
0
votes
1 answer

Fetching Property in Angular 7

I want to use the property of the input element when form is submitted. I read the concept of Template reference variable which helps in achieving this case in Angular. When i assign 'id' attribute of input element with a value and later when i…
Venkateswaran
  • 19
  • 4
0
votes
1 answer

Why do we need to bind to SRC to get an image from the TypeScript file?

I got an array to which I store name and some other String properties. I also have the "ImagePath". The solution I found was that in the image source we use square brackets [ ] around the source. I do know that it means property binding, but why do…
Andrew
  • 57
  • 9
0
votes
3 answers

Property Binding as function parameter in Html template of Angular 7

I have an issue in html template. I want to call a function and pass a param to function. This param is a property in component class. How could I bind this property in function call. I have tried different options but could not get…
TAB
  • 1,944
  • 8
  • 28
  • 45
0
votes
0 answers

How do property binding works with directives in angular?

So I understand how basic property binding works in angular for elements like input, but I came across some code that was using node module ng-drag-drop which comes with a set of its own custom directives. In html of a component there is a div…
Limpuls
  • 856
  • 1
  • 19
  • 37
0
votes
1 answer

JavaFx property binding with multiple objects on on screen

I use JavaFx with property binding. I got a object 'Person' with the properties 'name' and age. These objects are stored in a ObservableList. The properties are bound to labels on the gui. When I change the person in the ListBox the data also change…
oadna
  • 3
  • 2
0
votes
1 answer

Delay with property binding in NativeScript Angular app

I am building a NativeScript Angular app with the nativescript-pedometer plugin. I set up an Observable to report new steps. When new steps are reported, I log the number to the console, update a property on the Home component and call…
Dan B.
  • 1,451
  • 2
  • 14
  • 23
0
votes
1 answer

How to do nested loops inside template view in angular2+

I need to view different array indexes and their values inside my template. I have this object: vegetables = [ {name: 'Carrot', type: 'vegetable'}, {name: 'Onion', type: 'vegetable'}, {name: 'Potato', type: 'vegetable'}, {name:…
Limpuls
  • 856
  • 1
  • 19
  • 37
0
votes
1 answer

Binding background color to ng2-avatar component

I have an ng2-avatar component with a background color bound to a property of my component. The background color is initially set correctly but will not update when my component's background color property is changed. It seems like this is a bug…
Stack Underflow
  • 2,363
  • 2
  • 26
  • 51
1 2 3
…
10 11