CODEWITHSUNDEEP
angular
core114
core114

Reputation: 5335

Angular page can't open

I'm beginner to Angular I'm try to make sample web site, I have some issue , I'm crated 2 pages , about.component.html and Contact.component.html

But I can't open those pages.

I want to know how to correctly set of link to that, and what is best to use for the develop web site Angular or Angular-js?

app-navbar.component.html

   <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"     (click)="toggleCollapsed()">
    <span class="navbar-toggler-icon"></span>
      </button>
     <div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link"  >DASHBOARD<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.component.html">About</a>
          </li>
       </div>
    </nav>

app-navbar.component.ts

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

@Component({
  selector: 'app-navbar',
  templateUrl: './app-navbar.component.html',
  styleUrls: ['./app-navbar.component.css']
})
export class AppNavbarComponent implements OnInit {
  constructor() { }
  date = new Date();
  ngOnInit() {
  }
}

app-routing.module.ts

 import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import {IndexComponent} from './index/index.component';

    @NgModule({
      exports: [ RouterModule ]
    })
    export class AppRoutingModule {}
    const routes: Routes = [
      { path: 'inde',
        component: IndexComponent,
      },
      // map '/' to '/persons' as our default route
      {
        path: '',
        redirectTo: '/index',
        pathMatch: 'full'
      },
    ];
    export const appRouterModule = RouterModule.forRoot(routes);

Upvotes: 0

Views: 375

Answers (2)

Nagesh Gandikota
Nagesh Gandikota

Reputation: 11

You Should Use routerLink <a routerLink="/about.component">

and Make Sure that u added that component in Routes{ path: 'about.component', component: AboutComponent },

Upvotes: 1

Jong-Hyen Kim
Jong-Hyen Kim

Reputation: 815

You should use routerLink. not href.

You can routerLink. after import RouterModule.

If you want to route to about component, you should write route info for about component in app-routing.module.ts.

Official document is here =>> https://angular.io/api/router/RouterLink

example code is (only required code)

app-navbar.component.html

<a class="nav-link" [routerLink]="['/about']">About</a>

app-navbar.module.ts

@NgModule({ imports: [RouterModule] })

app-routing.module.ts

const routes: Routes = [{path: 'about', component: AboutComponent}];

Upvotes: 2

Related Questions