Home / Questions / 205800
Accepted
beaag58
Asked: 2020-10-19 07:29:47 +0800 CST 2020-10-19 07:29:47 +0800 CST

Accordion in Angular

  • 772

I have to implement an Accordion in Angular6 and I want to know what link I have clicked to add a class to it or remove it with Typescrypt since I can't use Jquery. Any ideas.

(click)="accordionFunction(this);

"

typescript

1 Answers

  1. Best Answer

    To do this you have to create a child component (div) which carries the selection functionality:

    import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
    selector: 'accordeon-div',
    template: `
        <div [ngClass]="{ 'selected': selected }" (click)="select($event.target)">
        </div>
    `,
    styles: [`
    .selected {
        border: 1px red solid;
    }
    div {
        border: 1px black solid;
        width: 30px;
        height: 30px;
    }
    `]
})
export class AccordeonDiv {
    name: string;
    selected: boolean = false;

    constructor() {
        this.name = `Angular! v${VERSION.full}`;
    }

    select(element: HTMLElement) {
        this.selected = !this.selected;
    }
}

    With the boolean property "selected" we will keep whether it is selected or not, and ngClass will assign the class "selected" in case the property "selected" is true.

    The parent component should simply load the child as many times as we want:

    //our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordeonDiv } from './accordeon-div.component'

@Component({
    selector: 'my-app',
    template: `
        <div *ngFor="let number of numbers">
            <accordeon-div></accordeon-div>
        </div>
    `,
    styles: []
})
export class App {
    constructor() {
        this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4]
        this.name = `Angular! v${VERSION.full}`;
    }
}

    If we only want to select one, we could modify the child component by adding an eventemitter that is launched when the selection is executed:

     //our root app component
import { Component, NgModule, VERSION, EventEmitter, Output } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
    selector: 'accordeon-div',
    template: `
        <div [ngClass]="{ 'selected': selected }" (click)="select($event.target)">
        </div>
    `,
    styles: [`
    .selected {
        border: 1px red solid;
    }
    div {
        border: 1px black solid;
        width: 30px;
        height: 30px;
    }
    `]
})
export class AccordeonDiv {
    name: string;
    selected: boolean = false;
    eventSelected: EventEmitter = new EventEmitter<AccordeonDiv>();

    constructor() {
        this.name = `Angular! v${VERSION.full}`;
    }

    select(element: HTMLElement) {
        this.selected = !this.selected;
        this.eventSelected.emit(this);
    }
}

    And the parent component will listen to all the events of the child components of type AccordionDiv so that it only allows selecting the current one:

    //our root app component
import { Component, NgModule, VERSION, ViewChildren, AfterViewInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordeonDiv } from './accordeon-div.component'

@Component({
    selector: 'my-app',
    template: `
        <div *ngFor="let number of numbers">
            <accordeon-div></accordeon-div>
        </div>
    `,
    styles: []
})
export class App implements AfterViewInit {
     @ViewChildren(AccordeonDiv) childs: QueryList<AccordeonDiv>;
    constructor() {
        this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4]
        this.name = `Angular! v${VERSION.full}`;
    }

    ngAfterViewInit() {
        this.childs.forEach((item: AccordeonDiv) => { item.eventSelected.subscribe(selected => this.unselect(selected)) });
    }

    unselect(selected) {
        this.childs.forEach((item) => { if (item !== selected) item.selected = false; });
    }
}

    An executable example: https://next.plnkr.co/edit/8htQBguMf3zEH48X?open=lib%2Fapp.ts&deferRun=1

    • 2