0

al cargar la pagina se muestra el texto, pero como puedo hacer que se cargue solo 300 caracteres de ese texto, ocultar el texto que sobrepase los 300 caracteres, aparezca un botón leer más, una vez pulsado, se muestra el texto que falta.

Lo estoy haciendo en angular, pero la verdad que no se, como se hace, mi código es el siguiente.

Aqui es donde tengo el ts.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Component } from '@angular/core';

@Component({
  selector: 'app-informacion-marvel',
  templateUrl: './informacion-marvel.component.html',
  styleUrls: ['./informacion-marvel.component.css']
})
export class InformacionMarvelComponent {
   texto: string="Marvel Entertainment, LLC (antes conocida como Marvel Enterprises Inc. y Toy Biz) es una empresa estadounidense de entretenimiento, formada de la fusión de Marvel Entertainment Group, Inc. y" +
   "Toy Biz, Inc. La compañía es una propiedad total de The Walt Disney Company, y es conocida principalmente por sus unidades Marvel Comics, Marvel Animation y Marvel Television." +
   "Es la antigua empresa matriz de Marvel Studios (que en agosto de 2015 se convirtió en una filial de Disney), que desarrolla y produce el Universo cinematográfico de Marvel."+
   "El 31 de diciembre de 2009, The Walt Disney Company se fusionó con Marvel Entertainment, Inc. por 4 mil millones de dólares.Ha sido una Sociedad de responsabilidad limitada (LLC, en el "+
   "original Limited Liability Company) desde entonces. Disney ha declarado que la asociación con la empresa no afectará a los productos de Marvel, como tampoco la naturaleza de los personajes de Marvel."+   
   "Con los años, Marvel Entertainment ha entrado en varias asociaciones y negociaciones con otras empresas a través de una variedad de negocios. A partir de 2016, Marvel tiene acuerdos de licencia" +
   "de películas con 20th Century Fox y Columbia Pictures, y tuvo un acuerdo de licencia de un parque temático con Universal Parks & Resorts existente antes de la adquisición de Disney." +
   "Además de su contrato con Universal, los personajes y las propiedades de Marvel también han aparecido en Walt Disney Parks and Resorts, otra unidad de Disney."

   btnMas(){
    console.log(this.texto.length)
   }

}

y este es el html

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<app-header></app-header>
<div class="informacionMarvel container-fluid">
    <div class="textoInformacion py-5 px-5 mx-auto fs-5">
        <p>{{texto}}</p>
        
    </div>
    
   <div class="imagenMarvel d-block text-center">
    <a href="https://www.marvel.com/">
        <img class="img-fluid" src="../../../../../assets/img/marvel.svg" width="30%" height="40%">
      </a>

   </div>
        
</div>
<app-footer></app-footer>

2 respuestas 2

4

Puedes utilizar condicionales y el pipe 'slice' en el lado de html.

{{ (text.trim().length>300 && isClose)? (text | slice:0:300)+'...':(text) }}

Lo que hace ahí es validar si el texto tiene más de 300 caracteres y si la variable "isClose" está en true (si esta variable está en true quiere decir que el texto debe de estar oculto).

(texto.length>300 && isClose)? // caso A

Si en caso es true el caso A, toma el texto y con el pipe slice, quiero que tomes el texto desde la posición 0 hasta el posición 300 y que le agregues tres puntos.

(texto | slice:0:300)+'...'

Si en caso es false el caso A (osea que es menor que 300), toma el texto original.

:(texto)

En el botón puedes implementarlo así:

//Html
<button (click)="onClick()">
 {{ isClose ? 'Ver más' : 'ver menos' }}
</button>

//Typescript
onClick() {
  this.isClose = !this.isClose;
}
4
  • si lo entiendo, muchas gracias, pero lo del botón como lo pongo después de la condición. porque, dentro de los ... puse un <p> para poner el evento ahí y me sale todo el código en vez del texto Commented el 30 ene. 2023 a las 14:04
  • asi lo hice ahora y no me sale todo el texto al hacer click en el boton Commented el 30 ene. 2023 a las 15:16
  • 1
    Tienes razón, se me olvidó implementar la funcionalidad del botón, ahí modifiqué la respuesta.
    – esphinx
    Commented el 30 ene. 2023 a las 20:06
  • oss delicatesen xD, muchas gracias, te envié una petición al linkedin así estamos en contacto, muchísimas gracias tio, del 10 Commented el 30 ene. 2023 a las 22:11
1

Este es el html donde tengo la condición para que si excede el limite de 300 caracteres se oculte los demás y luego cuando clickeo en el botón leer mas se muestra todo el texto

Si el texto contiene mas de 300 caracteres, muéstralos

<div *ngIf="texto.length > 300"> 

si el texto contiene mas de 300 caracteres ocúltalos

<p>{{(texto | slice:0:300)+'...' }} </p> 
<button type="button" (click)="showAll()">Read More</button> 
</div> 

Y este es el ts donde tengo lo demás

export class InformacionMarvelComponent { 

texto: string="Marvel Entertainment, LLC (antes conocida como Marvel     Enterprises Inc. y Toy Biz) es una empresa estadounidense de entretenimiento"; 
 maxLength = 300 showAll = () => 
 this.maxLength = this.texto.length;
1
  • 2
    Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 30 ene. 2023 a las 15:47

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.