Angular variable in component not rendering in template - node.js

Question

Answer: I was using title: 'myTitle' instead of title = 'myTitle' ;(
I have just generated a new Angular app with one new component.
The problem is when i initialize a variable inside the class component and try to output it in the template using {{}} it is not showing variable's value.
In the main - App-Root Component it is written just like my code but there it is working :(
content.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.sass']
})
export class ContentComponent {
title: 'Content'
}
content.component.html
<h3>{{title}}</h3>

Answer 1

This is how you should bind values :
In component.ts :
public title:any = 'Content';
in component.html :
<h1> {{title}} </h1>
Here is a working example : demo

Answer 2

Use the angular variable as below
title: string="Content"
For eg
Try this, I have created a sample MyComponent class as below.
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
private myVariable:string="Hello World"
constructor() { }
ngOnInit() {
}
}
my-component.component.html
<p>
{{myVariable}}
</p>
Make sure add the above component in app.component.html which is the bootstrapping component as below
<app-my-component></app-my-component>
also in app.module as below in declartion section
declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
MyComponentComponent
],
bootstrap: [ AppComponent ]