Angular 2: An attribute's component value does not show in the html (DOM)) when I looad the...

I have a component in Angular 2 that looks like this:

@Component({
selector: 'gal-tour-summary',
template: 'Show variable: {{this.testVariable}}',
styleUrls: ['./tour-summary.component.css']
})
export class TourSummaryComponent implements OnInit {

cruise: any;
itineraries: any;
testVariable: string; //This is the variable i have created

constructor(private utils: UtilsService) {
testVariable = "Why this text does not appear in my page when the component is loaded??"; //Here, in the constructor, I put some value to my variable, so, it should appear in my html now, right?
}

ngOnInit() {
this.cruise = this.utils.linked['selectedBarco'];
this.itineraries = this.createIterDay(this.cruise.itinerarios[this.cruise.iterIndex].tipoItinerario.detalleItinerarioList);
console.log( 'Total de itinerarios: ' + this.itineraries.length );
}
}


The problem is that I'm trying to show the value of the testVariable in the HTML and this just does not work. I have tried everything. What could be the problem here? Has anyone of you had the same problem before?

Thanks in advance!

Continue reading...