Javascript – Toggling between card info

We can use the EventEmitter and @Output to call the parent code, which will store the index of which element was clicked, then we can use a ViewChildren to get all the child components that are present, then use the set index, to access the template.

I also use *ngFor as syntax to access the child component template!

`

CHILD TS

import { CommonModule } from '@angular/common';
import {
  Component,
  Input,
  ViewChild,
  TemplateRef,
  Output,
  EventEmitter,
} from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'information-data',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule],
  templateUrl: './child.component.html',
  styleUrl: './child.component.css',
})
export class ChildComponent {
  @ViewChild('childTemplate', { static: true })
  childTemplate!: TemplateRef<any>;
  icons = {
    faInfoCircle,
  };
  constructor() {}
  @Input() infoData!: string;
  @Input() visibleStatus!: boolean;
  @Input() headName!: string;
  @Input() displayInfo?: boolean;
  @Output() clickEvent: EventEmitter<void> = new EventEmitter<void>();

  questionClick() {
    this.visibleStatus = !this.visibleStatus;
    this.clickEvent.emit();
  }
}

CHILD HTML

<div class="col-12 col-sm-12 col-md-12 col-lg-12">
  <div class="col-sm-12 col-md-12 col-lg-12 p-2 info">
    <h6 (click)="questionClick()">
      {{ headName }}
      <fa-icon
        [icon]="icons.faInfoCircle"
        class="fa-1x text-primary"
        transform="shrink-2"
      ></fa-icon>
    </h6>
  </div>
  <ng-template #childTemplate>
    <div class="row" [hidden]="visibleStatus">
      <div class="col-12 bulb-section">
        <div class="row m-0">
          <div class="icon-bulb col">
            <p class="ml-4">
              {{ infoData }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
  <ng-container *ngIf="!displayInfo; then childTemplate"></ng-container>
</div>

MAIN.TS

import { CommonModule } from '@angular/common';
import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { ChildComponent } from './app/child/child.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ChildComponent],
  template: `
            <div class="card">
              <div class="card-body">
                <information-data 
                  [infoData]="salonInfo"
                  [headName]="salonHead"
                  [visibleStatus]="true"
                  [displayInfo]="true"
                  (clickEvent)="index = 0;"
                ></information-data>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4">
              <div class="card">
                <div class="card-body">
                  <information-data 
                    [infoData]="hospitalInfo"
                    [headName]="hospitalHead"
                    [visibleStatus]="true"
                    [displayInfo]="true"
                    (clickEvent)="index = 1;"
                  ></information-data>
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4">
              <div class="card">
                <div class="card-body">
                  <information-data 
                    [infoData]="travelInfo"
                    [headName]="travelHead"
                    [visibleStatus]="true"
                    [displayInfo]="true"
                    (clickEvent)="index = 2;"
                  ></information-data>
                </div>
              </div>
            </div>
            <div class="row pl-5 pr-5" *ngIf="getChild() as child">
              <ng-container *ngTemplateOutlet="child"></ng-container>
            </div>
  `,
})
export class App {
  @ViewChildren(ChildComponent) childComponents!: QueryList<ChildComponent>;
  name = 'Angular';
  travelHead = '12asdf3';
  travelInfo = '12asdf3';
  index = 0;
  hospitalInfo = '12asdfasdf3';
  hospitalHead = '12asdfasdf3';
  salonHead = '12zxcvxcvz3';
  salonInfo = '12zxcvxcvz3';

  getChild() {
    return this.childComponents?.get(this.index)?.childTemplate;
  }
}

bootstrapApplication(App);

Stackblitz Demo