Angular Collapase | Start with it open? - Material Design for Bootstrap

Topic: Angular Collapase | Start with it open?

Bill Bensing pro asked 6 years ago

Is there a way to start with it the Collapse open? I tried the following with no success:

@ViewChild('Collapse') public Collapse: CollapseDirective;
ngOnInit(){
  this.Collapse.show(); // attempt 1
  this.Collapse.toggle(); // attempt 2
  this.Collapse.isCollapsed = false;
}

Dharmen Milestone commented 6 years ago

use ngAfterViewInit lifecycle hook

Add comment

mr.Jelle-Beat answered 6 years ago

0 0 Best answer

This is wat helped me out. I had several collapsed div's that needed to open, but you can adjust it to your liking. HTML:

<div [mdbCollapse]="isCollapsed" #divId="bs-collapse" ></div>

TS:

import {AfterViewInit, Component, ViewChildren} from '@angular/core';
import {CollapseDirective} from 'ng-uikit-pro-standard';

@ViewChildren(CollapseDirective) collapses: CollapseDirective[];

ngAfterViewInit() {
  this.collapses.forEach((collapse: CollapseDirective) => {
    collapse.show();
  });
}

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear Bill, In new version 6.2.3 (which will be published on September 10) there will be input [isCollapsed] which will allow you to define collapsed state as true/false. Regards, Arek

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Bill Bensing

Pro User

19Support score
7Questions 1Answers

0Snippets likes 0Snippets