Develop Reference

Why do I have to reload my page to get navigation bar in angular?

I have a navigation bar in app.component.html After I log in I'm taken to either employee home page or manager home page depending on the role I select. But when my home page opens in the browser, the navbar is hidden and I have to reload the page to make it visible. Please, help me.
I m including app.component.ts, app.component.html and login.ts files below.
app.component.ts
import { Component } from '#angular/core';
import { Router } from '#angular/router';
import { AuthenticationService } from './_services';
import { User } from './_models';
#Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent {
currentUser: User;
flag=false;
constructor(
private router: Router,
private authenticationService: AuthenticationService
) {
this.authenticationService.currentUser.subscribe(x => {
this.currentUser = x
if(this.currentUser.role=="Employee"){
this.flag=true;
console.log(this.flag)
}
});
}
logout() {
this.authenticationService.logout();
this.router.navigate(['/login']);
}
}
app.component.html
<!-- nav -->
<div *ngIf="flag">
<nav class="navbar navbar-expand navbar-dark bg-dark" *ngIf="currentUser">
<div class="navbar-nav">
<a class="nav-item nav-link" routerLink="/">{{currentUser.role}}</a>
<a class="nav-item nav-link" routerLink="applyforleave" >Apply for Leave</a>
<a class="nav-item nav-link" routerLink="my-leaves">My Leaves</a>
<a class="nav-item nav-link" routerLink="check-leaves">Leave record</a>
<a class="nav-item nav-link" (click)="logout()">Logout</a>
</div>
</nav>
</div>
<div *ngIf="!flag">
<nav class="navbar navbar-expand navbar-dark bg-dark" *ngIf="currentUser">
<div class="navbar-nav">
<a class="nav-item nav-link" routerLink="/manager-home">{{currentUser.role}}</a>
<a class="nav-item nav-link" routerLink="leave-request">Leave request</a>
<!--<a class="nav-item nav-link" routerLink="manager-home">Manager-Home</a>-->
<a class="nav-item nav-link" (click)="logout()">Logout</a>
</div>
</nav>
</div>
<!-- main app container-->
<div class="container">
<router-outlet></router-outlet>
</div>
login.ts
import { Component, OnInit } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { first } from 'rxjs/operators';
import { AuthenticationService } from '#app/_services';
#Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
loginForm: FormGroup;
loading = false;
submitted = false;
returnUrl: string;
error = '';
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService
) {
// redirect to home if already logged in
if (this.authenticationService.currentUserValue) {
this.router.navigate(['/']);
}
}
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required],
role: ['', Validators.required]
});
// get return url from route parameters or default to '/'
// this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
// convenience getter for easy access to form fields
get f() { return this.loginForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.loginForm.invalid) {
return;
}
this.loading = true;
this.authenticationService
.login(this.f.username.value, this.f.password.value, this.f.role.value)
.pipe(first())
.subscribe(
data => {
if(this.f.role.value=="Employee"){
this.router.navigate(['/']);
}
if(this.f.role.value=="Manager"){
this.router.navigate(['/manager-home'])
}
},
error => {
this.error = error;
this.loading = false;
});
}
}

Can not retrieve component template while routing

I am using Vuejs. This is main js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount('#app')
This is router:
import Vue from 'vue';
import VueRouter from 'vue-router';
import ControlExcel from './components/ControlExcel';
import Login from "./components/Login";
import blog from './components/blog';
import file from './components/file';
Vue.use(VueRouter);
let routes = [
{
path: '/control-excel',
name: 'ControlExcel',
component: ControlExcel
}
,
{
path: '/loginn',
component: Login
}
,
{
path: '/blog',
name: 'blog',
component: blog
}
,
{
path: '/file',
name: 'file',
component: file
},
];
export default new VueRouter({
mode: 'history',
base: "",
routes
})
and this app vue:
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!-- <ControlExcel />-->
<!-- <component v-bind:is="component" />-->
<span>abcd</span>
<li class="nav-item">
<router-link class="nav-link" to="/control-excel">exce</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/loginn">loginn</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/blog">blog</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/file">file</router-link>
</li>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Login from './components/Login.vue'
// import ControlExcel from "./components/ControlExcel";
// import Login from "./components/Login";
import file from './components/file';
import Vue from 'vue';
Vue.component('file',file);
// import DownloadExcel from './components/DownloadExcel'
export default {
name: 'app',
components: {
// Login,
// ControlExcel,
}
,
data() {
return {
// component: "Login"
}
}
}
</script>
At localhost:8080, i see those:
abcd
exce
loginn
blog
file
When i click any of them, URl changes. for example
http://localhost:8080/file
for file but it does not bring component.
for example for file:
{
path: '/file',
name: 'file',
component: file
},
that component file.vue
<template>
<div class="blog">
<h1>fasfsasd</h1>
</div>
</template>
<script>
export default{
name:'file'
}
</script>
<style scoped>
</style>
This is directory:
src
-components
--blog.vue
--ControlExcel.vue
--file.vue
--Login.vue
router.js
main.js
App.vue
Why cant it bring template also?
There is dynamic component but i dont want to use it and it does not seem best practice, like this:
<component v-bind:is=”currentComponent”></component>
https://blog.logrocket.com/how-to-make-your-components-dynamic-in-vue-js/

Your Vue-Router does not change the main component, but only puts the component of the URL that matches into <router-view></router-view>, which you don't have.
You need to add it to your main component.
For example like this:
<div id="app">
<span>abcd</span>
<ul>
<li class="nav-item">
<router-link class="nav-link" to="/control-excel">exce</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/loginn">loginn</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/blog">blog</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/file">file</router-link>
</li>
</ul>
<router-view></router-view>
</div>

How to open component content into bootstrap modal?

I have component that i want to inject into modal window using ng bootstrap features so i have imported modules into app also added into entrypoints as suggested in ng-bootstrap docs its giving me little hard time. what is correct approach basically i am calling modal from existing component and that component content should load into modal window. any help will be appreciate.
modal.component.ts
import {Component, Input} from '#angular/core';
import {NgbModal, NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class NgbdModalContent {
#Input() name;
constructor(public activeModal: NgbActiveModal) {}
}
detail.component.ts
import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '#angular/core';
import {NgbModal,NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css'],
})
export class DetailComponent implements OnChanges{
constructor(private detailService: DetailService,private ngbModal: NgbModal) {};
onClick(evt){
const modalRef = this.ngbModal.open(Component);
}
}
detail.component.html
<div class="card card-outline-info">
<div class="card-header bg-info"><h5>Detail</h5><button (click)="onClick($event)"></button></div>
<div class="card-block">
<div class="table-responsive" style="cursor: pointer">
<generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
</div>
</div>
</div>
app.module.ts
import { NgbModule,NgbActiveModal } from '#ng-bootstrap/ng-bootstrap';
import { NgbdModalContent } from './NgModal/modal.component';
#NgModule({
declarations: [
AppComponent,
StreamComponent,
SearchComponent,
DetailComponent,
SlaChartComponent,
NgbdModalContent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
HttpModule,
ChartsModule,
BrowserAnimationsModule,
NgbModule.forRoot()
],
providers: [StreamService,DatePipe,
SearchService,
DetailService,
ChartService,AuthService,NgbActiveModal,
{provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true}],
entryComponents: [NgbdModalContent,DetailComponent],
bootstrap: [AppComponent]
})

Try this, I'm not a fan of your modal.component.ts file so scrap that and remove the NgbdModalContent from your app.module.ts
yourModal.component.html
<ng-template #theModal let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 *ngIf="type == 0" class="modal-title">Header</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" id="cancel-edit-btn" class="btn btn-primary" (click)="c('Close click')">Cancel</button>
</div>
</ng-template>
yourModal.component.ts
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewChildren, ElementRef, Renderer2 } from '#angular/core';
import { NgbModal } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'app-custom-modal',
templateUrl: './yourModal.component.html',
styleUrls: ['./yourModal.component.scss']
})
export class EditNotesComponent implements OnInit {
#Input() name: string;
#ViewChild('theModal') theModal: ElementRef;
constructor(private modalService: NgbModal) {}
ngOnInit() {
}
showModal() {
this.modalService.open(this.theModal, { size: 'sm', backdrop: 'static'});
}
}
detail.component.html
<div class="card card-outline-info">
<div class="card-header bg-info"><h5>Detail</h5><button (click)="yourCustomModal.showModal()"></button></div>
<div class="card-block">
<div class="table-responsive" style="cursor: pointer">
<generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
</div>
</div>
</div>
<app-custom-modal #yourCustomModal [name]="name"></app-custom-modal>
detail.component.ts
import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '#angular/core';
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css'],
})
export class DetailComponent implements OnChanges{
name: string;
constructor(private detailService: DetailService) {
this.name = 'John Doe';};
}

Child Routing Not Working in Angular 4

I have problem with my child routing in Angular 4. It isn't working while the parent routing is working. When i hover over the "Create New Account", it still is on the Account. It shows localhost:4200/account. It must be localhost:4200/account/create-account. The Parent route is on app.component.ts while the child route is on the account.component.html
//sidebar.component.ts
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li routerLinkActive="active" class="dropdown" appDropdown><a style="cursor: pointer;" routerLink="/account">Account</a>
<ul class="dropdown-menu">
<li><a style="cursor: pointer;">Create New Account</a></li>
<li><a style="cursor: pointer;">View Account</a></li>
</ul>
</li>
<li routerLinkActive="active"><a routerLink="/news">News</a></li>
</ul>
//app-routing.module.ts
import{ NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AccountComponent } from './account/account.component';
import { CreateAccountComponent } from './account/create-account/create-account.component';
import { ViewAccountComponent } from './account/view-account/view-account.component';
import { AccountStartComponent } from './account/account-start/account-start.component';
import { NewsComponent } from './news/news.component';
const appRoutes: Routes = [
{ path: '', redirectTo: '/account', pathMatch: 'full' },
{ path: 'account', component: AccountComponent, children: [
{ path: '', component: AccountStartComponent },
{ path: 'create-account', component: CreateAccountComponent },
{ path: 'view-account', component: ViewAccountComponent },
]},
{ path: 'news', component: NewsComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
//app.component.ts
<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
//account.component.html
<div>
<router-outlet></router-outlet>
</div>

You need to configure the routerLink
<li><a style="cursor: pointer;" routerLink="./create-account">Create New Account</a></li>

auth0 stops works after updating angular angular2-jwt and a bunch of node modules

So when i began updating my node modules and other things to the newest version. My auth0 login stopped work correctly even though before the update. It was working fine. But now my login doesn't even work correct any longer and i don't know what happened. When I looked into the localstorage and I saw that the email_verified returning false despite the login is correct. I suspect that it a problem with the angular2-jwt being updated but not completely sure.
https://toddmotto.com/angular-2-authentication based the login off this article but don't know what changes happened.
// services/auth.service.ts
import { Injectable, NgZone } from '#angular/core';
import {Router} from '#angular/router';
import { tokenNotExpired } from 'angular2-jwt';
// We want to avoid any 'name not found'
// warnings from TypeScript
declare var Auth0Lock: any;
#Injectable()
export class AuthenticationService {
constructor( private _router: Router, private _zone: NgZone) {}
lock = new Auth0Lock('clientid', 'domain');
login() {
this.lock.show((error: string, profile: Object, id_token: string) => {
if (error) {
console.log(error);
}
// We get a profile object for the user from Auth0
localStorage.setItem('profile', JSON.stringify(profile));
// We also get the user's JWT
localStorage.setItem('id_token', id_token);
});
}
logout() {
// To log out, we just need to remove
// the user's profile and token
localStorage.removeItem('profile');
localStorage.removeItem('id_token');
}
loggedIn() {
return tokenNotExpired();
}
}
navbar.component.html
<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
<a class="navbar-brand display-nav" [routerLink]="['/home']"></a>
<div class="nav navbar-nav">
<a class="nav-item nav-link active" [routerLink]="['/home']">
Home <span class="sr-only">(current)</span>
</a>
<a class="nav-item nav-link" [routerLink]="['/about']">About</a>
<a class="nav-item nav-link" (click)="auth.login()" >Login</a>
<a class="nav-item nav-link" (click)="auth.logout()" >Logout</a>
</div>
<div class="nav navbar-nav float-xs-right">
<db-cart-menu ></db-cart-menu>
</div>
</div>
</div>
</nav>
navbar_component.ts
import { Component } from '#angular/core';
import { AuthenticationService } from '../services/authentication.service';
#Component({
selector: 'db-navbar',
templateUrl: 'app/navbar/navbar.component.html',
providers: [ AuthenticationService ]
})
export class NavbarComponent {
constructor(private auth: AuthenticationService) {}
login() {
this.auth.login();
}
logout() {
this.auth.logout();
}
loggedIn () {
this.auth.loggedIn();
}
}