0

¿cómo están?. Me encuentro aprendiendo Angular y para ello estoy haciendo una aplicación consumiendo una API de los personajes de Rick And Morty, y tengo un problema y es que en la card del personaje muestra información muy básica. Cuando le da click en la imagen del personaje muestra más información, pero esta información me está mostrando la información afuera de la card. Lo que quiero saber es como poner esa información dentro de la card.

Ejemplo:

Imagen de la información en general Imagen de la información en general

Como tengo mi card Como tengo mi card

Asi es como lo quiero Asi es como lo quiero

Este es mi codigo

character.component.ts

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Character } from '@app/shared/interfaces/character.interface';


    @Component({
      selector: 'app-character',
      templateUrl: './character.component.html',
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
        
    export class CharacterComponent {
      @Input()character!: Character;
    }

character.component.html

<div class="card">
    <div class="image">
        <a [routerLink]="['/character-details', character.id]">
            <img [src]="character.image" [alt]="character.name" class="card-img-top" />
        </a>
    </div>
    <div class="card-inner">
        <div class="header">
            <a [routerLink]="['/character-details', character.id]">
                <h2>{{ character.name | slice: 0:15}}</h2>
            </a>
            <h4 class="text-muted">{{ character.gender }}</h4>
            <small class="text-muted">{{ character.created | date }}</small>
        </div>
    </div>
</div>

character-details.component.html

<div class="row justify-content-center mt-3" *ngIf="character$ | async as character">
    <div class="col-xs-12 col-sm-6 col-md-6 justify-content-center">
        <app-character [character]="character">
        </app-character>
        <ng-content select="header"></ng-content>
        <h4 class="card-inner header text-muted">{{ character.status }}</h4>
        <h4 class="card-inner header text-muted">{{ character.species }}</h4>
        <!--<h4 class="card-inner header text-muted">{{ character.episode }}</h4>  -->
    </div>
</div>
<button (click)="onGoBack()" class="btn btn-primary btn-lg mt-3">Back</button>

¿Cómo podría solucionar esto sin modificar character.component.html?

3
  • Deberías ingresar el status y el species dentro del character, ya que la tarjeta la creas es desde el componente character, otra opción es que la tarjeta la crees en el character-details, el estilo 'card' lo tienes dentro de character.
    – ayaleil
    Commented el 8 jun. 2022 a las 21:24
  • pero si ingreso el status y el species dentro del character va a mostrar los detalles en la lista general de los personajes, la idea es que cuando le de click en la imagen muestre todos los detalles del personaje, como podria hacerlo?, lo intente con un hidden pero nose como :/ Commented el 9 jun. 2022 a las 22:03
  • Podrias usar un ngIf y un flag booleano(el cual lo activas con el click, cambias de false a true), entonces dentro del character creas un contenedor del status y el species y ya cuando le des click cambias el ngIf para que se muestre. tambien puedes poner un [ngClass]="{'hidden': !flag, 'block': flag}", en este caso cambias la clase dependiendo si esta en true o false, igualmente con el click.
    – ayaleil
    Commented el 10 jun. 2022 a las 16:38

1 respuesta 1

0

Lo puedes hacer de la siguiente manera

character-details.component.html

En este componente lo unico que haces es quitar los detalles del character y lo pasas al componente de character

<div class="row justify-content-center mt-3" *ngIf="character$ | async as character">
  <div class="col-xs-12 col-sm-6 col-md-6 justify-content-center">
    <app-character [character]="character"> </app-character>
    <ng-content select="header"></ng-content>

    <!--<h4 class="card-inner header text-muted">{{ character.episode }}</h4>  -->
  </div>
</div>
<button class="btn btn-primary btn-lg mt-3">Back</button>

luego en el ts del character te creas el booleano

character.component.ts

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Character } from '@app/shared/interfaces/character.interface';


    @Component({
      selector: 'app-character',
      templateUrl: './character.component.html',
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
        
    export class CharacterComponent {
      @Input()character!: Character;
      hidden: boolean = false;
    }

En este caso lo ponemos por defecto en false, para cuando el componente inicie los detalles no salgan.

luego usas el siguiente código en el componente de

character.component.html

<div class="card" (click)="hidden = !hidden">
  <div class="image">
    <a [routerLink]="['/character-details', character.id]">
      <img
        [src]="character.image"
        [alt]="character.name"
        class="card-img-top"
      />
    </a>
  </div>
  <div class="card-inner">
    <div class="header">
      <a [routerLink]="['/character-details', character.id]">
        <h2>{{ character.name | slice: 0:15 }}</h2>
      </a>
      <h4 class="text-muted">{{ character.gender }}</h4>
      <small class="text-muted">{{ character.created | date }}</small>
      <div [ngClass]="{'d-none': hidden === false }" >
        <h4 class="card-inner header text-muted">{{ character.status }}</h4>
        <h4 class="card-inner header text-muted">{{ character.species }}</h4>
      </div>
    </div>
  </div>
</div>

A la tarjeta le agregamos un evento click que lo que hará es que cuando oprimamos nos cambie el flag hidden que tenemos en el ts y donde tenemos los nuevos detalles de species y status lo encerramos dentro de un div y usamos un ngClass, esto nos agrega o remueve la clase dependiendo del flag hidden que usamos. en este caso la clase que agrego es el d-none de bootstrap.

Aqui lo puedes ver en vivo: Stackblitz

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.