CODEWITHSUNDEEP
angularnebularngx-admin
Achira Trakansutleart
Achira Trakansutleart

Reputation: 73

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

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?

enter image description here

Upvotes: 4

Views: 5083

Answers (5)

rosa
rosa

Reputation: 13

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

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

Upvotes: 1

Amir Vazirifar
Amir Vazirifar

Reputation: 151

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;
    }

Upvotes: 5

alexandros nikoloulopoulos
alexandros nikoloulopoulos

Reputation: 179

Just try this css, in the component.scss

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

Upvotes: 6

ArtemRomanovsky
ArtemRomanovsky

Reputation: 129

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

Upvotes: 3

Fel
Fel

Reputation: 4828

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,

Upvotes: 7

Related Questions