Now let’s create a interface and replace the property string with a new type.

First create a new file for our interface.

export interface Hero {
  id: number;
  name: string;
}

In the heroes component refactor the code to use the interface and create an object.

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero'

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

Finally update the binding in the template to show the properties of the hero object.

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name:</span>{{hero.name}}</div>

Now visit the Angular App again to view the result.

Optionally you can also format the name with an uppercase pipe. Visit the official documentation to check it out!

Great work in creating your very first Angular app!