Display a details model where data comes from an object array (angular 14)-CodePudding

I'm having trouble to display a model with details for different elements. Overall, I have a group of cards which contains different information data. The goal is: when I click on the button to display more details of that card, a modal is called and its name, description and image are displaying according to the card I selected. The thing is, all that information comes from an array in a separated .ts file.

First, I created the class and an array of elements that'll be assigned to a property of that class type on the AnimalsList.component.ts:

export class Animals{
  title: string
  desc: string
}

export var arrayAnimals = [
  {
    name: "Cat!",
    desc: "Here comes more text...",
  },

On the AnimalsList.component.ts, I created the property animals and assigned the class as well as the array to it:

animals: Animals[]
ngOnInit(): void {
  this.animals = arrayAnimals
}

My AnimalsList.component.html has a ngFor to display the animals list and a button to show the modal:

<div *ngFor="let animal of animals"> 
 <p>{{ animal.name }} </p>
 <p>{{ animal.desc}} </p>
 <button (click)="openAnimalModal(animal)">Detail</button>
</div>

So, I tried the following scripts by using Ng Bootstrap library and jquery but sadly they don't return any data, only raw html content (like the "Testing" text).

On the AnimalModal.component.ts:

  @Input(animals): Animals;
  constructor(
    public activeModal: NgbActiveModal
  ){}

On the AnimalModal.component.html

  <p>Testing!</p>
  <p>{{ animals.name}}</p>
  <p>{{ animals.desc }}</p>

To open and try to pass data to that modal, here's how the AnimalsList.component.ts (the modal) looks like:

  openAnimalsModal(animals: Animals){
    const modalRef = this.modalService.open(AnimalModalComponent);
    modalRef.componentInstance.animals= animals;
  }

I'd appreaciate any help. Thanks in advance!

CodePudding user response：

Angular Material is pretty simple. Do this... On your openAnimalsModal() method:

...
constructor(private modal:MatDialog){}
...
openAnimalsModal(animals: Animals){
  this.modal.open(AnimalModalComponent, {
    data: { animals }})
}

Then on your AnimalModalComponent, Do this:

import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

...

constructor(
  public dialogRef: MatDialogRef<AnimalModalComponent>,
  @Inject( MAT_DIALOG_DATA ) public data: DialogData
){}

ngOnInit(): void {
    console.log(this.data)
}