(ngx-admin/Nebular) How to remove back button on my custom login component?

Question

I have follow instruction from https://akveo.github.io/nebular/docs/auth/custom-auth-components#create-auth-module

to create custom login component.

The problem is how can I remove back button from this component?

Answer 1

Following the instructions you provided above, in the "Setup Auth Container" section you'll see that it uses the default Nebular Auth container component:

export const routes: Routes = [
  {
    path: '',
    component: NbAuthComponent,  // <---
  },
];

What you have to do is to create your own auth container and change the template according to your needs. As a starting point, you can check the code of the original Nebular auth container here:

https://github.com/akveo/nebular/blob/v2.0.0/src/framework/auth/components/auth.component.ts

What you want to remove is the following code:

<nav class="navigation">
  <a href="#" (click)="back()" class="link" aria-label="Back"><i class="icon nb-arrow-thin-left"></i></a>
</nav>

I hope I made it clear. If not, feel free to ask your doubts and I'll provide a more concise example.

Cheers,

Answer 2

Just try this css, in the component.scss

::ng-deep .navigation .link nb-icon {
  display: none !important;
}

Answer 3

Thanks to alexandros nikoloulopoulos, id like to add the way how to hide whole card-header (add it in component.scss):

    ::ng-deep .nb-theme-default  nb-card-header {
    display: none !important;
    }

Answer 4

You need to open the template of your custom "NbAuthComponent" component, and remove the back button from "nb-card-header". That should help.

Answer 5

When I add this css to the src\app@theme\styles\styles.scss , back button is gone.

 .navigation .link nb-icon {
    display: none !important;
  }