Using a new angular project:
Consider the following app.component.ts (notice the redSelected boolean)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
redSelected = false;
}
It has the following app.component.html
<h2>Choose:</h2>
<label>
<input type="radio" name="color" value="red" (change)="redSelected = true">
<span>Red</span>
</label>
<label>
<input type="radio" name="color" value="blue" (change)="redSelected = false">
<span>Blue</span>
</label>
<p *ngIf="redSelected">Whoooorraay! Red is here.</p>
Whenever the Red radiobox is selected, the final paragraph appears. When the Blue radiobox is selected the paragraph disappears.
How is it possible that angular detects this change and updates the component html view?
Note: I tried replacing the final paragraph with
<p [ngClass]="hideOrShow()">Whoooorraay! Red is here.</p>
where hideOrShow() is defined (inside app.component.ts) as the following:
hideOrShow() {
if (this.redSelected === false) return 'hidden';
}
and hidden is a css class (inside app.component.css)
.hidden {
display: none;
}
The same behavior continues... Angular is able to detect the change in the value of redSelected and updates the component view html automatically.
My question is: what triggers this re-evaluation? what is being re-evaluated exactly?
Thanks in advance!
