Angular, confuse with console result

I am very new to the angular. I'm confused with the console output of a angular app. First, see what I have did so far!

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
                {{getCourse()}}
            `,
   styleUrls: ['./app.component.css']
})
export class AppComponent {
    code = ['C++', "Python", "JAVA", 'ReactJS', "Angular"];
    getCourse()
    {
        for(let i = 0 ; i < (this.code).length ; i++)
        {
            console.log(this.code[i]);
        }
    }
}

Here, the AppComponent has one array code and one method getCourse(). I used inline template and data bind with getCourse() and this method iterate over the array and print on console. Here, is my console output. See, here the same output repeated 4 times, not 1 time. Why? I wrote the logic to iterate the loop for one time.