Internal page navigation using Angular 7 - javascript

I have a full working ASP.Net Zero application navigation working. Now I created an internal page I want to navigate, something like this:
With the following structure:
Content of test.component.html:
<div [#routerTransition]>
<div class="m-content">
<div class="m-portlet m-portlet--mobile tests">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">Spellings</h3>
</div>
</div>
</div>
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
There I defined the <router-outlet> to navigate using the "Navigation Area" of the pic.
I created a custom routing navigation defined in spelling-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { TestComponent } from './test-list/test.component';
import { QuestionComponent } from './questions/questions.component';
import { TestContainerComponent } from './test-list/test-container/test-container.component';
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: TestComponent,
children: [
{ path: 'test-container', component: TestContainerComponent, data: { permission: 'Pages.Tenant.Tests' } },
{ path: 'questions/:testId', component: QuestionComponent, data: { permission: 'Pages.Tenant.Tests' } }
]
}
])
],
exports: [
RouterModule
]
})
export class SpellingRoutingModule { }
This works to load the main test.component.html, but can't fill the <router-outlet> inside it to navigate to some inner Components.
Please, how to fill the <router-outlet> object of test.component.html with a default one?
See the src folder content here:
Dropbox link to src folder

Related

Vuejs: Displaying Selected Item On a Page You are On

I need some help displaying a selected an item on the page you are on. I have three component Home, Product, and Index. The Index component is Global component which have a list of items with a route-link attached to them to got to the Product Page (Component) and display the item that was click. I am passing the item in the route-link as params to be able to access the item on the Product page. I am using the Index Component on the Home component to display all item. And when I click an item from the Index component from the Home page, it go to the Product page and display that item. That part is working fine, but when I am on the Product page and I click an item from the Index component, it is not displaying the clicked item in the Product page. I really need some help how to solve this problem.
Main.js code
import Vue from 'vue'
import App from './App'
import router from './router/routes'
import Index from './components/Index'
Vue.component('list-items', Index)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
Route.js File
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../pages/Home'
import Product from '../pages/Product'
Vue.use(Router)
export default new Router({
routes: [
{
path: '' || '/',
name: 'Home',
component: Home
},
{
path: '/product',
name: 'Product',
component: Product,
props: true
}
],
mode: 'history'
})
Home.vue component
<template>
<div class="container-fluid p-0">
<list-items />
</div>
</template>
<script>
export default {
name: 'Home',
data: () => ({
})
}
Product.vue component
<template>
<div class="container-fluid p-0">
<div class="container-fluid py-5">
<div class="row">
<div class="col-md-7">
<div class="col-md-12">
<img v-bind:src="item.url" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4 margin-padding-right">
<div class="col-md-12">
<h3>{{$route.params.product.name}}</h3>
<h5 class="price">${{item.price}}</h5>
</div>
</div>
</div>
<br>
<div class="container-fluid">
<div class="col-md-12 related-item">
<h5>Related Items</h5>
</div>
<list-items />
</div>
</div>
</div>
<script>
export default {
name: 'Product',
props: ['product'],
data: () => ({
quantity: 1,
item: {
name: '',
url: ''
}
}),
mounted () {
if (this.product) {
this.item.name = this.product.name
this.item.url = this.product.image
}
},
watch: {
change: function (newValue, oldValue) {
this.item.name = newValue.product.name
}
}
}
</script>
<style lang="scss" scoped>
</style>
This is an image of what I am trying to achieve.

Router outlet inside primary router outlet doesn't display anything with no errors

Cant seem to find what the issue is here as I'm getting no errors from Angular.
I am trying to get a router-outlet inside the primary router-outlet to display a component. Im correctly selecting the router but it is not showing the component i have selected in the second outlet.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: 'dashboard', loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule) }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
dashboard-routing.module.ts
// ...
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'forms', component: FormsComponent, outlet: 'sidebar' },
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
dashboard.component.html
<app-header></app-header>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item [routerLink]="[{ outlets: { sidebar: ['forms'] } }]" routerLinkActive="active">Forms</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<main class="bfa-main">
<router-outlet name="sidebar"></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>
The routerlink is correctly selected and displays an active class, as well as a link too:
http://localhost:4200/dashboard/(sidebar:forms)
However there is nothing displayed here and no errors, when i am expecting to see the forms component inside the inner router outlet named sidebar
Does anyone know what I'm missing here?
Thanks
Decided to have the dashboard as a wrapper instead for each of the dashboard components using ng-content
<app-header></app-header>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item [routerLink]="['forms']" routerLinkActive="active">Forms</a>
<a mat-list-item [routerLink]="['users']" routerLinkActive="active">Users</a>
<a mat-list-item [routerLink]="['posts']" routerLinkActive="active">Posts</a>
<a mat-list-item [routerLink]="['pages']" routerLinkActive="active">Pages</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<main class="bfa-main">
<ng-content></ng-content>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>

Angular 4 Application Home Page not Showing Login screen

For one of the Angular 4 application that I'm working on, I have the following app.component.html:
<app-layout-header></app-layout-header>
<router-outlet></router-outlet>
<app-layout-footer></app-layout-footer>
This is my app.routing.ts:
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { AuthGuard } from './shared/index';
const appRoutes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
The app.module.ts is:
import { BrowserModule } from '#angular/platform-browser';
import { ModuleWithProviders, NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import {
ApiService,
AuthGuard,
FooterComponent,
HeaderComponent,
JwtService,
ProfilesService,
SharedModule,
UserService
} from './shared';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { routing } from './app.routing';
#NgModule({
declarations: [
AppComponent,
FooterComponent,
HeaderComponent,
LoginComponent,
RegisterComponent,
],
imports: [
SharedModule,
BrowserModule,
routing
],
providers: [
ApiService,
AuthGuard,
JwtService,
ProfilesService,
UserService
],
bootstrap: [AppComponent]
})
export class AppModule { }
I want this bit of html (this is actually my login.component.html) to be displayed when the user access the application at http://localhost:4200/
<div class="auth-page">
<div class="container page">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
<label for="username">Username</label>
<input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
<div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
</div>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
<div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
</div>
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary">Login</button>
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
</form>
</div>
</div>
</div>
</div>
But strangely when I access the url http://localhost:4200, I see the following screen:
So there are two problems:
Why is the URL http://localhost:4200/#/ instead of http://localhost:4200/
What is wrong with what I'm doing so that I can get the Login html getting displayed?
Please help!
1) # is added properly due to your router configuration (useHash: true):
const rootRouting: ModuleWithProviders = RouterModule.forRoot([], { useHash: true });
2) To show LoginComponent you have to:
use redirectTo property of default path
or manually call routerService.navigateByUrl("/login") call from AppComponent or HomeComponent or AuthGuard

Links not clickable in Angular2

I have a angular2 component:
import {Component} from '#angular/core';
#Component({
selector: 'sidenav',
templateUrl: './sidenav.html',
styleUrls: ['./sidenav.scss'],
})
export class SidenavComponent {
constructor() {
}
}
I want to include it in another component, which works fine except that the links don't work:
<li><a routerLink="/portfolio">Portfolio</a></li>
I include the component simply with the tag
<sidebar> </sidebar>
what is the missing part. I included the router but it didn't help.
I use the generated jhipster app and want to add a sidenav only for authorized Users. There are many modules and routes defined including each other, but I just don't find the right way.
I include the component simply with the tag
<sidebar> </sidebar>
Isn't it supposed to be <sidenav> </sidenav>?
Maybe u r not using RouterModule correctly?
RouterModule.forRoot(<urRouteDataStructure>)
this is the setting in the imports-array.
I am sharing my code below for reference:-
(I am using bootstrap 3.x)
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
...
...
import {Routes, RouterModule} from '#angular/router';
const appRoutes: Routes = [
{ path:'server',
component: ServerComponent
}
];
#NgModule({
declarations: [
AppComponent,
ServerComponent,
BasicHighlightDirective,
BetterHighlightDirective,
UnlessDirective
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes)
],
providers: [LoggingService, AccountsService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<!-- <li role="presentation"> Server Comp </li> -->
<li role="presentation"><a routerLink="/server"> Server Comp </a> </li>
<li role="presentation"><a routerLink="/"> Home Comp</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
Heres my output screenshot:

Angular2 attribute directive does not work in components rendered in RouterOutlet?

I have been using NG2 since the final release 2.0.2 now 2.4.1. Attribute Directives work in simple case like what in the tutorial at https://angular.io/docs/ts/latest/guide/attribute-directives.html, and all tutorials I could find are also with simple case of rendering the directive declared immediately in app.component.html. However, I have components rendered in router outlet as defined in app.component.html like this:
<nav>
<a routerLink="/" routerLinkActive="active"> </a>
</nav>
<div class="jumbotron">
<div class="container">
<div class="col-sm-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
And I declare the directive in app.module.ts:
#NgModule({
...
declarations: [
//** Root level components
AppComponent,
HomeComponent,
...
HighlightDirective,
],
And the feature modules with routes are declared in app-routing.module.ts:
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'ml_payment', loadChildren: 'app/payment/payment.module#PaymentModule', canActivate: [AuthGuard] },
{ path: 'account', loadChildren: 'app/account/account.module#AccountModule', canActivate: [AuthGuard, AdminGuard] },
{ path: 'wip', component: WIPComponent },
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: '**', component: NotFoundComponent },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
When the nested components are rendered, NG2 runtime do not render myHighlight into respective style tag of HTML. I just wonder if I had missed something or NG2 custom attribute directives do not work with RouterOutlet?
use routerLinkActive as [routerLinkActive]="['active']"
<nav>
<a routerLink="/" [routerLinkActive]="['active']"> </a>
</nav>
<div class="jumbotron">
<div class="container">
<div class="col-sm-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
#ZZZ, did you put the directive in the "exports" section of the module where it was declared? Today I had a similar issue when I forgot to export a directive.
Good luck.

Categories