Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding value to style

Tags:

angular

I'm trying to bind a color property from my class (acquired by attribute binding) to set the background-color of my div.

import {Component, Template} from 'angular2/angular2';

@Component({
  selector: 'circle',
  bind:{
    "color":"color"
  }
})
@Template({
  url: System.baseURL + "/components/circle/template.html",
})
export class Circle {
    constructor(){

    }

    changeBackground():string{
        return "background-color:" + this.color + ";";
    }
}

My template:

<style>
    .circle{
        width:50px;
        height: 50px;
        background-color: lightgreen;
        border-radius: 25px;
    }
</style>
<div class="circle" [style]="changeBackground()">
    <content></content>
</div>

The usage of this component:

<circle color="teal"></circle>

My binding is not working, but doesn't throw any exceptions either.

If I would put {{changeBackground()}} somewhere in the template, that does return the correct string.

So why is the style binding not working?

Also, how would I watch the changes to the color property inside the Circle class? What is the replacement for

$scope.$watch("color", function(a,b,){});

in Angular 2?

like image 985
user1613512 Avatar asked Apr 08 '15 13:04

user1613512


People also ask

How do you bind a value in style attribute?

Binding to a single stylelink To create a single style binding, use the prefix style followed by a dot and the name of the CSS style. Angular sets the property to the value of the bound expression, which is usually a string. Optionally, you can add a unit extension like em or % , which requires a number type.

Which are 2 types of data binding?

AngularJS provides two types of Data Binding: One-way data binding. Two-way data binding.

How do you bind ngStyle?

The square brackets around the directive indicate that the NgStyle directive has an input property also called ngStyle. It is a common pattern to define the directive and bind to its input property at the same time. This is how we can pass our style information to the ngStyle directive.

What is value binding in Angular?

Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button features, set paths programmatically, and share values between components.


3 Answers

Turns out the binding of style to a string doesn't work. The solution would be to bind the background of the style.

 <div class="circle" [style.background]="color">
like image 185
user1613512 Avatar answered Nov 14 '22 17:11

user1613512


As of now (Jan 2017 / Angular > 2.0) you can use the following:

changeBackground(): any {
    return { 'background-color': this.color };
}

and

<div class="circle" [ngStyle]="changeBackground()">
    <!-- <content></content> --> <!-- content is now deprecated -->
    <ng-content><ng-content> <!-- Use ng-content instead -->
</div>

The shortest way is probably like this:

<div class="circle" [ngStyle]="{ 'background-color': color }">
    <!-- <content></content> --> <!-- content is now deprecated -->
    <ng-content><ng-content> <!-- Use ng-content instead -->
</div>
like image 30
andreas Avatar answered Nov 14 '22 17:11

andreas


I managed to make it work with alpha28 like this:

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'circle', 
  properties: ['color: color'],
})
@View({
    template: `<style>
    .circle{
        width:50px;
        height: 50px;
        border-radius: 25px;
    }
</style>
<div class="circle" [style.background-color]="changeBackground()">
    <content></content>
</div>
`
})
export class Circle {
    color;

    constructor(){
    }

    changeBackground(): string {
        return this.color;
    }
}

and called it like this <circle color='yellow'></circle>

like image 23
kakaja Avatar answered Nov 14 '22 18:11

kakaja