To use Card, first import SharedModule
in your module.
import {SharedModule} from '@gaxon/modules';​@NgModule({...imports: [SharedModule, ...],...})export class YourAppModule {}
<p><button type="button" class="btn btn-outline-primary" [ngClass]="{active:!isCollapsed}" (click)="isCollapsed = !isCollapsed"[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">{{(isCollapsed) ? 'Expand' : 'Collapse'}}</button></p><div id="collapseExample" [ngbCollapse]="isCollapsed"><div class="card"><div class="card-body">You can collapse this card by clicking Toggle</div></div></div>
import {Component} from '@angular/core';​@Component({selector: 'app-ngbd-collapse-basic',templateUrl: './collapse-basic.html'})export class NgbdCollapseBasic {public isCollapsed = false;}​
<p class="mb-0"><a class="btn btn-primary mr-2 mb-2" href="#multiCollapseExample1" (click)="collapsedWithAnchor($event)"role="button"[attr.aria-expanded]="!multiple.option1" aria-controls="multiCollapseExample1">First Element</a>​<button class="btn btn-primary mr-2 mb-2" type="button" (click)="multiple.option2 = !multiple.option2"[attr.aria-expanded]="!multiple.option2" aria-controls="multiCollapseExample2">Second Element</button>​<button class="btn btn-primary mr-2 mb-2" type="button" (click)="toggleCollapsed($event)"aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button></p><div class="row"><div class="col"><div class="multi-collapse" id="multiCollapseExample1" [ngbCollapse]="multiple.option1"><div class="card card-body mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div></div></div><div class="col"><div class="multi-collapse" id="multiCollapseExample2" [ngbCollapse]="multiple.option2"><div class="card card-body mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div></div></div></div>
import {Component} from '@angular/core';​@Component({selector: 'app-ngbd-collapse-basic',templateUrl: './collapse-basic.html'})export class NgbdCollapseBasic {public multiple = {option1: true,option2: true};​collapsedWithAnchor(event) {event.preventDefault();​this.multiple.option1 = !this.multiple.option1;}​toggleCollapsed(event) {event.preventDefault();​this.multiple.option1 = !this.multiple.option1;this.multiple.option2 = !this.multiple.option2;}}​
For more information about options, check the Ng-Bootstrap​
<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"><ngb-panel title="Simple"><ng-template ngbPanelContent>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officiaaute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggingsoccaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamuslabore sustainable VHS.</ng-template></ngb-panel><ngb-panel><ng-template ngbPanelTitle><span>★ <b>Fancy</b> title ★</span></ng-template><ng-template ngbPanelContent>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officiaaute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggingsoccaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamuslabore sustainable VHS.</ng-template></ngb-panel><ngb-panel title="Disabled" [disabled]="true"><ng-template ngbPanelContent>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officiaaute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggingsoccaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamuslabore sustainable VHS.</ng-template></ngb-panel></ngb-accordion>​
For more information about options, check the Ng-Bootstrap​