I have created toolbar and related components in my app
So here is layout I have created
<div fxLayout="column">
<div>
<app-platformbar ></app-platformbar>
</div>
<div>
<router-outlet></router-outlet>
</div>
</div>
platforbar component is common for all routing
<md-toolbar color="primary" >
<span><h2>{{Name}}</h2></span>
<span *ngIf="showLogoutBtn"><button md-raised-button color="warn" (click)="logout()">Logout</button></span>
</md-toolbar>
Inside platforBar component I have created one logout button which I don't want show on login( component) router
I have stored user object inside userservice to identify whether the user is logged in or not.
based on logged in I want to hide logout button.
So what I want to once user click on logout button from home router It will redirect it to login router but logout button from platformbar component is still there
So I want to hide it on login router.
Related
I have the below setup in my app.routing.module.ts.
app.component.html
<router-outlet></router-outlet>
modules/core/components/home/home.component.html
<mat-sidenav-container autosize>
<mat-sidenav #sidenav role="navigation">
<!--this is a place for us to add side-nav code-->
<wn-sidenav-list (sidenavClose)="sidenav.close()"></wn-sidenav-list>
</mat-sidenav>
<mat-sidenav-content>
<!--in here all the content must reside. We will add a navigation header as well-->
<wn-header (sidenavToggle)="sidenav.toggle()"></wn-header>
<main>
<!-- I want the components child components of the home components to be loaded here -->
<router-outlet></router-outlet>
</main>
<wn-footer></wn-footer>
</mat-sidenav-content>
Problem
When I access localhost:4200/campaigns or localhost:4200/dashboard their respective components are displayed but they aren't using their parent's (home.component.html) view
My Goal
I want all sub-components of the home component to be displayed in the router-outlet of the home.component.html and other components will be displayed in the router-outlet of app.component.html
I've had a setup like this before but I wasn't using modules at the time and it was working perfectly. Is there something about lazy loading that I don't understand?
When I access localhost:4200/campaigns or localhost:4200/dashboard the
components of the campaign module are displayed but they aren't using
their parent's (home.component.html) view
In your route config you are using redirectTo:'/dashboard' so that's why you will see the view of campaign modue
Sorry to revive a question. Im using Angular 7 and Im trying to use Router Link.
This is my app-routing-module
const routes: Routes = [
{ path: 'locations' , component : LocationManagerComponent },
{ path: 'locations/create' , component : CreateEditLocationComponent },
{ path: 'locations/create/:id', component : CreateEditLocationComponent },
{ path: '404' , component : PageNotFoundComponent},
{ path: '**' , redirectTo: '/404'}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
This is router link:
<a [routerLink] = "['/locations']" routerLinkActive="active"> test link </a>
When I click on link, nothing happens. The URL on browser changed but component is not loaded.
If I press F5, component is loaded and from that point on, routers link works.
I've tryed a lot of stackoverflow solution like writing link in any sort of variant like
<a routerLink="/locations" ...
<a [routerLink]= ['/locations'] ...
<a [routerLink]= "['/locations']" ...
With or without LinkAttive attribute. Putting
<base href="/">
in index.html etc....
Following this topic: TOPIC I've tried to include Router in my Layout component:
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
constructor(
private route : ActivatedRoute
) { }
[...]
but nothing changes.
The strange part is that after an F5, all routes works, even route to component not yet loaded.
In this topic TOPIC 2 the user resolved removing css class. I've tried to put my link in a completely cleaned component HTML and it not working (but still works after a refresh).
<p>
dashboard works!
<a routerLink = '/locations' routerLinkActive="active"> test link </a>
</p>
UPDATE: This is layout.component where route tag is.
I can't figure out how to have a Sidenav without having route-outlet inside it.
<mat-sidenav-container fullscreen>
<mat-sidenav #sidenav mode="over">
<div class="profile_container">
<span> User Name </span>
</div>
<mat-nav-list>
<mat-list-item><a [routerLink]="['/locations']" routerLinkActive="active"> Locations
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<app-header (toggleSidenav)="sidenav.toggle()"></app-header>
<div style="padding: 20px 10px 10px 20px;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
Note: this answer is based on the previous version of your question, before you added the code of layout.component.html. So, instead of layout component, I am using the simplified dashboard component.
The below is working for me in Angular 8.1.
app.component.html
<app-dashboard></app-dashboard>
means that the DashboardComponent is contained within (is the child of) the AppComponent.
No change to the default app.component.ts
dashboard.component.html
<p>
dashboard works!
<a routerLink = '/locations' routerLinkActive="active">
Locations test link </a>
</p>
<p><a routerLink = '/locations/create' routerLinkActive="active">
Locations/create </a></p>
<p><a routerLink = '/locations/create/:id' routerLinkActive="active">
Locations/create/:id </a></p>
<p>router-outlet is below:</p>
<router-outlet></router-outlet>
All the links are working with click and with manually entering the url (eg: http://localhost:4200/locations/create/:id) in the browser and with reload (F5).
New Components
Generated using the ng generate component command:
Dashboard
LocationManager
CreateEditLocation
PageNotFound
app-routing-module.ts
The same as your file, but also added import statements for the newly generated components.
I figured what cause the problem but I can't unserstand why and I was not able to reproduce in StackBlitz.
This was my app.component.html, the root of all app:
<main>
<!-- Showing All Site Pages -->
<span *ngIf='isLogged()'>
<app-layout style="height:100%"></app-layout>
</span>
<!-- Showing Login Page -->
<div *ngIf='!isLogged()'>
<router-outlet></router-outlet>
</div>
</main>
The App-Layout code is above.
THIS NOT WORKS!
I changed it with a simply:
<main>
<app-layout style="height:100%"></app-layout>
</main>
As you see from my question, Layout has its own router-outlet.
I think the problem is the two router-outlet tag. Maybe Angular is not able to understand thats they are mutually exclusive. Maybe when I was clicking on menu, for some reason, Angular was updating the "first" router-outlet encountered and only after a refresh (F5), when the isLogged was already triggered and the app-layout was loaded directly, Angular knows which router-outlet to use.
In the new Way all pages, even Login, has to be child of AppLayout so every Layout component that's exists only if logged, has to be manually hide with *ngIf='!isLogged()'
A little price to pay to have routes works.
I am building a web-page which starts with a simple login box which contains username,password with input boxes and two buttons with name login and register.
After clicking on the login button my page should route to another component which contains a navigation bar. It does route, no problem there. But the login box doesn't disappears after routing.
So after routing, navigation bar appears but the login box is still there.
APP.COMPONENT.HTML
<div class="background-image">
<router-outlet></router-outlet>
<div class="content2">
<h2 >Login</h2>
<br>
<form>
<div class="form-group">
<label style="margin: 5px">Username</label>
<input type="text" />
</div>
<div class="form-group">
<label style="margin: 7.5px">Password</label>
<input type="password" />
</div>
<div class="form-group">
<button (click)="onclick()" [disabled]="loading" class="btn btn-
primary">Login</button>
Register
</div>
</form>
</div>
</div>
APP.COMPONENT.TS
import { Component } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'welfareUI';
constructor(private router: Router){
}
onclick()
{
this.router.navigateByUrl('/navbar');
}
}
#Yash Anand Whatever #Adrita Sharma has said that is correct. You create a new login component and keep login html markup in login.component.html. keep only <router-outlet></router-outlet> in app.component.html Now when you click on login button it will only display you navbar.
Note- Make sure by default you have configured your route to go to login page in app.module.
routes: [{path : '', component: LoginComponent}]
This is because you have placed login html in app.component.html. <router-outlet></router-outlet> replaces the template of the current route, except that all the html in this file is constant.
You can create a separate login component. By default navigate to login component. Donot keep login html in app.component.html
Create separate component for login. Insert the HTML code in login.html and place router outlet in app.html file.
you have create loginComponent and place your login code inside it and then use router path to show login component as default
{ path: '',redirectTo: '/heroes',pathMatch: 'full'},
can refer below link
https://angular.io/guide/router#the-default-route-to-heroes
Create login component and load it initially into the router outlet.
routes: [{path : '', component: LoginComponent}]
After cliking on login button call different route you want to navigate.
routes: [{path : '/abc', component: abcComponent}]
There may be also a scenario when you are forcibly loading some component just before after router-outlet tag as in my scenario.
<div class="container">
<app-header></app-header>
<app-Product></app-Product>
<router-outlet></router-outlet>
</div>
On line number 2, I have all my router links. The main cause was line number 3 which is a component I was loading forcibly.
So after removing third line, everything was working properly. so if you are using Router-Outlet then let it decide about Components and their loadings.
I have an Angular 5 app where I have a list of projects. A user clicks on a project and the project details are displayed in a popup. The detail view is the child component. I pass the data to the detail view via #Input
Parent Component Template:
// User clicks this button to pass the "clicked upon" project to the onSelect() function.
<a class="uk-button uk-button-default" id="edit-btn" (click)="onSelect(project)" uk-toggle="target: #project-detail">View Project Details</a>
// Nested Child Component
<project-detail [project]="selectedProject"></project-detail>
Parent Component:
// The onSelect() function
onSelect(project: IProject) {
this.selectedProject = JSON.parse(JSON.stringify(project));
}
Child Component:
#Input() project: IProject;
Child Component Template:
<div id="fullName"><h1>{{project?.firstName + " " + project?.lastName}}</h1></div>
<div id="title"><h2>{{project?.title}}</h2></div>
<div id="summary"><p>{{project?.summary}}</p></div>
The Issue:
The issue only arises sometimes but if the user select Project A to view its detail and then selects Projects B to view its detail. The details view shows Projects A's data. No matter what project the user clicks on the the details view will only show Project A's detail.
What am I doing wrong?
I login using router-outlet tag in main app.component.html and if the login is successful i navigate to home page which is a different component consists of toolbar,side-nav and an area to display my dashboard content.Now in my home page i need another router-outlet where it displays the content upon choosing option in side-nav
my project structure is :
src
--login
----login.component.html
----login.component.ts
----login.component.css
--home-page
dashboard
--dashboard.component.html
--dashboard.component.ts
----home.component.html
----home.component.ts
----home.component.css
--application-details
app-overview
--app-overview.component.html
--app-overview.component.ts
----application.component.html
----application.component.ts
--users
----users.component.html
----users.component.ts
In my app.component.html has the following
<router-outlet></router-outlet>
In login.componnet.ts
upon success this.route.navigate(['/home-page'])
In my app-routing.module.ts
{ path:'', redirectTo:'/login',pathMatch:'full'},
{ path: 'login', component: LoginComponent},
{ path:'/home-page',component:HomePgaeComponent,
children:[
{ path:'',component:DashboardComponent,outlet:'dashboard'},
{ path:'user',component:UsersComponent,outlet:'user'}, ]
},
now as soon as i login based on success condition triggers the page
navigates to dashboard which is inside home page like this
<tool-bar></tool-bar>
<div>
<side-menu></side-menu>
<div class="main-content">
<router-outlet name="dashboard"></router-outlet>
<router-outlet name="user"></router-outlet>
</div>
</div>
here when i click upon the user option from side-nav it appends dashboard
content as well as "user" content.I have other options as well so for the
very first time it loads the landing page perfectly but when i select other
side-nav options all the other content is mixed up. So When i select options
from side-nav that respective content should be loaded in content area of
home page.another scenario is when i navigate to homepage i need to navigate
to another page when i perform some click action in dashboard component.
I have gone through tutorials and there they were passing some ids through
services and i have no idea how to do that. As per my knowledge i know that
passing outlet name into router-outlet will fetch the content of that
component likewise as many router i mention those many multiple routers will
be generated.
here when i click upon the user option from side-nav it appends
dashboard content as well as "user" content
<router-outlet name="dashboard"></router-outlet>
<router-outlet name="user"></router-outlet>
Both are children of same component
{ path:'/home-page',component:HomePgaeComponent,
children:[
{ path:'',component:DashboardComponent,outlet:'dashboard'},
{ path:'user',component:UsersComponent,outlet:'user'}, ]
},
Either you use same router outlet to render both dashboard and user or you have user router outlet inside dashboard and user is child of dashboard.