in browser shows empty out put is not displaying

Question

File structure as follows

 

->src

->app

->app.component.css

->app.component.html

->app.component.spec.ts

->app.component.ts

->app.Module.ts

->app.student.ts

 

i am using Nested Component ,in one component i am using another component.

 

app.component.html code as follows

 

Welcome to {{ firstName }},{{ lastName }},{{ gender }},{{ qualification }}!

 

app.component.ts code as follows

 

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

@Component({

selector: 'my-app',

template: `

<div>

<h1>{{pageheader}}</h1>

</div>

//Here is the nesting happens by calling another component selector

<my-student> </my-student>

`,

})

export class AppComponent {

pageheader: string = "Student Details"

}

app.student.ts code as follows

import { Component } from "@angular/core"

//decorater declaration

@Component({

selector: 'my-student',

templateUrl: './app.component.html',

})

//class creation

export class StudentComponent {

firstName: string = "Karthik";

lastName: string = "Elumalai";

gender: string = "Male";

qualification: string = "MCA";

}

app.module.ts code as follows

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { StudentComponent } from './app.student'

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

 

When i run the above code shows output as empty in the browser

 

what is the mistake in my above code.