Off Canvas

The <go-off-canvas> component should be the only instance of the off canvas in the app.

Setup

To use the off canvas anywhere in the app, you must first add it to the app level. This should only be done once per application.

Import the GoOffCanvasModule into the main app module.
import { GoOffCanvasModule } from '@tangoe/goponents'; @NgModule({ declarations: [AppComponent], imports: [ GoOffCanvasModule ], bootstrap: [AppComponent] }) export class AppModule { }
Add the <go-off-canvas> element to app.component.html.

Note!

For this example, the component we want to render in the off canvas is "BasicTestComponent", but we can follow the same pattern to render any component inside of the off canvas.

To make use of the off canvas in our component:

In the module that imports your component, import the GoOffCanvasModule and add the GoOffCanvasService to the providers.
import { GoOffCanvasModule, GoOffCanvasService } from '@tangoe/goponents'; import { BasicTestComponent } from './components/basic-test/basic-test.component'; @NgModule({ imports: [ GoOffCanvasModule ], declarations: [ BasicTestComponent ], providers: [ GoOffCanvasService ] }) export class UiKitModule { }
In the component that is telling the off canvas to open, import the GoOffCanvasService, and the component that is being rendered inside the off canvas.
import { GoOffCanvasService } from '@tangoe/goponents'; import { BasicTestComponent } from '../basic-test/basic-test.component'; constructor(private goOffCanvasService: GoOffCanvasService) { }
To open the off canvas, use the service to call openOffCanvas. This method takes the component type (BasicTestComponent in our case), the bindings for that component as an object, and an optional offCanvasOptions object with the header property as a string.
openOffCanvas(): void { this.goOffCanvasService.openOffCanvas({ component: BasicTestComponent, bindings: { fakeTitle: 'Basic Off Canvas Component' }, offCanvasOptions: { header: 'Test Header' } }); }
Lastly, we need something to trigger that function. In our case we will use a button that triggers the openOffCanvas method, but it could be triggered by any event.
component.html
<go-button (handleClick)="openOffCanvas()" buttonIcon="subdirectory_arrow_right" buttonVariant="positive"> Open Off Canvas </go-button>
View

To render a large off canvas, add the size option to the offCanvasOptions property when calling the openOffCanvas method.


  openOffCanvas(): void {
    this.goOffCanvasService.openOffCanvas({
      component: BasicTestLargeComponent,
      bindings: {
        fakeTitle: 'Basic Off Canvas Component'
      },
      offCanvasOptions: {
        header: 'Test Header',
        size: 'large'
      }
    });
  }

View

Header

To project content from the component being rendered in the off-canvas into the header (like a submit or close button) wrap it in a go-off-canvas-header component and it will be rendered in the right side of the off-canvas header.


  <!-- template of the component rendered in the large off canvas -->
  <go-off-canvas-header>
    <!-- this will be rendered in the header -->
    <go-button (handleClick)="closeOffCanvas()">Close</go-button>
  </go-off-canvas-header>
  <div>This will render in the off canvas as usual</div>

To render a full-width submit button at the bottom of the off-canvas, add a go-off-canvas-submit-button element anywhere within the template of the component being rendered in the off-canvas.

The go-off-canvas-submit-button component has the following bindings:


  @Input() disabled: boolean = false; // A boolean which, when true, disables the button.
  @Input() text: string = 'Submit'; // The text to be displayed on the button.
  @Input() type: string = 'submit'; // Sets the button's type attribute.
  @Output() handleClick: EventEmitter<void> = new EventEmitter<void>(); // Emits an event when the button is clicked.

Code

component.html


  <!-- template of the component rendered in the off canvas -->
  <go-off-canvas-submit-button
    [text]="submitButtonText"
    [disabled]="submitDisabled"
    (handleClick)="submit()">
  </go-off-canvas-submit-button>

component.ts


  submitButtonText: string = 'Apply Changes';
  submitDisabled: boolean = false;

  submit(): void {
    alert('Submitted!');
    this.goOffCanvasService.closeOffCanvas();
  }

Off Canvas

Usage

Setup

Note!

Using the Off Canvas service

component.html

View

Large Off Canvas

View

Header

Off Canvas With Submit Button

Code

component.html

component.ts

View