Accordion on Angular

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 it selected or not, and ngClass will assign the "selected" class in case the "selected" property 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 want to select only one, we can 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 listen to all the events of the AccordionDiv children components so that only the current one can be selected:

//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: link