Unable to open home page of sidenav - css

I am using angular material design for making a website where I am unable to open home of side-bar. Please suggest me any solution.
https://stackblitz.com/edit/webkotactechsan-akntkf
used angular material design
<mat-nav-list>
<mat-card class="sidemenu">
<mat-list-item routerLink="home" routerLinkActive="active" >
<button mat-mini-fab color="primary" aria-label="Example icon-
button">
<mat-icon>home</mat-icon>
</button>
<span class="title"><b>Home</b></span>
</mat-list-item>
</mat-card>
unable to open home of side-bar

changes you need to do
change class name to export class HomeComponent in home.component.ts
spelling of home.component.scss is wrong, please correct it.
app.module.ts
import 'hammerjs';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { AppMaterialModule } from './app.material.module';
import { AppComponent, DialogContentComponent } from './app.component';
import { HomeComponent } from './home/home.component'
const appRoute: Routes = [
{ path: 'home', component: HomeComponent }
];
#NgModule({
imports: [
BrowserModule,
FormsModule,
AppMaterialModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoute)
],
declarations: [AppComponent, DialogContentComponent, HomeComponent],
entryComponents: [DialogContentComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Changes I did in this file.
a) - added import { RouterModule, Routes } from '#angular/router';
b) - added import { HomeComponent } from './home/home.component'
c) -
const appRoute: Routes = [
{ path: 'home', component: HomeComponent }
]
;
d) - added RouterModule.forRoot(appRoute).
e) - added HomeComponent in declarations.
Then add <router-outlet></router-outlet> in your app.component.html.
Let me know if you have any doubt.

Please add routes in AppModule
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
],{onSameUrlNavigation: 'reload'}),

Live Example: Stackblitz
There is something you need to do to solve this problem and implement some angular way to manage components
1. Implement routing: The reason behind it, when you click on home, you need to go some router. So, we implement routing to solve this problem.
const appRoute: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home'},
{ path: 'home', component: HomeComponent },
{ path: 'birthday', component: BirthdayComponent}
];
In the above code, we took two components for example purpose. When we call that route, it loads that component. For example we go home route it loads home component.
2. Divide into components: We are implementing single page application. So, we don't need to copy and paste all the sidenav, topbar in all components.
We kept those sidenav and topbar in app components and load app-content into router-outlet. you can see your inside codes of app-component in home and birthday component.
<div class="app-content">
<router-outlet></router-outlet>
</div>
3. Change routerLink to home and birthday, so that we need to show home, it loads home components and when we need to show birthday, it loads birthday component.
and finally thanks to piyush jain for solving common mistakes of your code.

Related

Angular/CSS onload how to get the default tab active [duplicate]

This question already has answers here:
Apply CSS to active router link [Angular 2]
(3 answers)
Closed 2 years ago.
I am creating a angular page which uses mat-tab-nav-bar and mat-tab-link.
dashborad.component.html
<div><nav mat-tab-nav-bar>
<a mat-tab-link [routerLink]="['/home']">Home</a>
<a mat-tab-link [routerLink]="['/admin']">Admin</a>
<a mat-tab-link [routerLink]="['/order']">Orders</a>
</nav></div>
<div><router-outlet></router-outlet></div>
AppRoutingModule
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { HomeComponent} from './components/home/home.component';
import { AdminComponent} from './components/admin/admin.component';
import { OrdersComponent} from './components/orders/orders.component';
const routes: Routes = [
{path: 'dashboard', component: DashboardComponent ,
children: [
{path: 'home', component: HomeComponent},
{path: 'admin', component: AdminComponent},
{path: 'order', component: OrdersComponent},
{path: '', redirectTo: 'home', pathMatch: 'full'}
]
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I am able to get page as I want except one thing. When the page gets loaded it shows the default page but the tab is not showing as selected. When I click a tab it becomes active and shows the same page.So would like to know how to achieve the requirement.
You can use routerLinkActive attribute for the same. Where this attribute adds a class name to active element and then you can add CSS to that class
Find the syntax:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
Css:
.active-link
{
Color: Blue;
Font-size: 17;
}

Angular Material 2 Could not find core theme

I know this is repeated question, but none of the solutions listed have helped me. I am getting the following error in Console: Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
What I have already done:
Added style key in angular-cli.json Suggested Here
Tried real path to CSS Suggested Here
And few others. I seem to have lost the tabs.
Now the thing that intrigues me is that I have the styles loaded as seen from here.
So is the class that material checks for: mat-theme-loaded-marker.
But I still can't seem to get it to load. Same error.
My AppModule is as follows:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule, Routes } from '#angular/router';
import 'hammerjs';
import { LoginComponent } from './components/login/app';
import { CookieService } from 'ngx-cookie-service';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule } from '#angular/material';
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{ path: '**', component: LoginComponent }
];
#NgModule({
declarations: [
LoginComponent
],
imports: [
FormsModule,
HttpModule,
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
),
MaterialModule
],
providers: [ CookieService],
bootstrap: [ LoginComponent ]
})
export class AppModule { }
PS: I am new to angular 4.
Developing Angular 2 with material design , we need to use some default css from the material component other wise it will show console error in your browser like Could not find Angular Material core theme..To avoid these problem we need to use one of the default theme in your material component.From the below image you can observe 4 prebuilt-themses in youe node_module.
. I am importing one of the themes in my styles.css file. Please look into below screen shot.After that reload the page then you can see there no error message show in your browser console. I hope it will help for you.

Routing when nested components are used on AppComponent

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

nested routing in angular2 not working

How to manage nested link in angular2.
for eg. I have two file :
app.component.ts
import { Component, forwardRef } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';
import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { TestComponent } from './test.component';
import { HeroDetailComponent } from './hero-detail.component';
import { LinkComponent } from './link.ts'
#Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<link111></link111>
<router-outlet></router-outlet>
`,
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES, forwardRef(() => LinkComponent)],
providers: [
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
HeroService
]
})
#RouteConfig([
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
},
{
path: '/detail/:id',
name: 'HeroDetail',
component: HeroDetailComponent
},
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
},
{
path: '/test',
name: 'Test',
component: TestComponent
}
])
export class AppComponent {
title = 'Tour of Heroes';
}
link.ts
import {Component} from 'angular2/core';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
#Component({
selector:'link111',
template:`
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
<a [routerLink]="['Test']">Test</a>
</nav>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
export class LinkComponent {
}
When [routerLink] define in app.component.ts in place of link111 tag it works, but when i separate it into different file it doesn't work.
please help me, Thanks.
When [routerLink] define in app.component.ts in place of link111 tag it works, because angular look routing from the
main root file(that is app.ts in your case), but when you separate it into different file it doesn't work because
than routing is defined in the root file but you are calling from childern (i.e not from parent). so to resolve this
change this like this -
<a [routerLink]="['./Dashboard']">Dashboard</a>
<a [routerLink]="['./Heroes']">Heroes</a>
<a [routerLink]="['./Test']">Test</a>
because If the route begins with ./, the router will look up the current components childern route from the root of the app.
From officials -
The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.
for more info refer this -
https://angular.io/docs/ts/latest/api/router/RouterLink-directive.html
How to use child routes in Angular 2.
Angular 2 router examples + #RouteConfig typing support

HashLocationStrategy does not produce # locations when routing?

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 {}

Resources