0

Tengo que implementar un Acordeon en Angular6 y quiero saber que enlace he pulsado para añadirle un clase o quitársela con Typescrypt ya que no puedo usar Jquery. Alguna Idea.

(click)="acoordionFuntion(this);

"

1 respuesta 1

2

Para efectuar esto has de crear un componente hijo (div) el cual lleve la funcionalidad de selección:

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

Con la propiedad booleana "selected" mantendremos si esta seleccionado o no, y ngClass asignará la clase "selected" en caso que la propiedad "selected" sea true.

El componente padre deberá simplemente efectuar la carga del hijo tantas veces como deseemos:

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

En caso de querer solamente seleccionar uno podríamos modificar el componente hijo añadiendo un eventemitter que se lance al ejecutar la selección:

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

Y el componente padre escuchar todos los eventos de los componentes hijos de tipo AccordionDiv para que solo permita seleccionar el actual:

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

Un ejemplo ejecutable: https://next.plnkr.co/edit/8htQBguMf3zEH48X?open=lib%2Fapp.ts&deferRun=1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.