Creating an Angular HTML template with reactive form:
<div class= "one">
<button class = "verticalButtonClass" (click) = "onClick()"> Label4 </button>
</div>
<div class = "two">
</button>
<button class = "horizontalButtonClass" (click) = "onClick()"> Label14 </button>
<button class = "verticalButtonClass" (click) = "onClick()"> Label15 </button>
</div>
<button class = "three"
[class.verticalButtonClass] = "m_bool_variable"
[class.horizontalButtonClass] = "!m_bool_variable"
(click) = "m_bool_variable.setValue( false )"> XCV </button>
CSS:
.verticalButtonClass
{
color: blue;
background-color: red;
display:block;
width: 100px;
border: 2px solid green;
margin-bottom: 2px;
}
.horizontalButtonClass
{
color: blue;
background-color: lightgreen;
float:left;
width: 100px;
border: 2px solid green;
margin-left: 2px;
}
.ts file:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-vertical',
templateUrl: './vertical.component.html',
styleUrls: ['./vertical.component.css']
})
export class VerticalComponent implements OnInit
{
m_bool_variable = new FormControl( false );
constructor() { }
ngOnInit(): void
{
this.m_bool_variable.setValue( true );
}
onClick()
{
console.log("asdasd")
}
}
Initially, the button shows a red color due to the variable being set to true. However, upon clicking the button, the color does not change to green.
Please provide feedback on the issue.