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
4
votes
1 answer

SafeValue must use [property]=binding although I'm already using property binding

I have following HTML with a property binding:
In my component I add now some content with this line of code this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + otpStr ); But nevertheless I…
Sumafu
  • 179
  • 1
  • 3
  • 15
4
votes
1 answer

binding more than two property in fxml

Suppose I want to bind disable property of a button with a checkbox's selected property. I know this method to bind them in FXML:
Muzib
  • 2,412
  • 3
  • 21
  • 32
3
votes
1 answer

camelCase to lowercase html attribute conversion in Angular innerHtml binding

In my component I have a template literal string containing an HTML tag with an camelCase attribute in it: htmlString = ``; This string gets assembled as a property of an object in an array forEach loop. For…
Jean D.
  • 169
  • 3
  • 15
3
votes
2 answers

How to mix conditions and concatenation in [ngClass]

I have a div which needs to be blurred/reduced opacity on mouseenter. I've created 2 css class called .blur and .less-opacity Component.css .blur { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); …
Sixteen
  • 443
  • 1
  • 4
  • 23
3
votes
0 answers

Angular 6 Unit Test: Can't bind to since it isn't a known property of & is not a known element

I have an angular application with multiple components and modules. Here, I have tried to simplify and minimize the structure to help understand the issue. App Structure -app -Core -donut-card -donut-card-component.html …
Nirzari
  • 79
  • 1
  • 6
3
votes
2 answers

Angular 7, Enum and Input property binding

The issue is when binding an enum with a view template using @Input, the enum is being resolved to undefined. The component: enum FormAction { Insert, Update } @Component({ selector: 'app-member-editor', }) export class…
M. Ko
  • 563
  • 6
  • 31
3
votes
1 answer

Property binding map click event with dropdown select input in ngx-leaflet/Angular 2

I have a map with regional polygons. Below the map, I have a dropdown select input that dynamically reads in the polygon names as options. When the user clicks the regional polygons on the map, I want the dropdown select input to update with the…
Lauren
  • 1,035
  • 1
  • 14
  • 32
3
votes
2 answers

Angular 2 Links To External URLs Treated As Relative Paths For Routing

I've created a component which receives properties set on it's selector:
Eric
  • 2,061
  • 8
  • 28
  • 37
3
votes
2 answers

Property binding to the object does not work in Angular 2

I'm having the very strange behavior with Angular 2 property binding. Firstly, this is a Store class: export class Store { id: number; name: string; address: string; } This is component code: export class MyBuggyComponent implements…
Titan
  • 2,875
  • 5
  • 23
  • 34
3
votes
0 answers

Can Angular 2 use property-binding on a :before or :after element?

I am templating a page and need to bind to the border-color property of a div's css :before element. Is this possible in Angular 2? I know I could write some css and use class binding to toggle the color, but this requires all possible colors to be…
L.V.
  • 39
  • 2
3
votes
3 answers

JavaFX: check whether a text property is blank (and not just empty)

I want to have a button enabled or disabled based on whether a text field contains anything, and I want to implement this by using property binding. So at first I used the isEmpty() method on the text field's text property to create a boolean…
user3237736
  • 845
  • 1
  • 9
  • 24
3
votes
1 answer

Bidirectional property binding via expression or some approach to work around it

I am relatively new to property bindings and I am looking for some high-level advice on how to approach a design problem, which I will try to describe a simple example of here. Problem description The goal in this example is to allow the user to…
Museful
  • 6,711
  • 5
  • 42
  • 68
3
votes
1 answer

QML scope: property binding in child object failing

I'm new to QML and ran into a scope problem while going a button tutorial. I solved it but I don't understand why the code didn't work in the first place: Problem The following code gives Runtime reference errors when the button is hovered…
xpcoffee
  • 98
  • 1
  • 9
2
votes
1 answer

ASP.NET Core Web API: how to assign value of null to a missing property in the request when parameter binding

Using .NET 6.0. When trying to bind a parameter to a body of the request, I want to assign a value of null to the properties that aren't included in the request. Consider the following: public class SomeRequest { [JsonProperty(PropertyName =…
concentriq
  • 359
  • 2
  • 6
  • 16
2
votes
4 answers

direct binding to a property of property in Angular

I have a model like this: export class Person{ name: string; } Which is used in my component as follow: export class TestComponent { @Input() person : Person; constructor() { } } I want to set person name from html as below:
Efe
  • 800
  • 10
  • 32
1
2
3
…
10 11