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

Button enable binding to combobox

I need a button disabled untill 3 textboxes are empty and no selection is done on a combobox. I wrote the following XAML code:
0
votes
1 answer

JavaFX bind PathTransition's element coordinates

I'd like to have a path transition in such a way, that the path behaves relative to the window size, even when the size is changed during the animation. Furthermore, when the animation is completed, the animated element should use the stay at the…
user6397910
0
votes
2 answers

Angular property binding target can change component property

I am new to Angular 4, and while reading the official tutorial https://angular.io/tutorial, I came across the Master/Detail component (https://angular.io/tutorial/toh-pt3), there they did a property binding between the heroes list component and the…
imaibou
  • 122
  • 1
  • 10
0
votes
1 answer

Can't bind property. @Input fail bet. parent and child component

I am having difficulties with binding properties from parent to child this is my home.ts (parent) import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { NewComponent } from…
user4422315
0
votes
0 answers

@Inputting data from a 'param' component; has not selector tag for property binding

So im in a bit of a pickle here. I have an ArtistsComponent, which has a display of a bunch of music artists. When you click on an img, it routes to an ArtistPageComponent: Also, here are the path for the components as well { path: 'artists',…
0
votes
0 answers

Angular component does not react on boolean property changes

I have subscription on event emitter in my component initialization ngOnInit(): void { this.linksService.droppableZoneActivation.subscribe( (activate: boolean) => { this.activated = activate; } …
0
votes
1 answer

Executing a function on catcing input from Property Binding in Angular

@Input() UpItem: Item ; On catching something in UpItem I want to execute a function when some property is passed from parent to child.
shubhamsjmit
  • 81
  • 2
  • 6
0
votes
1 answer

button property binding "disable" not working in angular 4

I have created a component name servers. In servers.component.ts i have created a variable name allowServer with bool value false (to disable button in start of the app). In constructor, I have used javascript setTimeout function to change the value…
0
votes
2 answers

How to pass a array value as color in Angular 4

I'm new in Angular and in stackoverflow. I need to know if can I pass the value of an array in the element bidding in Angular 4. Basically I want change the color of the #jediSign if the student are or not a jedi! This is the template:
0
votes
2 answers

Property binding not detecting change within observable

The selectedIndex attribute is bound to the index property. The view is not updated when index property is changed within the AngularFireAuth observable as shown below. Why not? It works fine anywhere outside the observable. The .ts and .html files…
0
votes
1 answer

Can't Bind Property in Angular 4

Why is there a problem in binding a property on the same component? I already added Input() but still doesn't work. Do i need to put Input() even though it is on the same component when binding? //output.component.ts import { Component, OnInit}…
Joseph
  • 7,042
  • 23
  • 83
  • 181
0
votes
0 answers

Property Binding not working on some properties

I am trying to make components that can be repuposed and configurable. In this example I am using input fields and property binding some of its value along with some of my own custom configurations. Template
Bromox
  • 567
  • 2
  • 9
  • 29
0
votes
0 answers

Angular 2 striping off inline css styling

I have a html content generated from my web api. This is passed on as json data to angular 2. I am using property binding to "inject" this content into a view. The process goes through successfully but angular 2 strips off all css styling This how I…
Tee-Jay
  • 736
  • 2
  • 9
  • 28
0
votes
0 answers

Render HTML instead of plain text in Angular2

I have a component with encapsulationset to ViewEncapsulation.None and a property named question which contains text from server call, which might contain HTML tags like Main Question and some more text in my view I use the…
koninos
  • 4,969
  • 5
  • 28
  • 47
0
votes
0 answers

Angular 2 Doesn't support input type="datetime-local"

I have noticed that angular 2 property bind doesnt work when using input type="datetime-local" is there any solution or workaround in order to bind input date with seconds to a property?
LazyCreep
  • 211
  • 2
  • 14
1 2 3
10
11