I am new to Angular 2. I am trying a small program to display list of courses.The desired output is

My first Angular App

Display courses

this is title of courses

. Maths

. Science

. English

The output displayed on chrome is attached as below.
[![output](https://i.stack.imgur.com/5NTbc.png)](https://i.stack.imgur.com/5NTbc.png)
I would be great if anyone can help point what's wrong in the program and how can I get the desired result.

```
import {Component} from 'angular2/core'

    @Component({
        selector: 'courses',
        template: `
        <h2> Display courses</h2>
        {{title}}
        <ul>
           <li *ngFor="#c of coursesName">
           {{coursesName}}
           </li>
        </ul>
        `

    })
    export class CoursesComponent{
        title:string="this is title of courses";
        coursesName = ["Maths", "Science", "English"];
    }

```