I'm struggling to showcase detailed models for various elements in my project. In essence, I have a collection of cards that hold diverse information data. The objective is simple: upon clicking a button to reveal more details about a selected card, a modal should appear displaying its name, description, and image based on the specific card chosen. The challenge lies in the fact that all this information is sourced from an array stored in a separate .ts file.
Initially, I defined a class and an array of elements which would be linked to a property of that class type in the AnimalsList.component.ts file:
export class Animals{
title: string
desc: string
}
export var arrayAnimals = [
{
name: "Cat!",
desc: "Here comes more text...",
},
Within the AnimalsList.component.ts file, I declared the property 'animals' and assigned the class as well as the array to it:
animals: Animals[]
ngOnInit(): void {
this.animals = arrayAnimals
}
The AnimalsList.component.html file features an ngFor loop to display the list of animals and a button to trigger the modal:
<div *ngFor="let animal of animals">
<p>{{ animal.name }} </p>
<p>{{ animal.desc}} </p>
<button (click)="openAnimalModal(animal)">Detail</button>
</div>
My attempts to implement scripts utilizing Ng Bootstrap library and jQuery were unsuccessful, as they only returned raw HTML content (e.g., the "Testing" text).
In the AnimalModal.component.ts file:
@Input(animals): Animals;
constructor(
public activeModal: NgbActiveModal
){}
And in the AnimalModal.component.html file:
<p>Testing!</p>
<p>{{ animals.name}}</p>
<p>{{ animals.desc }}</p>
To launch the modal and attempt to pass data to it, here's how the AnimalsList.component.ts script for the modal looks like:
openAnimalsModal(animals: Animals){
const modalRef = this.modalService.open(AnimalModalComponent);
modalRef.componentInstance.animals= animals;
}
Any assistance would be greatly appreciated. Thank you in advance!