Why does my navbar component not work in Angular?

Question

I am very new to Angular. In my Angular app I have a navbar folder in src/app/components/navbar and my navbar.component.ts file looks like this:

navbar.component.ts

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

  constructor() { }

  ngOnInit() {
  }

navbar.component.html

<p>nav bar is working</p>

index.html

<app-navbar></app-navbar>

but when I run localhost server it is not displaying nav bar is working in my index.html. how can I fix this?

Answer 1

You should use your component in app.component.html page like this -

<app-navbar></app-navbar>

Not in index.html because this is not your bootstrap component.

you always use <app-root></app-root> component in index.html file because this is the component which bootstraped in main module like this -

bootstrap: [AppComponent]

Answer 2

在app-module.ts导入导航栏， app-module.ts <app-navbar></app-navbar>放入app.component.html