Angular routing from app.component.ts
Solution 1
Use this.router.navigate**(['/path']);
Here path refers to the path of the Component which is entered in app.module.ts.
Further references check this Official Angular Docs link
Solution 2
To navigate between 'pages', you can either add the following in home component class:
import { Router } from '@angular/router';
....
constructor(private router: Router){}
...
And then call from somewhere (like on (click)):
if(condition){
this.router.navigate(['/page1']);
}
else{
this.router.navigate(['/page2']);
}
and add this to routes:
.....
{ path: 'page1', component: Page2Component },
{ path: 'page2', component: Page1Component}
....
either add this in home component HTML:
<a class="home-app-link" routerLink="/page1">
<h3>Page1</h3>
</a>
<a class="home-app-link" routerLink="/page2">
<h3>Page2</h3>
</a>
Gocha
Updated on June 04, 2022Comments
-
Gocha almost 2 years
Hello I have angularjs app and routing module (AppRoutingModule) all works good when I am inserting
<router-outlet></router-outlet>
in app.component.html, but what if I want show some page registered users and not show others.I mean this in my app.component.ts
if (something) { show example page by default } else { show example2 page }
app-routing.module.ts
import { NgModule } from '@angular/core'; // Routing import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { LoginComponent } from './login/login.component'; import { RegistrationComponent } from './registration/registration.component'; const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'login', component: LoginComponent }, { path: 'registration', component: RegistrationComponent} ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, ) ], exports: [ RouterModule ] }) export class AppRoutingModule {}
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AlertModule } from 'ngx-bootstrap'; // Import the AF2 Module import { AngularFireModule } from 'angularfire2'; import { AngularFireAuthModule } from 'angularfire2/auth'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { HomeComponent } from './home/home.component'; import { LoginComponent } from './login/login.component'; import { RegistrationComponent } from './registration/registration.component'; @NgModule({ declarations: [ AppComponent, RegistrationComponent, HomeComponent, LoginComponent ], imports: [ BrowserModule, AlertModule.forRoot(), AngularFireModule.initializeApp(environment.firebase), AngularFireAuthModule, AngularFireDatabaseModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
app.component.ts
import { Component } from '@angular/core'; import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; items: FirebaseListObservable<any[]>; constructor(db: AngularFireDatabase) { this.items = db.list('/sms'); } }
app.component.html
<router-outlet></router-outlet>
-
Maciej Treder over 6 yearsCheck out this article: angular.io/guide/router#milestone-5-route-guards
-
Alex Beugnet over 6 yearsI was going to do just that.
-
Gocha over 6 yearsYes I know this but here is not code sample what I need
-
Vega over 6 yearsYou want to redirect from the app component upon condition to home component or to login component?
-
Gocha over 6 yearsyes, I want this
-
-
Vega almost 5 yearsThat's exactly my answer. The accepted answer also is the same. My answer being more explicit for all cases