SideWindow

O SideWindow é uma janela lateral que permite exibir conteúdos da sua escolha sem a necessidade de paginação, ideal para exibir detalhes extensos de um item de uma tabela.

Importante

Ao realizar transições de rota, a janela será automaticamente fechada.

Uso

side-window-example.component.ts

import { Component } from "@angular/core";
import { CatDynamicComponentDataInterface } from "@catrx/ui/dynamic-component";

@Component({
  template: `<h2>{{data}}</h2>`
})
export class SideWindowExampleComponent implements CatDynamicComponentDataInterface {
  data: string;
}

page-side-window.component.html

<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <button (click)="open()" class="btn btn-primary btn-sm">
      Abrir Janela Lateral
    </button>
  </nav>
</cat-toolbar>

page-side-window.component.ts

import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';
import { CatSideWindowService } from '@catrx/ui/side-window';
import { SideWindowExampleComponent } from './side-window-example.compoent';

@Component({
  templateUrl: './page-side-window.component.html',
})
export class PageSideWindowComponent extends CatComponentBase {
  constructor(private sideWindowService: CatSideWindowService) {
    super();
  }

  public open() {
    this.sideWindowService.open(SideWindowExampleComponent, {
      data: 'Olá Mundo',
      onClose: () => alert('Fechou a Janela Lateral.')
    });
  }
}

page-side-window.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { PageSideWindowComponent } from './page-side-window.component';
import { SideWindowExampleComponent } from './side-window-example.compoent';
import { PageSideWindowRoutingModule } from './page-side-window.routing.module';

@NgModule({
  declarations: [PageSideWindowComponent, SideWindowExampleComponent],
  imports: [
    CommonModule,
    CatToolbarModule,
    PageSideWindowRoutingModule
  ],
})
export class PageSideWindowModule {}