Angular 2 class property value and binding

Question

I am new to Angular 2 and I am making my first test app.

I tested class property and binding.

To check how classes work in Angular, I used many different ways, and every one works.

First, created a class on my app.component.css

.setGreenBackGroundClass
{
    background-color: green;
}

I created one variable on my app.component.ts

assignedVar = 'setGreenBackGroundClass';

I assigned the var´s name to the class and everything works right; class is assigned.

<ul [class]="assignedVar">

or

<ul class="{{assignedVar}}">

Both work fine.

Last way to test is passing directly the class name to the URL, and it works right too:

<ul class="setGreenBackGroundClass">

But my doubt comes when I tried to test binding and double binding. I wanted to create an input where I can write the value of the class property, and then, the color changes (i know, maybe it´s pretty nonsense and it would be better done with a select tag or something similar, but just wanted to check it).

On my app.component.html view I have:

<input type="text" name="miBind" [(ngModel)]="binding" />

<!--on this div I check double binding works right-->
<div>{{binding}}</div>


<ul [class]="binding">

    ....

The problem is at

<ul [class]="binding">

I have checked, and it works when you write on the textbox the css class name:

input--> setGreenBackGroundClass

This works. The background color changes.

But when I do:

input-->assignedVar

It doesn´t work, and my question is: why, since assignedVar has the class name assigned, it doesn´t work?

The resulting HTML that I get from the inspector when I type "assignedVar" is:

<ul _ngcontent-c0="" class="setGreenBackGroundClass">
    <li _ngcontent-c0="">
    <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io  /tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
    </li>
</ul>


<ul _ngcontent-c0="" class="setGreenBackGroundClass">
    <li _ngcontent-c0="">
    <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
    </li>
</ul>

<ul _ngcontent-c0="" class="setGreenBackGroundClass">
    <li _ngcontent-c0="">
    <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
  </li>
</ul>

<input _ngcontent-c0="" name="miBind" ng-reflect-name="miBind" ng-reflect-model="assignedVar" class="ng-valid ng-dirty ng-touched" type="text">

<div _ngcontent-c0="">assignedVar</div>

<ul _ngcontent-c0="" class="assignedVar">
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
    </li>
</ul>

And I can't figure out why the text on my input value is here taken as simple plain text (but not as the variable name) for the class value , and when I write that variable name directly on the code (like I did on first examples) there is no problem and it knows it is a CSS class name.

Answer 1

input--> setGreenBackGroundClass

This works. The background color changes.

But when I do:

input-->assignedVar

It doesn´t work.

When you input 'setGreenBackGroundClass', this is what happens

<ul class='setGreenBackGroundClass'>

which is what you expect to work.

When you input 'assignedVar', this is what happens

<ul class='assignedVar'>

and you don't have a css class with the name 'assignedVar' that's why it is not working. You confused the string assignedVar with the variable assignedVar

Update 1

With a stackblitz project provided, I modified your code to make your second <ul> to bind to a getter function.

Why I bind to a function?

Because I want to override the binding variable to return a assignedVar variable whenever you type a assignedVar string.

Checkout this updated stackblitz project

Hope this helps.