Most people understand the concept of interpolation and how to interpolate a single variable with ease. However, what if we need to dynamically switch between two different variables? Let's say we have two class properties:
public first: string = '"first" variable activated';
public second: string = '"second" variable activated';
And we also have two radio buttons that are bound to the activeVariableName class property:
<input type="radio" value="first" [(ngModel)]="activeVariableName">
<input type="radio" value="second" [(ngModel)]="activeVariableName">
Typically, we would interpolate like this:
<h1>{{activeVariableName}}</h1>
However, this will only display the names first or second, which are the class property names.
So, the question arises: "How can we display the values of these properties instead of just their names?"
For a live example, check out this STACKBLITZ