Card Directive

NgAceCard is a wrapper for Ace's Card plugin.
However it doesn't support collapse functionality. You should use @ng-bootstrap ngbCollapse directive:

The syntax is as follows:

html

<div #card="NgAceCard" NgAceCard class="card">
    <div class="card-header">
        <h5 class="card-title">
            Title
        </h5>
        
        <div class="card-toolbar">
            <a role="button" (click)="card.toggleFullscreen()" class="card-toolbar-btn">
                <i *ngIf="!card.fullscreen" class="fa fa-expand"></i>
                <i *ngIf="card.fullscreen" class="fa fa-compress"></i>
            </a>

            <a role="button" (click)="card.reload()" class="card-toolbar-btn">
                <i class="fas fa-sync-alt"></i>
            </a>

            <a role="button" (click)="collapse.toggle()" class="card-toolbar-btn">
                <i *ngIf="!collapse.collapsed" class="fa fa-chevron-up"></i>
                <i *ngIf="collapse.collapsed" class="fa fa-chevron-down"></i>
            </a>

            <a role="button" (click)="card.close()" class="card-toolbar-btn">
                <i class="fa fa-times"></i>
            </a>
        </div>
    </div><!-- /.card-header -->

    <div class="card-body p-0" #collapse="ngbCollapse" [ngbCollapse]="false">
     <div class="p-3">
       Content
     </div>
    </div><!-- /.card-body -->
</div>

Inputs

`fullscreen`

html

<div #card="NgAceCard" NgAceCard class="card" [fullscreen]="isFullscreen" ...>
...
</div>

Outpus

`fullscreenChange`

Emitted when before card fullscreen/restore.

`onExpanded`

Emitted after card is fullscreened

`onRestored`

Emitted after card is restored (no more fullscreen)

`onClosed`

Emitted after card is closed

`onLoad`

Emitted when card starts/stops loading

@ViewChild ('card') card: NgAceCard;

someMethod() {
    this.card.onLoad.subscribe((isLoading: boolean) {
        if (isLoading) {
            // started loading
        }
        else {
            // stopped loading
        }
    })
}

Methods

`expand`

Expands card (makes it fullscreen)

`restore`

Restores card (no more fullscreen)

`toggleFullscreen`

`close`

Closes card

`reload`

Adds a loading icon and layer on card

`startLoading`

Adds a loading icon and layer on card. Takes an optional loadingHtml parameter which is a custom HTML content (icon, etc) for the loading layer.

`stopLoading`

Removes the loading icon and layer