Angular, fail when wanting to export class

Question:

I'm just starting to learn to use Angular, I'm having a little problem with a simple exercise, which I can't understand.

It is about wanting to export a Class.

From the app.component.ts file and see it in app.component.html I am doing it exactly the same but the changes are not reflected.

Code in app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',

})

  export class AppComponent {

  nombre:string = " David ";  
  apellido:string = " Torre ";
}

(example names only)

and they should be seen here:

Code in app.component.html

<h1> Nombre: </h1> 
<h3> Apellido: </h3>

When saving the changes, the browser is updated but neither the first nor the last name appears, that is, the app.component.html does not read the class or something is missing.

I'd appreciate your help.

Greetings! 🙂

Answer:

Change your current view:

<h1> Nombre: </h1> 
<h3> Apellido: </h3>

For this :

<h1> Nombre:{{nombre}} </h1> 
<h3> Apellido:{{apellido}} </h3> 

You are assigning values ​​to your two variables but at some point you are passing these variables to the view, the way to do it is as follows: {{nombreVariable}}