Search code examples
htmlangularproperty-binding

What does the following property binding do `[class.selected]=true`

I read the following post but that does not seem to answer my question. In one of the tutorials that I am following I came across this

<div class=row [class.selected]=true>
</div>

Now I noticed the .selected class declaration in the css show below

.selected {
 border-right : 5px solid #EEE;
 border-bottom : 5px solid #EEE;
}

Now my question is what does the following code do ?

 <div class=row [class.selected]=true>
    </div>

Does it replace "row" with "selected" ? What exactly happens to the html/style with this ?

Solution

  • It produces

    <div class="row selected">
</div>

    while this code

    <div class=row [class.selected]=false>
</div>

    would result in

    <div class="row">
</div>