I'm trying to use Angulars router to route from my landing component to my "Events" component via a button click on the landing page. Upon this button click, I want to display only the Events component, however when I click the button (or append "/events" to the end of the URL), the Events component displays below the landing component, displaying both components.
app.component.html:
<app-landing></app-landing>
landing.component.html:
<div class="landing-container">
<div class="landing-search">
<p> selected city: {{ selectedCity }}</p>
<button mat-raised-button color="secondary" (click)="getCombinedResponses()"><a routerLink="/events">Search</a></button>
</div>
</div>
<router-outlet></router-outlet>
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingComponent } from './landing/landing.component';
import { VenueCardsComponent } from './venues/venues.component';
const appRoutes: Routes = [
{ path: 'events', component: VenueCardsComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Your router-outlet needs to be in app.component.html in your case and you need to have a route for your landing page as well.
app.component.html:
<router-outlet></router-outlet>
landing.component.html:
<div class="landing-container">
<div class="landing-search">
<p> selected city: {{ selectedCity }}</p>
<button mat-raised-button color="secondary" (click)="getCombinedResponses()"><a routerLink="/events">Search</a></button>
</div>
</div>
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingComponent } from './landing/landing.component';
import { VenueCardsComponent } from './venues/venues.component';
const appRoutes: Routes = [
{ path: '', component: LandingComponent },
{ path: 'events', component: VenueCardsComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Related
I am working on a dummy app with jsonplaceholder, I am getting all posts but i am unable to get post with dynamic id like posts/${id}. How can i achieve this. kindly help.
I am having basic generate angular app.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<h1>{{title}}</h1>
<!-- -->
<main *ngIf="!some; else elseBlock">
<section *ngFor="let dt of data">
<aside>ID: <span id="id">{{dt.id}}</span></aside>
<aside>Title: {{dt.title}}</aside>
<button (click)="linkto()">click to view</button>
<br>
<hr>
</section>
</main>
<ng-template #elseBlock>
<section>
<aside>ID: {{data2.id}}</aside>
<aside>Title: {{data2.title}}</aside>
<aside>Body: {{data2.body}}</aside>
<button (click)="linkto()">back</button>
<br>
<hr>
</section>
</ng-template>
app.component.ts
import { Component } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(private http : HttpClient){
this.showPost();
}
data :any = [];
id: any;
data2 :any = {};
some: boolean;
showPost() {
this.http.get('https://jsonplaceholder.typicode.com/posts')
// clone the data object, using its known Config shape
.subscribe(data => {
console.log('**************',data);
this.data = data
});
}
linkto(){
this.showPost2();
this.some = !this.some;
}
showPost2() {
this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
.subscribe(data2 => {
this.data2 = data2;
});
}
}
i am also interested if is there any shorter way to do this?
like simple on one page . i am making get requests but after this i will be making post, put , patch and delete too. on app.component.html page itself.
You should send id from html to component using linkto(dt.id)
Then you can use that id as a parameter in your component methods.
HTML:
<main *ngIf="!some; else elseBlock">
<section *ngFor="let dt of data">
<aside>ID: <span id="id">{{dt.id}}</span></aside>
<aside>Title: {{dt.title}}</aside>
<button (click)="linkto(dt.id)">click to view</button>
<br>
<hr>
</section>
</main>
<ng-template #elseBlock>
<section>
<aside>ID: {{data2.id}}</aside>
<aside>Title: {{data2.title}}</aside>
<aside>Body: {{data2.body}}</aside>
<button (click)="linkto(dt.id)">back</button>
<br>
<hr>
</section>
</ng-template>
Component:
linkto(id){
this.showPost2(id);
this.some = !this.some;
}
showPost2(id) {
this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
.subscribe(data2 => {
this.data2 = data2;
});
}
I have searched for this question a lot but still unable to find the solution.
In my app, the after successful logging in the page shows the side nav and toolbar. When an item(component) is clicked in side nav, the respective component is displayed but toolbar does not and also side nav.
Here are the files I have written,
app.component.html
<div *ngIf="user_id !== undefined">
<app-applayoutmodel></app-applayoutmodel>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>
app.component.ts,
import { Component, Input, OnInit } from '#angular/core';
import { Router, NavigationExtras, ActivatedRoute , Params} from '#angular/router';
import * as globals from '../app/pages/models/myGlobals';
import { LoginService } from '../serviceProviders/loginservice';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'app';
user_id: string = undefined;
constructor(
private route: ActivatedRoute,
private router: Router,
private loginservice: LoginService ) {}
ngOnInit() {
if ( this.router.url.length === 1) {
this.user_id = undefined;
} else {
console.log('Url ' + this.router.url);
const urlParam = this.router.parseUrl(this.router.url).queryParams['property_id'];
this.loginservice.user_id = urlParam;
this.user_id = this.loginservice.user_id;
}
// subscribe to router event
}
}
app-routing.module.ts,
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { LoginComponent } from './pages/login/login.component';
import { AppComponent } from './app.component';
import { DashboardComponent } from '../app/pages/dashboard/dashboard.component';
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'applayout', component: AppComponent},
{path: 'dashboard', component: DashboardComponent}
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
applayoutmodel.component.html,
<div class="page">
<mat-toolbar color="primary" class="toolbar">
<div>
<button class="menuButton" mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
<span class="companyName">YAANA</span>
</div>
</mat-toolbar>
<mat-sidenav-container class="sideContainer" fullscreen autosize style="top: 80px !important;">
<mat-sidenav #sidenav mode="push" opened="false" class="sideNav">
<mat-nav-list>
<nav class="menuItems">
<a routerLink="/dashboard">Dashboard</a>
</nav>
<nav class="menuItems">
<a routerLink="/login">Login</a>
</nav>
</mat-nav-list>
</mat-sidenav>
</mat-sidenav-container>
</div>
applayoutmodel.component.ts,
import { Component, OnInit } from '#angular/core';
import { Router, NavigationExtras } from '#angular/router';
#Component({
selector: 'app-applayoutmodel',
templateUrl: './applayoutmodel.component.html',
styleUrls: ['./applayoutmodel.component.scss']
})
export class ApplayoutmodelComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
}
Here are the output screens,
After successful loggin in, the firt page is,
When I click dashboard which is listed inside side nav, the output screen is,
But what I need even though after clicking dashboard item inside side nav, the dashboard component view should be displayed along with toolbar and side nav button just like in output screen one.
Please help me to solve this issue, I am not getting any ideas.
Please try this:
- in your app.component.html remove ngIf:
<div>
<app-applayoutmodel></app-applayoutmodel>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>
- in your app-routing.module.ts you need to put your dashboard component as child component of AppComponent like this:
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: '', redirectTo: '/login', pathMatch: 'full'},
{ path: 'applayout',
component: AppComponent,
children: [
{path: 'dashboard', component: DashboardComponent }
]
}
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
This is because you want your applayoutmodel component always to be availible even if you click on 'dashboard'. This is where your router-outlet jumps-in:
he renders your Dashboard component in place of tag, and preserves applayoutmodel component rendered and intact. Please try this and let me know...
new to routing with angular 4/5, I am following the angular tutorial on their website.
I have an angular application which I want to be able to have two separate pages. Right now main page is localhost:8870/dr3-interface and I want a new page with new components on localhost:8870/dr3-interface/manage_cycles_instances
My issue is when I click on my link Manage cycles instances it shows all my app.component components and not only the components I decided to show on my /manage_cycles_instances. I tried to hide them using *ngIf but without results. Any ideas?
app.component.html :
<div style="text-align:left">
<h1>{{ title }}</h1>
</div>
<nav>
<a routerLink="/manage_cycles_instances" routerLinkActive="active"> Manage cycles instances</a>
</nav>
<router-outlet></router-outlet>
<div *ngIf="router = '/dr3-interface'">
<h2><d-table></d-table></h2>
</div>
<br/>
<form-upload></form-upload>
<br/>
<list-upload></list-upload>
app-routing.module.ts :
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { DataTableComponent } from './datatable/data-table.component';
const appRoutes: Routes = [
{ path: 'manage_cycles_instances', component: DataTableComponent },
/* TO DO : page error
{ path: '**', component: ... }
*/
];
#NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
app.module.ts :
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import {
//all material modules
} from '#angular/material';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { DataTableComponent } from './datatable/data-table.component';
import { DetailsUploadComponent } from './upload/details-upload/details-upload.component';
import { FormUploadComponent } from './upload/form-upload/form-upload.component';
import { ListUploadComponent } from './upload/list-upload/list-upload.component';
#NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientModule,
//material modules
],
declarations: [
AppComponent,
DataTableComponent,
DetailsUploadComponent,
FormUploadComponent,
ListUploadComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Your routes should be this :
const appRoutes: Routes = [
{ path: 'dr3-interface', component: DrThreeComponent, children: [ // I don't know which component to use for this route
{ path: 'manage_cycles_instances', component: DataTableComponent },
]},
];
Because you want to have nested routes, you should make nested routes. Note that your DrThreeComponent should have a router-outlet, since it has children.
You won't need to use conditions in your code, because the router will handle the display of your components.
Explanation :
You start by having an index.html file. It only contains a tag in its body, usually app-root. This tag will be replaced by your bootstraped component, which is usually AppComponent.
If you want to route your application, you will need to use the router. Several steps are required :
1 - Put a router-outlet tag in the component that will route others (here, app component)
2 - Create your routes (you did it, and I corrected it in my answer).
3 - in case of child routes (routes seprated by slashes, like yours), put a router outlet tag in every parent component, and a children property into the corresponding routes.
In your case, if we were to make a tree, this would look like this :
index.html
|
|--app component (with router outlet)
|
|--DrThree component (with router outlet)
|
|--ManageCycles component
So basically, index will show app, then app will show DrThree, then DrThree will show ManageCycles.
So I am having an issue with two components which have to do with routers/routing/router-outlets. In my login form when the user enters the info(email and password) and clicks login they should be routed to the dashboard.
See below the login form component and its accompanying ts/css/html files
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import {AngularFireAuth} from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import {Observable} from 'rxjs/Observable';
import { auth } from 'firebase/app';
#Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
user: Observable<firebase.User>;
authenticated: boolean = false;
error: any;
constructor(private router:Router,public af: AngularFireAuth) {
this.af.authState.subscribe(
//look at this again
(auth) => {
if (auth != null){
this.user = af.authState;
this.authenticated = true;
this.router.navigate(['dashboard']);
}
}
)
}
ngOnInit() {
}
loginUser(e){
e.preventDefault();
console.log(e.value);
var email = e.target.elements[0].value;
var password = e.target.elements[1].value;
console.log(email,password);
this.af.auth.signInWithEmailAndPassword(email,password)
.then((success) => {
console.log(success)
this.authenticated = true;
console.log("attempting to nav");
this.router.navigate(['dashboard']);
console.log("nav worked");
}).catch((err) => {
this.error= err;
})
//end of if statement
}//end of login user
}
HTML for Login Form
<div class="form">
<span class="error" *ngIf="error">{{ error }}</span>
<form (submit) = "loginUser($event)">
<input type="text" placeholder="Email Address"/>
<input type="password" placeholder="Password"/>
<button type = "submit">login</button>
</form>
</div>
HTML for appCompnent that controls the first screen you see which has the login form enclosed
<div id = "fullPage">
<app-header></app-header>
<app-login-form></app-login-form>
<app-footer></app-footer>
</div>
AppModule.ts which contains routes
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { LoginFormComponent } from './components/login-form/login-form.component';
import { FooterComponent } from './components/footer/footer.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import {RouterModule,Routes} from '#angular/router';
import {Router} from '#angular/router';
import { Route } from '#angular/compiler/src/core';
//Firebase configuration
import {AngularFireModule} from 'angularfire2';
import {environment} from '../environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import {AngularFireAuthModule} from 'angularfire2/auth';
//Forms
import {FormsModule} from '#angular/forms';
//All Components
import { EventsComponent } from './components/events/events.component';
import { EventDetailsComponent } from './components/event-details/event-details.component';
import { AddEventComponent } from './components/add-event/add-event.component';
import { EditEventComponent } from './components/edit-event/edit-event.component';
import { DeleteEventComponent } from './components/delete-event/delete-event.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { Component } from '#angular/core/src/metadata/directives';
const appRoutes:Routes = [
{
path: 'login',
component: LoginFormComponent
},{
path: 'dashboard',
component: DashboardComponent
},{
path: 'events',
component: EventsComponent
},{
path: 'add-event',
component: AddEventComponent
},{
path: 'edit-event/:id',
component: EditEventComponent
},{
path: 'delete-event/:id',
component: DeleteEventComponent
},{
path: 'event-details',
component: EventDetailsComponent
}
]
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
LoginFormComponent,
FooterComponent,
DashboardComponent,
EventsComponent,
EventDetailsComponent,
AddEventComponent,
EditEventComponent,
DeleteEventComponent,
NavbarComponent
],
imports: [
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(environment.firebase),AngularFirestoreModule,AngularFireAuthModule,
BrowserModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I followed a lot of tutorials so I believe I have done it right. However, it does not go to the dashboard. Any hints? Is it because I don't have a router-outlet in place of the app-login-form?
By the above code snippet, it seems that you have missed "router-outlet" tag which needs to be included in a template from where you try to navigate to the dashboard page. It should resolve your issue.
I have made an Angular4 component and the page that it generates has a button to navigate to another page. I don't get any errors and the pageUrl changes but the content of the page stays the same.
Here is my code:
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 {
constructor(private router: Router){}
username = "";
password = "";
log = function () {
if (this.username != "" && this.password != "") {
console.log(this.username + " " + this.password);
this.router.navigate(['/dashboard']);
}
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
#NgModule({
declarations: [
AppComponent,
DashboardComponent,
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'dashboard',
component: DashboardComponent
}
]
)
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {
}
app.component.html
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
<div class="center"><img src="../favicon.png"></div>
<label class="addText"> Username: </label><input [(ngModel)]
="username" class="addText"><br>
<label class="addText"> Password: </label><input [(ngModel)]
="password" type="password" class="addText"><br>
<div class="center"><button (click) ="log()">Log in</button></div>
</div>
</div>
</div>
To achieve what you want, have the app.component only to include the router-outlet:
#Component({
selector: 'app-root',
template: `
<!-- Views go here-->
<router-outlet></router-outlet>
`,
})
export class AppComponent { }
And then have a separate component for each view you want. So in your case you'd want to create a LoginComponent, which would then route to the DashboardComponent from there.
PS Of course this is expandable and you could add a header component tag in the AppComponent html, or whatever else and so on and so on. But just to showcase this simple use case.
you need to specify where to display the DashboardComponent
add this tag to tell angular the location where to display the component results from router
<router-outlet></router-outlet>