CODEWITHSUNDEEP
angular
Davis Pérez
Davis Pérez

Reputation: 305

redirect to another html in angular

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>

Upvotes: 0

Views: 5632

Answers (4)

Yosvel Quintero
Yosvel Quintero

Reputation: 19090

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
  },
  // ...
]

Upvotes: 0

Yair Cohen
Yair Cohen

Reputation: 2268

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:

  1. 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

  2. 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.

Upvotes: 2

Rahul Cv
Rahul Cv

Reputation: 725

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>

Upvotes: 1

Elham Dabiri
Elham Dabiri

Reputation: 415

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>

Upvotes: 0

Related Questions