search

avivharuzi / ngx-glide

Angular wrapper component of Glide carousel library
https://www.npmjs.com/package/ngx-glide
MIT License
29 stars 7 forks source link

how do i put two ngx components into one component? #6

Closed juanicastellan0 closed 4 years ago

juanicastellan0 commented 4 years ago

I have two ngx glide on a landing page but I am having problems instantiating the second glide since it looks for it by the name of the glideel variable

I wish I could change the name of the variable that declares the main component to be able to instantiate two glides in one place

avivharuzi commented 4 years ago

Could you give some code example which can I look for the problem...

juanicastellan0 commented 4 years ago

landing page: image user-cards-carousel: image image accepted-payment-methods: image image glide-service: image console: image

avivharuzi commented 4 years ago

Few things you can try:

  1. Change ViewChild to specific element for example:

user-cards-carousel:

<ngx-glide #userCardsCarouselGlide>...</ngx-glide>
@ViewChild('userCardsCarouselGlide', { static: false }) glide: NgxGlideComponent;

accepted-payment-methods:

<ngx-glide #acceptedPaymentMethodsGlide>...</ngx-glide>
@ViewChild('acceptedPaymentMethodsGlide', { static: false }) glide: NgxGlideComponent;
  1. Check your data is ready when declaring ngx-glide in HTML of what I see its looking OK but you can also make some extra code and add *ngIf for example:
<ng-container *ngIf="user_comments && user_comments.length > 0">
  <ngx-glide #userCardsCarouselGlide>...</ngx-glide>
</ng-container>
  1. Try to replace (buildedBefore)="play()" to (mountedAfter)="play()"
ErrTem commented 1 year ago

Few things you can try:

  1. Change ViewChild to specific element for example:

user-cards-carousel:

<ngx-glide #userCardsCarouselGlide>...</ngx-glide>
@ViewChild('userCardsCarouselGlide', { static: false }) glide: NgxGlideComponent;

accepted-payment-methods:

<ngx-glide #acceptedPaymentMethodsGlide>...</ngx-glide>
@ViewChild('acceptedPaymentMethodsGlide', { static: false }) glide: NgxGlideComponent;
  1. Check your data is ready when declaring ngx-glide in HTML of what I see its looking OK but you can also make some extra code and add *ngIf for example:
<ng-container *ngIf="user_comments && user_comments.length > 0">
  <ngx-glide #userCardsCarouselGlide>...</ngx-glide>
</ng-container>
  1. Try to replace (buildedBefore)="play()" to (mountedAfter)="play()"

❤️ thanks a lot