I am new to Angular.
I have to create a dashboard webpage with a top navbar and also a
sidebar. I have to remove my sidebar and navbar when I click the child
link and show the new page, which is an accordion form, in a complete new
screen without any navbars.
Could some one please tell me how to go about this? I tried to do it with
paths set up in the child module but it wasn't working.
app-routing.module.ts
/**
* New typescript file
*/
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {NotificationformComponent} from
'./notificationform/notificationform.component';
const routes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
// {path: 'nform', loadChildren:
'app/notificationform/notificationform.module#NotificationFormModule'},
// {path: 'nform', component: NotificationformComponent}
// { path: 'detail/:id', component: HeroDetailComponent },
// { path: 'heroes', component: HeroesComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Home Module
import {NgModule} from '@angular/core';
import {FormsListCompletedComponent} from
'./forms-list-completed.component';
import {FormsListInprogressComponent} from
'./forms-list-inprogress.component';
import {FormsListCompleteComponent} from
'./forms-list-complete.component';
import {RouterModule} from '@angular/router';
import {FormsListHomeComponent} from './forms-list-home.component';
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: FormsListHomeComponent,
children: [
{
path: 'complete',
component: FormsListCompleteComponent,
outlet: 'homeRouter'
},
{
path: 'inprogress',
component: FormsListInprogressComponent,
outlet: 'homeRouter'
},
{
path: 'completed',
component: FormsListCompletedComponent,
outlet: 'homeRouter'
}
]
},
])
],
declarations: [
FormsListCompletedComponent,
FormsListInprogressComponent,
FormsListCompleteComponent,
FormsListHomeComponent
],
providers: []
})
export class HomeModule {
}
home.component.html
---------------------------------
<div >
<p>Welcome</p>
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"
role="navigation">
<ul class="nav">
<li><a [routerLink]="[{outlets: {homeRouter:
['inprogress']}}]">In Progress</a></li>
<li><a (click)="displayLinks('complete')">Directory</a></li>
<li><a
(click)="displayLinks('completed')">Completed</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-9">
<router-outlet name="homeRouter"></router-outlet>
</div>
</div>
</div>
**app.component.html**
------------------------------------
<div class="container">
<div class="wrapper">
<app-header></app-header>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-collapse">
<!--<ul class="nav navbar-nav">-->
<!--<!–<li><a routerLink='/home'
routerLinkActive='active'>Home</a></li>–>-->
<!--<!–<li><a routerLink='/nform'
routerLinkActive='active'>Notification–>-->
<!--<!–Form</a></li>–>-->
<!--<li>Welcome</li>-->
<!--</ul>-->
<ul class="nav navbar-nav">
<li><a>Welcome</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/logout">Logout</a></li>
</ul>
</div>
</nav>
<div>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>
Nothing shows up in the next page when I click on 'Inprogress' or
'Completed' or 'Directory'.
How do I display the whole screen when I click on any of those links.
Any links to similar examples would help too.
Thanks!
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
