Question 88601 in Html Question posted in
Some basic documentation can be found here.

How to minimize and maximize a nb-card in angular? – Html

I have a nb-card, I want to be able to minimize and maximize it. I have written the following code. I can not get the card to be minimized.

nb-card status="primary" [ngClass]="{'collapsed': isCollapsed}">
<nb-card-header>
    <div class="row justify-content-between align-items-center">
        <div class="col-auto">Client Systems Associated Assessment</div>
        <div class="col-auto">
            <button nbButton ghost (click)="toggleCollapse()">
                <nb-icon [icon]="isCollapsed ? 'plus-outline' : 'minus-outline'"></nb-icon>
            </button>
            <button nbButton ghost (click)="closeDialog()">
                <nb-icon icon="close-outline"></nb-icon>
            </button>
        </div>
    </div>
</nb-card-header>

And here is the typescript code:

import { NbCardComponent } from '@nebular/theme';
@ViewChild(NbCardComponent) card: NbCardComponent;
isCollapsed = false;
toggleCollapse() {
    console.log("Testing the minimize button");
    this.isCollapsed = !this.isCollapsed;       
}

I can reach the toggleCollapse() function because I can see the output in the Console log. Just that the card does not get minimized.

May you please point me to the right direction?

Tags:

3

Answers


  1. 0

    Looking at the documentation, it doesn’t look like nb-card can be collapsed
    https://akveo.github.io/nebular/docs/components/card/overview#nbcardcomponent

    But I can see that there is a component called Accordion that is probably doing what you want:
    https://akveo.github.io/nebular/docs/components/accordion/overview#nbaccordioncomponent

    <nb-accordion>
 <nb-accordion-item>
  <nb-accordion-item-header>Product Details</nb-accordion-item-header>
  <nb-accordion-item-body>
    Item Content
  </nb-accordion-item-body>
 </nb-accordion-item>
</nb-accordion>
    Login or Signup to reply.
  2. 0

    To minimize and maximize a nb-card in Angular, you can use the nb-card’s collapsed input property to control the state of the card. Here’s how you can modify your code to achieve this:

    In your HTML template, replace the isCollapsed property with collapsed:

    <nb-card status="primary" [collapsed]="isCollapsed" [ngClass]="{'collapsed': isCollapsed}">
  <!-- card content here -->
</nb-card>

    In your component, modify the toggleCollapse() function to toggle the value of isCollapsed:

    import { Component, ViewChild } from '@angular/core';
import { NbCardComponent } from '@nebular/theme';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent {
  @ViewChild(NbCardComponent) card: NbCardComponent;
  isCollapsed = false;

  toggleCollapse() {
    this.isCollapsed = !this.isCollapsed;
  }
}

    With these changes, clicking the button with the plus/minus icon should now toggle the nb-card between its minimized and maximized states.

    Note that you can also use CSS to customize the appearance of the nb-card when it is in its collapsed state. In your example, the ngClass directive is used to add the collapsed class to the card’s wrapper element when it is collapsed. You can use this class to apply custom styling to the card when it is minimized.

    Login or Signup to reply.
  3. 0 
    import { NbCardComponent } from '@nebular/theme';
import { ViewChild, ElementRef } from '@angular/core';

export class YourComponent {
  @ViewChild(NbCardComponent) card: NbCardComponent;
  @ViewChild('cardHeader') cardHeader: ElementRef;

  isCollapsed = false;

  toggleCollapse() {
    console.log("Testing the minimize button");
    this.isCollapsed = !this.isCollapsed;       
  }
}
    .nb-card.collapsed {
  .nb-card-body {
    display: none;
  }
  .nb-card-header {
    border-bottom: none;
  }
}
    <nb-card status="primary" [ngClass]="{'collapsed': isCollapsed}">
  <nb-card-header [style.height]="isCollapsed ? '50px' : 'auto'">
    <div class="row justify-content-between align-items-center">
      <div class="col-auto">Client Systems Associated Assessment</div>
      <div class="col-auto">
        <button nbButton ghost (click)="toggleCollapse()">
          <nb-icon [icon]="isCollapsed ? 'plus-outline' : 'minus-outline'"></nb-icon>
        </button>
        <button nbButton ghost (click)="closeDialog()">
          <nb-icon icon="close-outline"></nb-icon>
        </button>
      </div>
    </div>
  </nb-card-header>
  <nb-card-body>
    <!-- card content here -->
  </nb-card-body>
</nb-card>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search