0

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>
Improve this question
3
  • 1
    show us the code Commented Apr 6, 2020 at 12:35
  • 1
    We need to see some code :) Commented Apr 6, 2020 at 12:35
  • sorry, i have added code <3 Commented Apr 6, 2020 at 12:39

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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 ]
Improve this answer

Comments