'ngu-carousel' creates an error: TypeError: Cannot read property 'template' of undefined
VivaThapelo opened this issue · 5 comments
VivaThapelo commented
core.js:6185 ERROR TypeError: Cannot read property 'template' of undefined
at ngu-carousel.js:215
at DefaultIterableDiffer.forEachOperation (core.js:28173)
at NguCarousel.renderNodeChanges (ngu-carousel.js:210)
at SafeSubscriber._next (ngu-carousel.js:202)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at TakeUntilSubscriber._next (Subscriber.js:72)
at TakeUntilSubscriber.next (Subscriber.js:49)
Template file:
<ngu-carousel [inputs]="carouselBanner" [dataSource]="carouselItems" (onMove)="onmoveFn($event)" class="carousel container-fluid p-0 justify-content-between d-flex">
<div class="what-are-you-here-to">
<p class="what-are-you">What are you</p>
<p class="here-to-do">here to do?</p>
</div>
<ngu-item NguCarouselItem class="rectangle">
<div class="group">
<img src="favicon.ico" />
<p class="name">{{carouselItems[0].name}}</p>
<a class="start-here">START HERE <fa-icon [icon]="faArrowRight" size="1x" [styles]="{color:'black'}"></fa-icon></a>
</div>
</ngu-item>
<ngu-item NguCarouselItem class="rectangle">
<div class="group">
<img src="favicon.ico" />
<p class="name">{{carouselItems[1].name}}</p>
<a class="start-here">START HERE <fa-icon [icon]="faArrowRight" size="1x" [styles]="{color:'black'}"></fa-icon></a>
</div>
</ngu-item>
<ngu-item NguCarouselItem class="rectangle">
<div class="group">
<img src="favicon.ico" />
<p class="name">{{carouselItems[2].name}}</p>
<a class="start-here">START HERE <fa-icon [icon]="faArrowRight" size="1x" [styles]="{color:'black'}"></fa-icon></a>
</div>
</ngu-item>
<ngu-item NguCarouselItem class="rectangle">
<div class="group">
<img src="favicon.ico" />
<p class="name">{{carouselItems[3].name}}</p>
<a class="start-here">START HERE <fa-icon [icon]="faArrowRight" size="1x" [styles]="{color:'black'}"></fa-icon></a>
</div>
</ngu-item>
<ngu-item NguCarouselItem class="rectangle">
<div class="group">
<img src="favicon.ico" />
<p class="name">{{carouselItems[3].name}}</p>
<a class="start-here">START HERE <fa-icon [icon]="faArrowRight" size="1x" [styles]="{color:'black'}"></fa-icon></a>
</div>
</ngu-item>
<button NguCarouselPrev class="arrow left">
<fa-icon [icon]="faArrowLeft" size="2x" [styles]="{color:'white'}"></fa-icon>
</button>
<button NguCarouselNext class="arrow right">
<fa-icon [icon]="faArrowRight" size="2x" [styles]="{color:'white'}"></fa-icon>
</button>
</ngu-carousel>
Typescript file:
import {AfterViewInit, Component, OnInit} from '@angular/core';
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
import {faAngleRight} from '@fortawesome/free-solid-svg-icons';
import {NguCarouselConfig, NguCarouselStore} from '@ngu/carousel';
interface Items {
name: string;
image: string;
}
@Component({
selector: 'app-carousel',
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit, AfterViewInit {
carouselBanner: NguCarouselConfig;
rectRight;
faArrowLeft = faAngleLeft;
faArrowRight = faAngleRight;
carouselItems: Items[] = [
{
name: 'Mobile internet',
image: '',
},
{
name: 'Home internet',
image: '',
},
{
name: 'Get a device',
image: '',
},
{
name: 'Add a phone-line',
image: '',
},
{
name: 'Upgrade',
image: '',
}
];
constructor() { }
ngOnInit(): void {
this.carouselBanner = {
grid: { xs: 1, sm: 1, md: 1, lg: 1, xl: 1, all: 0 },
slide: 1,
speed: 400,
interval: {
timing: 3000,
initialDelay: 1000
},
point: {
visible: true
},
load: 2,
loop: true,
touch: true
};
}
ngAfterViewInit(): void {
}
onmoveFn(data: NguCarouselStore): void {
console.log(data);
}
moveForward(): void {
const first = this.carouselItems.shift();
this.carouselItems.push(first);
// tslint:disable-next-line:max-line-length
/* this.rectRight = 'transform: translate(-350px,0);-webkit-transform: translate(-350px,0);-o-transform: translate(-350px,0);-moz-transform: translate(-350px,0);';
*/
console.log(JSON.stringify(this.carouselItems));
}
moveBackward(): void {
const last = this.carouselItems.pop();
this.carouselItems.unshift(last);
console.log(JSON.stringify(this.carouselItems));
}
}
Package.json file:
{
"name": "mtn-carousel",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.2.4",
"@angular/common": "~11.2.4",
"@angular/compiler": "~11.2.4",
"@angular/core": "~11.2.4",
"@angular/forms": "~11.2.4",
"@angular/localize": "~11.2.4",
"@angular/platform-browser": "~11.2.4",
"@angular/platform-browser-dynamic": "~11.2.4",
"@angular/router": "~11.2.4",
"@devoto13/angular-fontawesome": "^0.5.0-5",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@ng-bootstrap/ng-bootstrap": "^9.0.2",
"@ngu/carousel": "^3.0.2",
"bootstrap": "^4.5.0",
"hammerjs": "^2.0.8",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.3",
"@angular/cli": "~11.2.3",
"@angular/compiler-cli": "~11.2.4",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.5"
}
}
asadmalik3 commented
I am able to reproduce same issue with Angular 9 and @ngu/carousel@2.1.0
ChrisAlanWalker commented
My "issue" was I had a div tag between the ngu-carousel tag and the div that the nguCarouselDef directive was using.
After removing that styling div, my carousel showed up.
WilRBonilla commented
@katlehotech Did you ever get past this issue?
github-actions commented
This issue has been automatically marked as stale because it has not had recent activity for 6 months. It will be closed if no further activity occurs. Thank you for your contributions.
github-actions commented
Closing this issue due to no activity for 6 months.