Having trouble understanding why my carousel component is present but none of the CSS or images are showing up.
This is my app.component.ts file:
import { Component } from '@angular/core';
// Import our Carousel Component
import {CSSCarouselComponent} from './carousel.component';
@Component({
selector: 'my-app',
directives: [CSSCarouselComponent],
templateUrl: 'app/app.component.html'
// Declare the use of css-carousel tag in this component
})
export class AppComponent { }
Next, let's look at carousel.component.ts:
// Import Component from angular core package
import {Component} from '@angular/core';
// Import Image interface
import {Image} from './image.interface';
// Component Decorator
@Component({
selector: 'css-carousel',
template:`
<div class="cover">
<div class="carousel">
<ul class="slides">
<li *ngFor="let image of images">
<h2>{{image.title}}</h2>
<img src="{{image.url}}" alt="">
</li>
</ul>
</div>
</div>
`,
styles: [`
.carousel{
overflow:hidden;
...
...
}
@keyframes carousel{
0%, 23% {margin-left:0}
...
...
}
// Images array implementing Image interface
var IMAGES: Image[] = [
{ "title": "Cod en Papillote ", "url": "images/cod.jpg" },
...
...
];
Now, let's take a look at the Image Class used to declare an image:
export interface Image {
title: string;
url: string;
}
This is my app.component.html file (where the carousel should be displayed):
<!-- Navbar Info -->
<nav class="navbar navbar-fixed-top">
...
...
</ul>
</div>
</nav>
<body>
<css-carousel></css-carousel>
</body>
All other files are set up as per the default Angular 2 quickstart setup. While I was able to run the carousel as a standalone component, I'm facing difficulties integrating it with the navigation bar.