CODEWITHSUNDEEP
csstypescriptangularangular-ui-bootstrapaccordion
Mohit
Mohit

Reputation: 345

How to implement accordion in angular2 and typescript

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)}

        // }



    }
}

Upvotes: 2

Views: 14145

Answers (2)

Guillaume Serrat
Guillaume Serrat

Reputation: 165

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)"

Upvotes: 2

Pardeep Jain
Pardeep Jain

Reputation: 86800

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';

Upvotes: 2

Related Questions