How to implement accordion in angular2 and typescript

Question

I am creating list of div dynamically.I want the content of only fist div will display by default.But when user click on second div then content of second should be display and the content of first is hide.And so on with third and forth div.

This is like accordion.Here is my code

<div class="content-area">
  <div class="container-fluid">
    <div class="accordian">
        <div class="errors-cont" *ngFor="#error of errors">
            <div class="acc-header active" (click)="onClick()">
                <div class="image"><img src="image2/nike.png"></div>
                <div class="text">
                <div class="title">Nike<span>20-04-2016,  03:10 PM</span></div>
                <p>{{error.title}}</p>
                </div>
            </div>
            <div class="acc-desc" [class.hide]="isSpecial">
                <div class="image"></div>
                <div class="text">
                <p>{{error.desc}}</p>
                <div class="acc-block">
                    <div class="title">ERROR TYPE asdf</div>
                    <p>Lorem ipsum dolor sit ame</p>
                </div>
                <div class="acc-block">
                    <div class="title">REASON</div>
                    <p>Lorem ipsum dolor sit ame</p>
                </div>
                <div class="acc-block">
                    <div class="btns">
                    <input name="" type="button" value="RESOLVE" class="transparent">
                    <input name="" type="button" value="IGNORE" class="green">
                    </div>
                </div>
                </div>
            </div>
        </div><!-- end or ngFor loop -->     
    </div>
  </div>
</div>

import {Component} from '@angular/core';
import {HeroService} from './error.service';

import { ROUTER_DIRECTIVES } from '@angular/router';
import {CORE_DIRECTIVES} from '@angular/common';
import {DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    moduleId: module.id,
    selector: 'errors-view',
    templateUrl: 'errors-view.html',
    providers: [HeroService],
    styleUrls: ['errors.css'],
    directives: [DROPDOWN_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})

export class ErrorsViewComponent {

    errors:string[] = [];
    isClose = true;
    isActive= false;
    isSpecial= false;

    //disValue = true
    constructor(private heroService:HeroService) {
        heroService.loadItems()
            .subscribe(data => this.errors = data);
        console.log('erros will be shown in this page');
    }

    togglePopover() {
        this.isClose = !this.isClose;
    }

    onClick(){
        this.isActive = true;
        this.isSpecial = true;
        //this.disValue = false;
        console.log("active false");

        //var x = document.getElementsByClassName("acc-header");

            console.log(x.length);
        // for (var i=0; i < x.length; i++) {
        //  x[i].onclick = function() {deleteIt(this)}

        // }



    }
}

could you please provide plunker of your code, or you can adopt my method read below my answer as alternate — Pardeep Jain
– Pardeep Jain, Commented Jun 23, 2016 at 16:18

Pardeep Jain · Accepted Answer · 2016-06-23 16:16:47Z

2

PS:- as Alternate

If you want to use Accordion then why not to use this ?

http://www.primefaces.org/primeng/#/accordion

PrimeNg provides us all the functionaly needed you just have to add this

import {Accordion} from 'primeng/primeng';
import {AccordionTab} from 'primeng/primeng';

answered Jun 23, 2016 at 16:16

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohit Over a year ago

I seen that.But in my case i created div dynamically usng *ngFor and each div has same class.

rayryeng · Accepted Answer · 2017-02-08 18:46:10Z

2

Use the index to add the 'active' class if it's the first one.

*ngFor="#error of errors; let i=index"

div class="acc-header" [class.active]="i == 0" (click)="onClick(i)"

edited Feb 8, 2017 at 18:46

rayryeng

105k22 gold badges201 silver badges206 bronze badges

answered Feb 8, 2017 at 18:29

Guillaume Serrat

1658 bronze badges

1 Comment

Reyan Tropia Over a year ago

This needs another condition on the onClick to close the current active class but definitely helped me create idea to make this happen without writing another component. Thanks

Collectives™ on Stack Overflow

How to implement accordion in angular2 and typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related