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

//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}`;
    }
}

@NgModule({
    imports: [BrowserModule],
    declarations: [App, AccordeonDiv],
    bootstrap: [App],
})
export class AppModule {}

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

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