redirect to another html in angular

Question

Can someone help me please, exactly where is the comment I want to be redirected to another page being false

<ng-container *ngIf="!loginService.verificarToken(); else postLogin">
        <ul class="navbar-nav mr-auto"><!--mr-auto-->
          <li class="nav-item">
            <a class="nav-link" routerLink="/HOME" routerLinkActive="active">HELLO</a>
          </li>
        </ul>
      </ng-container>
     <ng-template #postLogin>
      <ul class="navbar-nav mr-auto"><!--mr-auto-->
        <!--
          in case it is false I want you to redirect me to another html page
          ????
        -->
      </ul>
     </ng-template>

You can use AuthGuard and it will handle what you want this the ideal solution. I have a solution but i consider it very bad which is adding a component inside <ng-template #postLogin> and it will be responsible for redirecting as i mentioned before it is a very bad solution — user3341564
– user3341564, Commented Aug 1, 2020 at 4:44
What I try to do exactly is verify, if there is a token, take me to the home page, if there is no redirect to the login — Davis Pérez
– Davis Pérez, Commented Aug 1, 2020 at 4:49

Yair Cohen · Accepted Answer · 2020-08-01 04:51:49Z

In Angular you have the HTML and you also have the component, where most of the logic happens. You can insert logic in the HTML to render stuff, or show stuff based on a certain condition or pretty much any DOM manipulation but what you are trying to do doesn't relate to the DOM at all.

You want to run you code in the component and not the HTML, remember the the logic in the HTML is used mostly to render certain things and manipulate the DOM.

So here's how to do this:

When do you want your function to run? If you want it to run when the page renders for example, use the NgOnInit lifecycle hook. Here's a simple implementation of it.

export class App implements OnInit {
       constructor(private router: Router) { }
      ngOnInit() {
           if (!loginService.verificarToken()) {
              this.router.navigate(['/login']);
            }

      }
    }

Few things to note:

I'd recommend to run this type of logic in your code but instead to use a Route Guard, that will run before each page. Checkout: https://angular.io/guide/router#preventing-unauthorized-access
I don't recommend putting functions inside your HTML, it's not good for performance. Instead use variables in your HTML and run the function in the component.

Rahul Cv · Accepted Answer · 2020-08-01 04:46:32Z

1

In your Controller

import { RouterModule, Routes } from '@angular/router'; constructor(private router: Router)

postloginRedirect(){
  router.navigate(['/routeforPostlogin']);
}

And in your HTML <

ng-template #postLogin>
          <ul class="navbar-nav mr-auto"><!--mr-auto-->
    <span [hidden]="postloginRedirect()"></span>        
    <!--
              in case it is false I want you to redirect me to another html page
              ????
            -->
          </ul>
         </ng-template>

answered Aug 1, 2020 at 4:46

Rahul Cv

7255 silver badges12 bronze badges

Comments

Elham Dabiri · Accepted Answer · 2020-08-01 04:43:49Z

In your app-routing.module.ts add your route:

    import { pageNameComponent} from './pageNameComponent.component';
    import { AppComponent } from './app.component';
    import { NgModule }             from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
      { path: '', redirectTo: '/AppComponent', pathMatch: 'full' },
      { path: 'pageName', component: pageNameComponent },
    
    ];
    
    @NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
    })
    export class AppRoutingModule {}

And in your html:

    <ul class="navbar-nav mr-auto"><!--mr-auto-->
       <a routerLink="/pageName" class="nav-link" href="#">pageName</a>
   </ul>

Yosvel Quintero · Accepted Answer · 2020-08-01 05:16:18Z

You should go the Angular way which is using Router -> CanActivate

Angular guard AuthGuard

import { Injectable } from '@angular/core'
import { Router } from '@angular/router'
import {
  CanActivate, ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router'

import { LoginService } from './login.service' // <-- your service

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private router: Router,
    private loginService: LoginService
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      const isLoggedIn = this.loginService.verificarToken() // <-- verificarToken boolean

      if (!isLoggedIn) {
        this.router.navigate(['login') // <-- redirect to login
      }

      return isLoggedIn
  }
}

And then in your routes:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard', component: UsersComponent,
    canActivate: [AuthGuard], // <-- your guard redirect
  },
  // ...
]

Collectives™ on Stack Overflow

redirect to another html in angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related