data binding is not working in angular 4

Question

This is probably too basic but I haven't been able to figure it out.

I'm working with angular 4. I have a folder within my "app" folder called competitions.

Here I have my competitions-detail.component.ts file like this:

import { Component }  from '@angular/core'

@Component({
  moduleId: module.id,
  selector: 'competitions-detail',
  templateUrl: 'competitions-detail.component.html',
  styleUrls: [ 'competitions-detail.component.css' ]
})

export class CompetitionsDetailComponent {
    title: 'Competencias';
}

Then I have my template file:

<md-toolbar color="primary">
  <md-icon>data_usage</md-icon>
  <span><strong>LA M10</strong></span>
  <span class="spacer"></span>
  <span><strong>COMPETENCIAS</strong></span>
</md-toolbar>

<h1>COMPETENCIAS</h1>
<h1>{{title}}</h1>
<h2>COMPETENCIAS</h2>
<h2>{{title}}</h2>

And this is the Result

As you can see, the template is working fine, if I hardcode the values they are displayed, I even have some material design components there but for some reason, the simple data binding {{ }} is not displaying the title value.

What am I missing?

Answer 1

You are assigning a type, and not actually setting the field:

title: string = 'Competencias';

The way you had it, made sure the field title could only have the string value: Compentencias

Answer 2

Class is not an object . It should be = instead of :

export class CompetitionsDetailComponent{
    title = "Competencias";
 }

Answer 3

Try

export class CompetitionsDetailComponent { title = 'Competencias'; }

Instead of

export class CompetitionsDetailComponent { title: 'Competencias'; }

Answer 4

I think variable assignment and declaration have problem.

title: string = 'Competencias'

Answer 5

The variable assignment It should be = instead of :

export class CompetitionsDetailComponent{
    title = "Competencias";
}