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
70
votes
12 answers

Angular [disabled]="MyBoolean" not working

I have some inputs (Checkboxes) and I want them to be disabled if my Booleans are true. But its not working... The funny thing is the submit button works just fine and thats the same method... myComponent.html
Kajot
  • 1,043
  • 2
  • 15
  • 22
38
votes
4 answers

Angular 2: Difference between property binding with and without brackets?

I noticed it's possible to property bind stuff without brackets. What is the difference? Typescript: import { Component, Input } from '@angular/core'; @Component( { selector: 'my-comp', templateUrl: ` input is {{foo}} ` }) export…
Martijn van den Bergh
  • 1,434
  • 1
  • 20
  • 40
33
votes
5 answers

Difference between interpolation and property binding

I have a component which defines an imageUrl property and in my template I use this property to set the url of an image. I tried this using interpolation and using property binding, both work, but I cannot find any differences between the two, or…
koninos
  • 4,969
  • 5
  • 28
  • 47
14
votes
4 answers

How to bind default value of input field to variable?

When clicking a certain button in the UI of my Angular App, a dialog opens where the user can update his/her personal information. For the sake of simplicity I restrict the code in the following to his/her username. That is, I assume the user can…
Tommy
  • 699
  • 4
  • 11
  • 26
10
votes
3 answers

Angular input [type]="'number'" always results in value being string

Normally, I would declare the input type this way (Which works great): How ever, I want the type to be dynamic, therefore I use property binding [type]="objectType". To simplify the…
Dino
  • 7,779
  • 12
  • 46
  • 85
8
votes
3 answers

Angular - Property Binding for height & width not working for Image

I am trying to make an example of property binding in Angular. I decided to take an image and then put all 3 attributes of it -- width, height, src by property binding. To my surprise, though there was no error, and image is being rendered by URL…
Deadpool
  • 7,811
  • 9
  • 44
  • 88
7
votes
1 answer

Why does binding a TextField to a property which is being updated on another thread end up with the application throwing errors?

I have a javafx application where I have multiple tabs (timer, stopwatch, clock) each with a separate Controller, and the user is able to add and independently start multiple timers using a start/stop button. I tried binding a TextField to a…
6
votes
1 answer

What do I do when two angular libraries have an attribute name conflict?

I'm writing an angular application using two libraries: ngx-bootstrap and ng-apexcharts. ApexCharts provides an angular component, called that takes an input called tooltip of type ApexTooltip. The html looks like this:
6
votes
1 answer

Difference between Xamarin.Forms BindableProperty and WPF DependencyProperty

Having a lot of experience in the WPF developement I'm now trying to create my first Xamarin.Forms application. I recognized that there is some equivalent to the WPF DependencyProperty called BindableProperty. They seem to be quite the same, so my…
5
votes
1 answer

TreeTableColumn.visible : A bound value cannot be set

I make a simple JavaFX application. In this application there is a treetable with 2 columns and a check box. If check box is selected column 2 will be visible, otherwise not visible. To do this I bound tree table column visible property to checkbox…
sancho
  • 598
  • 2
  • 8
  • 22
5
votes
1 answer

QML property temporary value without completely breaking binding

In QML (at least until version 5.61), property bindings are broken once a new value is assigned in a JavaScript context: Item { property bool sourceBool: property bool boundBool: sourceBool …
Kyle Strand
  • 15,941
  • 8
  • 72
  • 167
4
votes
1 answer

Is it ok to use the function Map.prototype.get() inside an Angular Template Expression?

I know that you should never use function calls within Angulars Template Expressions, otherwise they will be called permanently and the app will be extremely stressed. (see Medium - Why You Should Never Use Function Calls In Angular Template…
marvinfrede
  • 1,055
  • 5
  • 12
4
votes
1 answer

Angular Reactive Form, ControlValueAccessor vs. PropertyBinding

i have some form components which in fact just wrap some parts of a big formular into little pieces. I can imagine two ways to do that: a ControlValueAccessor or s simple PropertyBinding to pass in the FormControl to the…
4
votes
2 answers

SwiftUI show alert based on computed property

I'm trying to show an alert in Swift based on a computed property. Basically, whenever a user clicks on a button the value of "round" is updated. When more than 10 rounds have taken place, an alert shows. To do this, I've created a boolean variable…
FPL
  • 456
  • 4
  • 21
4
votes
1 answer

Angular @Input in child component also updates value in parent component

In angular the @Input on a property in combination with the [propertyNameInParent] = ”propertyNameInChild” allows us to bind the value of a parent property to a child property. Also know as one-way binding. Strangely, in my case it is also updating…
Bart Boersma
  • 244
  • 2
  • 13
1
2 3
10 11