Components: Accordion in Angular material 2

[kjhatis]

Bug, feature request, or proposal:

: How to create Accordion with angular material 2

What is the expected behavior?

it should contain angular 2 accordion.

What is the current behavior?

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Is there anything else we should know?

[JakobSegerslatt]

I'm gueassing your'e talking about material design expansion panels right?
https://material.io/guidelines/components/expansion-panels.html

I doubt they will implement it any time soon, but in the meantime i can recommend this component, it follows the material specs nicely and is really intuitive to use.
https://github.com/Gbuomprisco/ng2-expansion-panels

[tmburnell]

I implemented this for myself. it only does one collapsible section at a time, however your could wrap it to make an Accordion :

import { Component, trigger, state, animate, transition, style } from '@angular/core';

@Component({
    selector: 'collapsible',
    templateUrl: '
        <div class="header" fxLayout="row" (click)="isCollapsed = !isCollapsed">
            <md-icon [@iconChange]="isCollapsed">keyboard_arrow_down</md-icon>
            <ng-content select=".collapsible-header"></ng-content>
        </div>
        <div class="content" [@collapseChange]="isCollapsed">
            <ng-content select=".collapsible-content"></ng-content>
        </div>
    ',
    animations: [
        trigger('collapseChange', [
            state('true' ,
                style({ height: '0', overflow : 'hidden' }),
            ),
            state('false',
                style({ height: '*' })
            ),
            transition('* => *', animate('.25s ease-in'))
        ]),
        trigger('iconChange', [
            state('true',
                style({ transform: 'rotate( -90deg )' })
            ),
            state('false',
                style({ transform: 'rotate( 0deg )' })
            ),
            transition('* => *', animate('.25s'))
        ])
    ]
})    
export class collapsibleComponent {
    isCollapsed: boolean = false;
}

[CaerusKaru]

An even better implementation in my opinion is Teradata's Covalent Material package, located here. Their current beta does not support Angular 4 and has a bunch of AOT errors, but these should be resolved when Material2 beta3 comes out (they release in line with Material).

[karser]

This is the Teradata's animation:

        trigger('tdCollapse', [
            state('1' ,
                style({ height: '0', display: 'none' }),
            ),
            state('0',
                style({ height: AUTO_STYLE, display: AUTO_STYLE, })
            ),
            transition('0 => 1', [
                style({overflow: 'hidden'}),
                animate('.25s ease-in', style({height: '0'})),
            ]),
            transition('1 => 0', [
                style({overflow: 'hidden'}),
                animate('.25s ease-out', style({height: AUTO_STYLE})),
            ]),
        ]),

[jelbourn]

Tracked via #3664

[ghost]

I have project that needs collapse any help how I can achieve that with ANG4

I have this code so far and is not working

 <!-- COLAPSE TEST -->

  <div class="header" fxLayout="row" (click)="isCollapsed = !isCollapsed">
      <md-icon [@iconChange]="isCollapsed">keyboard_arrow_down</md-icon> 
      <ng-content select=".collapsible-header"></ng-content>
      dsds
  </div>
  <div class="content" [@collapseChange]="isCollapsed">
      <ng-content select=".collapsible-content"></ng-content>
      sdasdasdasds
  </div>

import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';


animations: [
        trigger('collapseChange', [
            state('true' ,
                style({ height: '0', overflow : 'hidden' }),
            ),
            state('false',
                style({ height: '*' })
            ),
            transition('* => *', animate('.25s ease-in'))
        ]),
        trigger('iconChange', [
            state('true',
                style({ transform: 'rotate( -90deg )' })
            ),
            state('false',
                style({ transform: 'rotate( 0deg )' })
            ),
            transition('* => *', animate('.25s'))
        ])
    ]


export class NavMenuLeftComponent implements OnInit {

  isCollapsed: boolean = false;

[stephengardner]

If you came here from a google search assuming Angular Material 2 hadn't done this yet...
here you go

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}