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.