CODEWITHSUNDEEP
angular
Vesco
Vesco

Reputation: 138

Angular Material load card content

Hi guys I can't understand why when i click on a card lo load some content it than loads it on every cards see image here: https://i.sstatic.net/RFvBA.jpg I?m pretty newbi on angular and do the most by coping paste from the hero tour on the angular website. Data are fetched from my database my child html

<div *ngIf="personaggio">
  <h2> {{ personaggio.nome | uppercase }} Suoni:</h2>
  <div>
    <div *ngFor="let suono of suoni">
      <div *ngIf="suono.fk_to_personaggi === personaggio.idpersonaggi">
      {{suono.titolo}}
    </div>
  </div>
</div>

my child ts

import { Component, OnInit,Input } from '@angular/core';
import { Suono } from '../class/suono';
import { Personaggio } from '../class/personaggio';
import { MyService } from '../services/my.service';

@Component({
  selector: 'app-suoni',
  templateUrl: './suoni.component.html',
  styleUrls: ['./suoni.component.css']
})
export class SuoniComponent implements OnInit {
  @Input() personaggio: Personaggio;
  suoni: Suono[];

  constructor(private mySevice: MyService) { }

  ngOnInit() {
    this.getSuoni();
  }

  getSuoni(): void {
    console.log("called getSuoni()");
    this.mySevice.getSuoni()
    .subscribe(suoni => this.suoni = suoni);
  }
}

my parent html

<mat-card class="card" *ngFor="let personaggio of personaggi" (click)="onSelect(personaggio)" >

  <mat-card-header>
    <div mat-card-avatar class="card-header"></div>
    <img mat-card-avatar src={{personaggio.immagine}}>
    <mat-card-title>{{personaggio.nome}}</mat-card-title>
    <mat-card-subtitle>{{personaggio.youtube_link}}</mat-card-subtitle>
  </mat-card-header>

  <mat-card-content>
    <app-suoni [personaggio]="selectedPersonaggio"></app-suoni>
  </mat-card-content>

</mat-card>

my parent ts

import { Component, OnInit } from '@angular/core';
import { Personaggio } from '../class/personaggio';
import { MyService } from '../services/my.service';


@Component({
  selector: 'app-personaggi',
  templateUrl: './personaggi.component.html',
  styleUrls: ['./personaggi.component.css']
})
export class PersonaggiComponent implements OnInit {

  personaggi: Personaggio[];
  selectedPersonaggio: Personaggio;

  constructor(private mySevice: MyService) { }

  ngOnInit() {
    this.getPersonaggi();
  }

  getPersonaggi(): void {
    this.mySevice.getPersonaggi()
    .subscribe(personaggi => this.personaggi = personaggi);
  }

  onSelect(personaggio: Personaggio): void {
    console.log("called onSelect()");
    this.selectedPersonaggio = personaggio;
  }

}

Upvotes: 1

Views: 3217

Answers (1)

displayName
displayName

Reputation: 1106

You should only display mat-card-content inside mat-card which displays information about selected 'personaggio'. You can use ngIf directive for that.

<mat-card class="card" *ngFor="let personaggio of personaggi" (click)="onSelect(personaggio)" >

  <mat-card-header>
    <div mat-card-avatar class="card-header"></div>
    <img mat-card-avatar src={{personaggio.immagine}}>
    <mat-card-title>{{personaggio.nome}}</mat-card-title>
    <mat-card-subtitle>{{personaggio.youtube_link}}</mat-card-subtitle>
  </mat-card-header>

  <mat-card-content *ngIf="personaggio === selectedPersonaggio">
    <app-suoni [personaggio]="selectedPersonaggio"></app-suoni>
  </mat-card-content>

</mat-card>

Upvotes: 1

Related Questions