1

1.- Estoy creando una libreria de npm a través de angular que contiene esto:

<div class="carrusel">
    <ng-content select="[libContent]"></ng-content>
</div>

2.- Aquí consumo la librería del npm:

<ngx-lib-carrusel [libHeight]="300">
  <img libContent src="/img.img1.jpg">
  <div libContent>
    <p>prueba 2</p>
    <p>prueba 3</p>
  </div>
  <p libContent>prueba 4</p>
  <p libContent>prueba 5</p>
</ngx-lib-carrusel>

3.-ahora el resultado se ve asi :

Vista del resultado actual

4.- En mi libreria quiero colocar un element <div class="card"> que se mostraría así:

<div class="carrusel">
  <div class="card">
    <ng-content select="[libContent]"></ng-content>
  </div>
</div>

5.- por cada libContent ingresado desde mi contenido deseo repetir ese card para obtener el resultado deseado, que se vería así:

Vista del resultado deseado

En pocas palabras el card es muy importante ya que tiene unos estilos que le da vida a la vista y los deseo multiplicar por cada libContent, porque ahora sólo está mostrando un <div class="card">.

2 respuestas 2

0

Para hacer esto debes usar la directiva ngFor*, con esto podras generar varios componentes dependiendo de los items que tengas en un array por ejemplo.

Docs: https://angular.io/api/common/NgFor

Un pequeño ejemplo con el código que has pasado:

<div class="carrusel">
  <div *ngFor="let item of libContent; index as i;" class="card">
    <ng-content select="[item]"></ng-content>
  </div>
</div>
5
  • Podrías añadir un ejemplo de cómo hacerlo. Responder sólo con un enlace se considera de baja calidad. Haz clic en editar y agrega lo que haga falta. Te invito a repasar Cómo responder. Tienes suficiente reputación en el sitio para saber cómo funciona. Commented el 29 ene. a las 8:05
  • Pero, si el valor que necesita para la librería es uno de los items de libContent ¿no debería pasar item a la librería? Es decir: <ng-content select="[item]"> Commented el 29 ene. a las 12:21
  • en teoría y yo también pensé que seria un *ngFor pero lastimosamente el libContent alli te traera unefined apesar que declaras el viewChild , ContendChild o contendChilde :( Commented el 29 ene. a las 13:42
  • A tu librería le pasas un array desde donde se esta implementando? Commented el 29 ene. a las 13:47
  • por eso he creado algo asi @Content('libContend') variable! : any y este tu le das con log y te trae undefined o como tu lo leerias este dato de dato Commented el 29 ene. a las 14:10
0

componente de la libreria card dinamico :

<ng-content></ng-content>

componente en donde utilizas la liberia pon un etiqueta en mi caso pongo esto #libCarruselItem lo malo es que solo funciona con "img" y "div" pero con "p" el contenido lo hace un heigth menor que los otros:

<ngx-lib-carrusel [libHeight]="300">
  <img #libCarruselItem src="/img.img1.jpg">
  <div #libCarruselItem>
    <p>prueba 2</p>
    <p>prueba 3</p>
  </div>
  <p #libCarruselItem>prueba 4</p>
  <p #libCarruselItem>prueba 5</p>
</ngx-lib-carrusel>

ahora en el ts de la libreria :

@ContentChildren('libCarruselItem') libCarruselItems: QueryList<any>;
  ngAfterViewInit() {
     if (this.libCarruselItems) {
       this.libCarruselItems.toArray().forEach((item) => {
         item.nativeElement.classList.add('card');
       })
     }
  }

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.