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>