Readmore Toggle

component.ts

showFullText?: boolean = false;
selectedItemIndexes: string[] = [];

toggleFullText(index: number) {
    const indexKey = index.toString();
    const foundIndex = this.selectedItemIndexes.indexOf(indexKey);
    if (foundIndex > -1) {
      this.selectedItemIndexes.splice(foundIndex, 1);
    } else {
      this.selectedItemIndexes.push(indexKey);
    }
}

component.html

<div class="program-cards">
    <ng-container *ngFor="let item of mockData?.programData; let i = index">
      <article class="card">
        <div class="card-header">
          <h6 class="card-title">{{ item.title }}</h6>
          <p class="card-text">{{ selectedItemIndexes.includes(i.toString()) ? item.lead || '' : (item.lead || '' | summary) }}</p>
          <button (click)="toggleFullText(i)" *ngIf="item.lead" class="card-readmore">Bővebben</button>
        </div>
        <div class="card-footer">
          <span class="card-footer-time">{{ item.time }}</span>
        </div>
      </article>
    </ng-container>
  </div>

mock.ts

import { IProgram } from '../../home-program.definitions';

// eslint-disable-next-line functional/prefer-readonly-type
export const MockDayOneHun: IProgram = {
  programTitle: '1. nap',
  programDate: '2023. szeptember 14',
  programDay: 'csütörtök',
  programData: [
    {
      time: '09:00 ',
      title: 'Nyitó kulturális előadás',
      lead: '',
    },
    {
      time: '09:10',
      title: 'Az esemény megáldása',
      lead: 'A négy magyar történelmi egyház (katolikus, református, evangélikus, zsidó) vezetője megáldja az eseményt.',
    },
    {
      time: '09:30',
      title: 'Magas szintű szekció',
      // eslint-disable-next-line max-len
      lead: 'A szekcióban állam- és kormányfők osztják meg gondolataikat arról, miként tudnak a politikai döntéshozók hozzájárulni a családok biztonságához a kihívásokkal terhelt korunkban.',
    },
    {
      time: '11:20 ',
      title: 'Keynote előadás  ',
      lead: '',
    },
    {
      time: '12:00',
      title: 'Ebédszünet',
      lead: '',
    },
    {
      time: '13:10',
      title: 'Keynote előadások',
      // eslint-disable-next-line max-len
      lead: 'Az elmúlt években a világjárvány, az Ukrajnában zajló háború, az energiaválság és a globális méretű gazdasági nehézségek is megroppantották a családok biztonságérzetét. Fizikai, anyagi, lelki értelemben is új kihívásokkal szembesülnek közösségeink. Hogyan gondolkodik háborúról és békéről az egyház? És hogyan a biztonságpolitikai szakértő? Mit tehet a politikai döntéshozó, és hogyan látja a kialakult helyzetet a filozófus? A szekció többek között ezekre a kérdésekre keresi a válaszokat. ',
    },
    {
      time: '14:45',
      title: 'Kávészünet ',
      lead: '',
    },
    {
      time: '15:10',
      title: 'Keynote előadás ',
      lead: '',
    },
    {
      time: '16:10',
      title: 'Szakmai panelbeszélgetés ',
      // eslint-disable-next-line max-len
      lead: 'Demográfusok, kutatók, magyar és külföldi családszervezetek vezetői osztják meg gondolataikat a család jelentőségéről a hétköznapokban, a nemzetek gyarapodásában, az értékek továbbadásában. ',
    },
    {
      time: '17:00',
      title: 'A konferencia első napjának vége',
      lead: '',
    },
    {
      time: '19:00',
      title: 'Gálavacsora',
      lead: '',
    },
  ],
};