I have a simple routing module, and then a template where I have links.
- The first link doesn't display as a clickable link, it shows as static text.
The second shows as link, only because of the href. Is this required?
app-routing.module.ts:
import {NgModule} from '#angular/core';
import {RouterModule, Routes} from '#angular/router';
import {AppComponent} from "./app.component";
import {ListComponent} from "./list/list.component"
const appRoutes: Routes = [
{path: 'List', component: ListComponent},
{path: 'Home', component: AppComponent}
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
app.component.ts
import { Component } from '#angular/core';
import {RouterModule} from '#angular/router';
import { AppRoutingModule } from './app-routing.module';
#Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
}
app.component.html
<a routerLink="/List" routerLinkActive="active">List</a> |
List
<router-outlet></router-outlet>
First of all the href is not required and the second one it should be routerLink not routerlink.
Try using lower caps in your links
Why would you need both links to point to the same thing
Related
I am new in Angular 2 and I am still in learning phase, but I stuck in a problem and not getting the solution to it. Please help.
I have made a view of a login, then a link to it after clicking the link it will redirect to home then clicking a link there it will redirect to some other view.
Below is my code structure:
app.routing.ts:
import { Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { UsersComponent } from './users/usercomponent';
export const routes: Routes = [
{ path: 'Home', component: HomeComponent },
{ path: 'Login', component: LoginComponent },
{ path: 'User', component: UsersComponent },
];
app.module.ts:
import { FormsModule } from '#angular/forms';
import { routes } from './app.routing';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/usercomponent';
#NgModule({
imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
declarations: [AppComponent, LoginComponent, HomeComponent, UsersComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts:
import { Component } from '#angular/core';
import { OnInit } from '#angular/core';
#Component({
selector: 'app-initializer',
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'Some NAme'
}
app.component.html:
<a routerLink="Login">Login</a>
<br />
<div>
<router-outlet></router-outlet>
</div>
login.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'login',
template: `
<h1><a routerLink="Home">Home</a>
<a routerLink="User">Users</a></h1>
<div>
<router-outlet></router-outlet>
</div>
`
})
export class LoginComponent {
constructor() {
}
}
The first page is working but after clicking home it is giving an error:
Cannot match any routes. URL Segment: 'Login/Home
I know that the link will be like / login, /home etc not like /login/home but how to implement it as I am not getting the solution for it and I am completely new to it.
Instead of giving only <h1><a routerLink="Home">Home</a>
you need to add / before the link like <h1><a routerLink="/Home">Home</a>.
I am following getting started guide https://ng-bootstrap.github.io/#/getting-started. trying the basic alert to work. it display the alert message not the style with bootstrap style sheet.
Any idea what I am missing here?
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,NgbModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.component.html
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<p>
<ngb-alert [dismissible]="false">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>
</p>
ng-bootstrap is only adding the functionality of the features, it's not adding actual styles. What you need to do is add the Bootstrap CSS as a dependency.
I created this StackBlitz with an example. In the external resources, I added the minified CSS URL and now the correct styling shows inside the application.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
My alerts won't close when I click the X button.
I've used angular cli to create a new app. I followed the instructions here to load bootstrap:
npm install bootstrap#4.0.0-alpha.6
Then I followed instructions here to load ng-bootstrap:
npm install --save #ng-bootstrap/ng-bootstrap
app.module.ts:
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent,
NavComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Testing...';
}
app.component.html
<app-nav></app-nav>
<ngb-alert>Alert</ngb-alert>
...
The alert shows up, and is styled properly, but it doesn't close when I click the X. Other components are working (tabset, dropdown). Am I missing something in app.component.ts?
You have to define a close event method in your component.
HTML:
<ngb-alert *ngIf="!closed" (close)="closed=true">Alert</ngb-alert>
Component:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Testing...';
closed = false;
}
I hope this will help you.
This is very late but might help others looking for a simple closeable alert. This component wraps Devansh's solution:
import { Component, Input } from '#angular/core';
#Component({
selector: 'app-alert',
template: '<ngb-alert [type]="type" *ngIf="open" (close)="open=false"><ng-content></ng-content></ngb-alert>',
})
export class InfoPanelComponent {
public open = true;
#Input() type = 'info';
}
usage:
<app-alert>I'm a closeable alert!</app-alert>
I am fairly new to Angular 2 and having a problem with Routing. I have just started to explore the Routing. I will explain the structure and what I have achieved so far,
app.router.ts
import { ModuleWithProviders } from '#angular/core'
import { Routes, RouterModule } from '#angular/router'
import { AppComponent } from './app.component';
import { LoginComponent } from "../app/login/login.component"
export const router: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: AppComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {UiSwitchModule} from 'angular2-ui-switch'
import { AppComponent } from './app.component';
import { AllReportsComponent } from "../app/all-reports/all-reports.component"
import { AvailableReportsComponent } from "../app/available-reports/available-reports.component"
import { NextReportsComponent } from "../app/next-reports/next-reports.component"
import { UrlsComponent } from "../app/urls/urls.component"
import { LoginComponent } from "../app/login/login.component"
import { TaskApi } from "../app/api/TaskApi"
import { routes } from "../app/app.router"
#NgModule({
imports: [
BrowserModule,
FormsModule,
UiSwitchModule,
HttpModule,
routes
],
declarations: [
AppComponent,
AllReportsComponent,
AvailableReportsComponent,
NextReportsComponent,
UrlsComponent,
LoginComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.html
<div>
<all-reports></all-reports>
<available-reports></available-reports>
<next-reports></next-reports>
<urls></urls>
</div>
app.component.ts (very simple)
import { Component } from "#angular/core"
#Component({
templateUrl: '../app/app.html'
})
export class AppComponent {
}
and login.component.ts
import { Component } from '#angular/core';
import { TaskApi } from '../api/TaskApi';
import * as models from '../model/models';
#Component({
styleUrls: ['/app/css/login.css'],
templateUrl: '../../app/login/login.html',
providers: [TaskApi]
})
export class LoginComponent {
}
Now it can be seen that I am using multiple directives on app.html and all the respective components are working fine.
The problem I am facing is when I introduce Routing then I am able to understand where to use "router-outlet". I have used it on Index.html but it does not work and gives error about ng-component. So to just test around I have used following in Index.html,
<body>
<base href="/">
<ng-component></ng-component>
</body>
After I do this then my AppComponent is displayed by default where the LoginComponent should be displayed by default. On console, It also gives me error "Error: Cannot find primary outlet to load 'LoginComponent'"
Kindly guide me if I am using 4 directives on App.html as mentioned above then in that case how the routing will work. To summarize, I want to display Login page on localhost:3009/login and localhost:3009 and I want to display Home page (app.html) in localhost:3009/dashboard and app.html is using 4 directives to display 4 child components on it.
Angular Routing
Since Angular is single page application the routing functionality
helps to display different view in single page.
How to use router to change view?
since app.component.html is main view for most user. Iam also consider app.component.html as main view.
Router-outlet
Router-outer helps to load the change in our angular application.
app.component.html
<router-outlet></router-outlet>
Set AppComponent Default page as router-outlet and create new Dashboard.component.html in your main view.
router.ts
import { ModuleWithProviders } from '#angular/core'
import { Routes, RouterModule } from '#angular/router'
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component';
import { LoginComponent } from "../app/login/login.component"
export const router: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', redirectTo: '', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
The problem with your code is that there is no 'router-outlet', so angular doesn't understand where to display the view.
The 'router-outlet' directive marks where the router displays a view.
In your code, since in app.component.ts you are using app.html so you should use <router-outlet> </router-outlet> in that HTML file.
Your app.html file should look like this:
<router-outlet> </router-outlet>
These below things should not be used in the app component HTML file. They should be used in their the corresponding components.
<all-reports></all-reports>
<available-reports></available-reports>
<next-reports></next-reports>
<urls></urls>
For further understanding, please refer to the official documentation of Angular2. They have explained it pretty well here https://angular.io/docs/ts/latest/guide/router.html
I'm running the Angular 2 beta.0 and I'm messing around with routing. Here's what I have
AppComponent:
import {Component, provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/common';
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
import {RouteConfig, Location, LocationStrategy, HashLocationStrategy, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {HomeComponent} from './components/home';
import {RowsComponent} from './components/rows';
import {ColumnsComponent} from './components/columns';
import {TableComponent} from './components/table';
#Component({
selector: 'app',
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES],
templateUrl: '/app/views/root.html',
providers: [ROUTER_PROVIDERS]
})
#RouteConfig([
{path:'/', name: 'Home', component: HomeComponent},
{path:'Rows', name: 'Rows', component: RowsComponent},
{path:'Columns', name: 'Columns', component: ColumnsComponent},
{path:'Table', name: 'Table', component: TableComponent}
])
class AppComponent {
public title = 'Responsive Layout';
public SelectedTab = 'Home';
constructor(location: Location) {
//location.go('Rows');
}
}
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
Every tutorial and API reference seems to point to me doing it just like I have above. I also have <base href="/app/" /> in the head of my index.html. Here are my RouterLinks
<ul class="nav navbar-nav">
<li [class.active]="SelectedTab=='Home'"><a [routerLink]="['Home']" (click)="SelectedTab='Home'">Home</a></li>
<li [class.active]="SelectedTab=='Rows'"><a [routerLink]="['Rows']" (click)="SelectedTab='Rows'">Rows</a></li>
<li [class.active]="SelectedTab=='Columns'"><a [routerLink]="['Columns']" (click)="SelectedTab='Columns'">Columns</a></li>
<li [class.active]="SelectedTab=='Table'"><a [routerLink]="['Table']" (click)="SelectedTab='Table'">Table</a></li>
</ul>
The routing behaves like it should. I get no errors. When I click on one of these entries in the bootstrap nav-bar I see that the views have switched out and are showing the proper templates and that their Components have run and are being bound to. However, despite using HashLocationStrategy in my bootstrap(...) call, the URLs are still "HTML5 Style": localhost:8080/app/Rows when it should be localhost:8080/app/#/Rows.
I believe I need to use the old # based way if I want my users to be able to bookmark a particular view and come back to it. If I allow for /app/Rows then refreshing the page causes a 404 because Rows doesn't exist in the app folder.
I tried your code, it works
my code below:
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {provide} from 'angular2/core';
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS, LocationStrategy,
HashLocationStrategy,
PathLocationStrategy,
APP_BASE_HREF, } from 'angular2/router'
bootstrap(AppComponent,[
ROUTER_PROVIDERS,
provide(APP_BASE_HREF, { useValue: '/' }),
provide(LocationStrategy, {useClass : HashLocationStrategy})
]);
-
app.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector:'second',
template: `<h1>second</h1>`
})
export class SecondComponent{}
#Component({
selector: 'home',
template: `<h1>hello</h1>`
})
export class HomeComponent{}
#Component({
directives : [ROUTER_DIRECTIVES],
selector: 'my-app',
template:
`<a [routerLink]="['Home']">home</a>
<a [routerLink]="['Second']">Second</a>
<router-outlet></router-outlet>
`
})
#RouteConfig([
{path :'/' ,name: 'Home', component: HomeComponent},
{path :'/second', name : 'Second', component : SecondComponent}
])
export class AppComponent { }
I find your problem, delete this line
providers : [ROUTER_PROVIDERS]
the details I don't know why, maybe angular can't not process when you are using ROUTERPROVIDERS twice, looking forward someone can help u
As per Angular 2 final release you have to include LocationStrategy to use HashLocationStrategy class by putting it inside providers of main #NgModule
by doing {provide: LocationStrategy, useClass: HashLocationStrategy}
app.module.ts
import {Component, NgModule} from '#angular/core';
import {
LocationStrategy,
HashLocationStrategy
} from '#angular/common';
#NgModule({
imports: [...], //put module to import here
declarations: [...], //put all component, pipe & directive
exports: [...], //module to export
//providers should reside here
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}