I tried to declare my component using directives ([]), but it didn't work out. I then knew that in RC6 it has been deprecated. So I added the component at the declarations @ngmodule but it still not working any idea why?
edit ::
that is my module.ts ::
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {NavBarComponent} from "./Components/navbar/navbar.component";
import {AboutComponent} from "./Components/about/about.component";
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ,NavBarComponent , AboutComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
that is my app.component.ts ::
import { Component } from '@angular/core';
//import {AboutComponent} from "./Components/about/about.component";
@Component({
selector: 'my-app',
template: `<h1>{{name}}</h1>`,
})
export class AppComponent { }
Now tha NavBar component has .html file ::
<nav class="navbar navbar-inverse ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Spotify</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div>
</nav>
And Navbar.component.ts ::
import {Component} from "@angular/core";
@Component({
moduleId: module.id,
selector: 'navbar',
templateUrl : 'navbar.component.html',
})
export class NavBarComponent { }
i am using the angular quick start ,there is no output error but when i reload the page no change happen and the navigate bar design doesn't show
You seem to missing where your components should really be loaded, so you need to add <router-outlet> somewhere, that would in your case be app.component. If you want the navbar shown all the time, also place that tag in the app.component
So your app.component should look something like this:
import { Component } from '@angular/core';
import {NavBarComponent} from "./Components/navbar/navbar.component";
@Component({
selector: 'my-app',
template: `
// Navbar always shown
<navbar></navbar>
// Your other routed components will load here
<router-outlet></router-outlet>
`,
})
export class AppComponent { }
Please check the official docs for routing for closer explanations!