Offcanvas component doesn't work, Content doesn't show up

Question

I hope you are fine!

I have a challenge for you :). I'm trying to implement a Offcanvas Component in my Angular Project, and it's look to work, but when i activate the component shows only the shadow effect and not the content. I'm working with ng-bootstrap v13.1.0 and Angular[Here the shadow effect when i activate the component]enter image description here(https://i.stack.imgur.com/tCCaf.jpg)content.

I have already used a ng-bootsrap Modal component and it's work. So i think is not a problem version compatibility between bootstrap and angular.

I checked already the correctly import in app.module.tsit looks to be everything at the right place

Actually i don't know if i need a routinghere the app.routing.module.ts

And also the code seems to be correct.

And here my Component .ts data

Have you any advice why it doesn't work?

Here my component:

import { Component, OnInit,  Input } from '@angular/core';

import { NgbActiveOffcanvas, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-trainer-dropdown-menu-content',
  template:
    `
      <div class="offcanvas-start">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Offcanvas</h5>
      <button
                type="button"
                class="btn-close text-reset"
                aria-label="Close"
                (click)="activeOffcanvas.dismiss('Cross click')"
            ></button>
        </div>
        <div class="offcanvas-body">

            <button type="button" class="btn btn-outline-dark" (click)="activeOffcanvas.close('Close click')">Close</button>
        </div>
    </div>
    `

})

export class TrainerDropdownMenuContent{



  @Input() name: any;


  ngOnInit(): void {

  }


  constructor(public activeOffcanvas: NgbActiveOffcanvas) {}


}



@Component({
  selector: 'app-trainer-dropdown-menu',
  templateUrl: './trainer-dropdown-menu.component.html',
  styleUrls: ['./trainer-dropdown-menu.component.css']
  // providers: [NgbOffcanvasConfig, NgbOffcanvas],

})
export class TrainerDropdownMenuComponent implements OnInit{




  constructor( private offcanvasService: NgbOffcanvas) {

  }

  ngOnInit(): void {

  }



  open() {
    const offcanvasRef = this.offcanvasService.open(TrainerDropdownMenuContent);
    offcanvasRef.componentInstance.name = 'World';
  }

}

Thanks :)

Answer 1

In my case seems that the show class after this.offcanvasService.open not override the hidden css property of .offcanvas class .. so i've override the .offcanvas.show

Answer 2

I was facing the same issue. I've solved it with this CSS:

.offcanvas.show {
  z-index: 99999;
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
  transform: none !important;
}