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

Question

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!

Which framework are you using ? Have you read its documentation ? — MGX
– MGX, Commented Oct 11, 2022 at 9:25
@MGX Angular... and yes, i have. I m having trouble to get each card's information and pass it to a modal. That's the main problem here. — KimiH
– KimiH, Commented Oct 11, 2022 at 9:27
@MGX as I mentioned on the post, I tried this method by using Angular Bootstrap. I also tried with Angular Material but i couldn't achieve anything but a blank modal. — KimiH
– KimiH, Commented Oct 11, 2022 at 9:38
If you're not bound to any library I suggest you use angular material, and read the documentation correctly. It's really easy to do, they even give you a fully working code to do so. — MGX
– MGX, Commented Oct 11, 2022 at 9:39

kibet · Accepted Answer · 2022-10-11 10:50:07Z

1

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

answered Oct 11, 2022 at 10:50

kibet

4354 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KimiH Over a year ago

What would the DialogData type be?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related