I am building a project with Angular 6 that requires me to import styles from an external js file in order to build a custom Google Map. However, it doesn't seem to be importing into my .ts file correctly. Any help would be great!
In my component
import {MapStyles} from './mapstyle.js'
#Component({
selector: 'map',
template: '<div #tref style="width:100%; height:100%;"></div>'
})
export class Map implements AfterViewInit {
...
ngAfterViewInit() {
console.log(MapStyles) //is 'undefined'
}
const mapProperties = {
styles: MapStyles
};
}
The file I'm trying to import (mapstyle.js):
export var MapStyles = [
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#d3d3d3"
}]
},
...
I've tried things such as
import * as MapStyles from './mapstyle.js'
and
var MapStyles = [...]
but no luck. thanks!
This is how you can import and use a variable from an imported file in Angular X projects.
map-config.ts
export const mapStyle = [
{
'elementType': 'labels.icon',
'stylers': [
{
'visibility': 'off'
}
]
},
{
'featureType': 'poi.medical',
'elementType': 'labels.icon',
'stylers': [
{
'visibility': 'off'
}
]
}
];
map.components.ts
import { Component, OnInit } from '#angular/core';
import { mapStyle } from './map-config';
#Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
mapStyle = mapStyle;
constructor() {
//
}
}
I am considering MapStyles is a variable which is from external js file.
I had a similar requirement and this is how I have solved it,
I had loaded javascript file from root component and I am trying to use the variable inside sub component as shown below.
Related
I need to load components dynamically to view on some button click.
I have created on directive and some components in my custom module.
But when I try to create new instance of component it says No component factory found.
Here is my code structure.
dashboard module
#NgModule({
declarations: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent, InsertionDirective],
imports: [
CommonModule,
GridsterModule,
ButtonsModule,
ChartsModule,
DropDownsModule
],
entryComponents: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent],
exports: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent]
})
export class DashboardModule {
static customization(config: any): ModuleWithProviders {
return {
ngModule: DashboardModule,
providers: [
{ provide: Service, useClass: config.service }
]
}
}
}
dashboard/insert directive
import { Directive, ViewContainerRef } from '#angular/core';
#Directive({
selector: '[appInsertion]'
})
export class InsertionDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
1. dashboard/mainMainPageComponent.ts
import { Component, OnInit, ViewChild, ComponentFactoryResolver, ComponentRef, Type } from '#angular/core';
import { Service } from 'src/app/services/service';
import { Widget } from 'src/app/interface/widget';
import { GridsterConfig, GridsterItem } from 'angular-gridster2';
import { SETTINGS } from '../settings'
import { InsertionDirective } from '../insertion.directive';
import { ChartComponent } from '#progress/kendo-angular-charts';
#Component({
selector: 'dasbhoard-main-page',
templateUrl: './main-page.component.html',
styleUrls: ['./main-page.component.css']
})
export class MainPageComponent implements OnInit {
componentRef: ComponentRef<any>;
childComponentType: Type<any>;
#ViewChild(InsertionDirective)
insertionPoint: InsertionDirective;
public title: string;
public widgets: Array<{ widget: Widget, grid: GridsterItem, type: string }> = [];
public options: GridsterConfig;
constructor(private service: Service, private componentFactoryResolver: ComponentFactoryResolver) {
this.title = 'Dashboard';
}
ngOnInit() {
this.options = {
itemChangeCallback: MainPageComponent.itemChange,
itemResizeCallback: MainPageComponent.itemResize,
};
}
addNewWidget(type: string) {
let widgetType = SETTINGS.widgetSetting[type];
let totalWidgets = this.widgets ? this.widgets.length : 0;
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(widgetType.useClass);
//widgetType.useClass = ChartsComponent
// when I pass it statically its ok
//error here
let viewContainerRef = this.insertionPoint.viewContainerRef;
viewContainerRef.clear();
this.componentRef = viewContainerRef.createComponent(componentFactory);
this.widgets.push({ widget: { id: totalWidgets, header: `Widget ${totalWidgets} Header`, content: `<h1>Widget ${totalWidgets} Body</h4>` }, grid: { cols: 1, rows: 1, x: 0, y: 0 }, type: type });
}
}
dashboard/main-component/main-component.html
<ng-template appInsertion> </ng-template>
<button kendoButton(click) = "addNewWidget('charts')"[primary] = "true" class="pull-right" > Add Chart Widget </button>
I have each and every posts and all says you need to insert componets into entry points but I've already included all components to entry points. And all components are inside the same module but still it says no No component factory found for ChartsComponent. Did you add it to #NgModule.entryComponents?.
Any one please can you find out the where I'm doing wrong?
Thanks in advance.
I think it's just a typo:
In entryComponents you've written ChartsComponent and in the resolveComponentFactory method you've written ChartComponent
Could that be it?
I followed official angular-cli tutorial to integrate angular-universal to my existing angular-cli app.
I am able to do SSR for my angular-cli app. But when I try to integrate ngx-leaflet, I am getting following error:
ReferenceError: navigator is not defined
at D:\ng2-ssr-pwa\dist\server.js:40251:29
Now, I understand that leaflet is trying to access navigator object which is not available in the Node context. So I decided to delay leaflet rendering until the page is loaded in the browser as given in this SO thread.
But still I am getting same error. You can look the demo app with leaflet issue here.
./src/app/browserModuleLoader.service.ts:
import { Component, Inject, Injectable, OnInit, PLATFORM_ID } from '#angular/core';
import { isPlatformBrowser, isPlatformServer } from '#angular/common';
#Injectable()
export class BrowserModuleLoaderService {
private _L: any;
public constructor(#Inject(PLATFORM_ID) private _platformId: Object) {
this._init();
}
public getL() {
return this._safeGet(() => this._L);
}
private _init() {
if (isPlatformBrowser(this._platformId)) {
this._requireLegacyResources();
}
}
private _requireLegacyResources() {
this._L = require('leaflet');
}
private _safeGet(getCallcack: () => any) {
if (isPlatformServer(this._platformId)) {
throw new Error('invalid access to legacy component on server');
}
return getCallcack();
}
}
./src/app/leaflet/app/leaflet.component.ts:
// import * as L from 'leaflet';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, PLATFORM_ID } from '#angular/core';
import { BrowserModuleLoaderService } from '../browserModuleLoader.service';
import { isPlatformBrowser } from '#angular/common';
#Component({
selector: 'app-leaflet',
styleUrls: ['./leaflet.component.scss'],
template: `
<div *ngIf="isBrowser">
<div leaflet [leafletOptions]="options"></div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LeafletComponent {
isBrowser: boolean;
options = {};
constructor(private cdr: ChangeDetectorRef,
#Inject(PLATFORM_ID) platformId: Object,
private browserModuleLoaderService: BrowserModuleLoaderService
) {
this.isBrowser = isPlatformBrowser(platformId);
}
ngAfterViewInit() {
console.log('this.isBrowser ', this.isBrowser);
if (this.isBrowser) {
const L = this.browserModuleLoaderService.getL();
this.options = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
],
zoom: 5,
center: L.latLng({ lat: 38.991709, lng: -76.886109 }),
};
}
this.cdr.detach();
}
}
./src/app/app.component.html:
<div>
<app-leaflet></app-leaflet>
</div>
How do I safely delay the leaflet rendering until the platform is not browser?
EDIT:
I removed all code related to leaflet (browserModuleLoader.service.ts, leaflet.component.ts ect. ) and kept only leaflet module import in app.module.ts and actually this import is causing issue.
./src/app/app.module.ts:
import { AppComponent } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
// import { BrowserModuleLoaderService } from './browserModuleLoader.service';
// import { LeafletComponent } from './leaflet/leaflet.component';
import { LeafletModule } from '#asymmetrik/ngx-leaflet';
import { NgModule } from '#angular/core';
#NgModule({
declarations: [
AppComponent,
// LeafletComponent
],
imports: [
BrowserModule.withServerTransition({appId: 'my-app'}),
LeafletModule.forRoot()
],
providers: [
// BrowserModuleLoaderService
],
bootstrap: [AppComponent]
})
export class AppModule { }
./src/app/app.server.module.ts:
import {AppComponent} from './app.component';
import {AppModule} from './app.module';
import {ModuleMapLoaderModule} from '#nguniversal/module-map-ngfactory-loader';
import {NgModule} from '#angular/core';
import {ServerModule} from '#angular/platform-server';
#NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
How do I handle this nxg-leaflet module import?
Solved this issue by using Mock Browser.
server.ts:
const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();
global['navigator'] = mock.getNavigator();
Fixed by (global as any).navigator = win.navigator;, much more elegant, definitely native, and without relying on outdated Mock Browser.
I too was receiving this error with Angular Universal. Using the Mock Browser from the solution above did fix this error for me, but it also started a new Warning related to CommonJS. Rather than digging into that issue, I realized I was already using Domino in my server.ts file, so I could easily set the navigator with Domino. This is what worked best for me:
npm install domino
server.ts:
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs
.readFileSync(path.join('dist/<your-app-name>/browser', 'index.html')) //<--- REPLACE WITH YOUR APP NAME
.toString();
const window = domino.createWindow(template);
global['window'] = window;
global['document'] = window.document;
global['navigator'] = window.navigator;
I am currently learning the ropes around Angular2 in Ionic2.
I am going through a tutorial that is a bit outdated, and since i'm not 100% familiar with Angular2 environments, I can't debug this error:
Uncaught (in promise): Error: No component factory found for ReposPage. Did you add it to #NgModule.entryComponents? Error: No component factory found for ReposPage. Did you add it to #NgModule.entryComponents? at noComponentFactoryError
These are the files I've changed from a clean ionic2 install:
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
import { UsersPage } from '../pages/users/users';
import { ReposPage } from '../pages/repos/repos';
import { OrganisationsPage } from '../pages/organisations/organisations';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen
) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Users', component: UsersPage },
{ title: 'Repos', component: ReposPage },
{ title: 'Organisations', component: OrganisationsPage },
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
I have also created 3 pages through the ionic g page command.
any help on this issue would be grateful.
You need to include ReposPage in ngModule in app.module.ts .
It should be present in both declarations and entryComponents array.
#NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage //here
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage //here
],
as the error message clearly saying, you need to add 'ReposPage' to the entryComponents array in app.modules.ts file. Also you would need to add it as a declaration.
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage
]
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage,
ReposPage
]
I am using the latest version of Angular 2, V4.0.0 and I want to use graphs from the Chart.js library in my project without many complications.
How can I implement Chart.js in my angular project that does not give me problems in the final production?
You can implement Chart.js in a simple way with the following instructions:
1. Create a new project with angular-cli, skip if you already have one created
ng new example-chartjs
2. Install Chart.js in your project
npm install chart.js --save
3. Import Chart into its component
import Chart from 'chart.js';
4. Use Chart in your view and component
In your view:
<canvas id="myChart" width="400" height="400"></canvas>
In your component:
ngOnInit() {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {...});
}
The component should look similar to the following
import { Component, OnInit } from '#angular/core';
import Chart from 'chart.js';
#Component({
selector: 'app-chart',
templateUrl: './chart.component.html'
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {....});
}
}
Another alternative to use is to include the library from the file ".angular-cli.json"
1. Include in the scripts the library
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/chart.js/dist/Chart.min.js"
]
2. Declare a variable of type "any" in the controller
declare var Chart:any;
3. Use Chart in your view and component
In your view:
<canvas id="myChart" width="400" height="400"></canvas>
In your component:
ngOnInit() {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {...});
}
The component should look similar to the following
import { Component, OnInit } from '#angular/core';
declare var Chart:any;
#Component({
selector: 'app-chart',
templateUrl: './chart.component.html'
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {....});
}
}
First
npm install chart.js --save
Second
npm install #types/chart.js --save
Third - import Chart into component this way
import * as Chart from 'chart.js';
I've implemented the Chart.js on Angular at this way(first you'll need to install it using npm install chart.js --save):
The folder structure of my project
src/
assets/
app/
charjs/
services/
First I've created a service called report.service.ts :
src/app/services/report.service.ts
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class ReportService {
constructor(public http: Http) {
}
getReports() {
return this.http.get('assets/report.json')
.map(res => res.json());
}
}
This service it's created based on Angular tutorial showing how to get an external file(or link) and retrieve Json data.
This is important to collect the data from external source(if you must)
The difference between a service and a component, It's you need to to insert this service as a provider on the app.module.ts :
src/app/app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HttpModule, JsonpModule } from '#angular/http';
import { ReportService } from './services/report.service';
import { ChartjsComponent } from './chartjs/chartjs.component';
#NgModule({
declarations: [
AppComponent,
ChartjsComponent
],
imports: [
BrowserModule,
HttpModule,
JsonpModule
],
providers: [ReportService],
bootstrap: [AppComponent]
})
export class AppModule { }
After that I've created the component chartjs.component.js , and used AfterViewInit instead of OnInit. I've used this approach because our service retrieves the data in asynchronous and, because of that, the data can be returned before the view has been initiated.
src/app/chartjs/chartjs.component.ts
import { Component, AfterViewInit,ViewChild, ElementRef } from '#angular/core';
import Chart from 'chart.js';
import { Respon2se } from '#angular/http';
import 'rxjs/add/operator/map';
import { ReportService } from '../services/report.service';
#Component({
selector: 'app-chartjs',
templateUrl: './chartjs.component.html',
styleUrls: ['./chartjs.component.css']
})
export class ChartjsComponent implements AfterViewInit {
#ViewChild('graphcanvas') mycanvas:ElementRef;
createData;
chartOptions;
constructor(public reportService: ReportService) {
}
ngAfterViewInit() {
this.reportService.getReports().subscribe(reportsData => {
this.createData = {
labels: 'Scatter Dataset',
datasets: [{
label: "reportRetrieve",
data: reportsData,
}]
};
this.chartOptions = {
legend: {
display: false,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black'
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
color: "black"
},
scaleLabel: {
display: true,
labelString: "Report Size",
fontColor: "red"
}
}],
yAxes: [{
gridLines: {
color: "black",
display: false
},
scaleLabel: {
display: true,
labelString: "Chart Report",
fontColor: "green"
}
}]
},
layout: {
padding: {
left: 0,
right: 50,
top: 50,
bottom: 0
}
},
maintainAspectRatio: false
};
let ctx = this.mycanvas.nativeElement.getContext('2d');
new Chart(ctx, {
type: 'bubble',
data: this.createData,
options: this.chartOptions,
responsive: false
});
});
}
}
A few comments about this file;
. After imported the service, I've used subscribe,to allow charjs library to get the data and push it on new Chart
. ChartOptions its just a variable to change the chart view the way you want, I've used to create a bubble chart.
. You can define if it's responsive or not.
After you've done that, you'll need to set your html:
src/app/chartjs/chartjs.component.html
<div style="height: 600px;width: 600px">
<canvas #graphcanvas></canvas>
</div>
I hope that helps someone who couldn't implement on the other ways.
I believe, on Angular, chartjs will work like below, because context is available afterViewInit() not onInit()
import { Component, ViewChild, ElementRef, AfterViewInit} from '#angular/core';
import Chart from 'chart.js';
#Component({
selector: 'app-statistics',
templateUrl: './statistics.component.html',
styleUrls: ['./statistics.component.css']
})
export class StatisticsComponent implements AfterViewInit{
#ViewChild('myChart') Chart: ElementRef;
constructor() {
}
ngAfterViewInit() {
var ctx = this.Chart.nativeElement.getContext('2d')
var myChart = new Chart(ctx,{...})
}
}
as i am new to angular2 i am expecting to find out a solution for the following scenario.
The jQuery plugin is not working after getting the data -http://www.owlcarousel.owlgraphic.com/
i got issues on *var owl = jQuery(this.elementRef.nativeElement).find('#breif');
owl.owlCarousel();
My full code are given bellow
angular 2 component:
/ beautify ignore:start /
import {Component, OnInit , ElementRef, Inject } from '#angular/core';
import {FORM_DIRECTIVES} from '#angular/common';
import {CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/components/carousel';
/ beautify ignore:end /
import {Api} from '../../../../services/api';
declare var jQuery:any;
#Component({
selector: 'breif',
directives: [CAROUSEL_DIRECTIVES],
template: require('./template.html')
})
export class BreifComponent implements OnInit {
elementRef: ElementRef;
breifs: Object;
public myInterval:number = 5000;
public noWrapSlides:boolean = false;
public slides:Array<any> = [];
constructor(#Inject(ElementRef) elementRef: ElementRef , private api: Api) {
this.elementRef = elementRef
this.loadBreif();
}
ngOnInit() {
**var owl = jQuery(this.elementRef.nativeElement).find('#breif');
owl.owlCarousel();**
}
loadBreif(){
this.api.getBreif().subscribe(
data => {
this.breifs = data.result.articles;
},
err => console.error(err),
() => {
}
)
}
}
template.html
<div class="owl-carousel" id="breif" >
<div class="item" *ngFor="let breif of breifs"><h4>{{breif.title}}</h4></div>
Hi I posted a workaround of using owl owl.carousel#2.1.4 with angular 2.0.0 + webpack + jQuery#3.1.0.
Some of the issues I faced was with the jQuery plugin.
Please be more specific about the exception/error...
First U'll need to install the above^ packages via npm or similar.
Then --> npm install imports-loader
(for using owl within component otherwise u'll get fn is undefined...since third-party modules are relying on global variables like $ or this being the window object...).
In case you are using WebPack:
imports-loader as follow:
{test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery'}
Also u can use jQuery with webpack:
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
In the plugin section of webpack.common.js:
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
})
]
For images loader:
{
test: /\.(png|jpe?g|gif|ico)$/,
loader: 'file?name=public/img/[name].[hash].[ext]'
}
*public/img -- images folder
CSS loader:
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
The vendors.js file should import the following:
import 'jquery';
import 'owl.carousel';
import 'owl.carousel/dist/assets/owl.carousel.min.css';
Please be aware that owl.carousel 2 is still use andSelf() deprecated function of jQuery so we need to replace them with the new version of addBack().
Goto node_modules folder in the owl package dist/owl.carousel.js:
replace all the occurrences of andSelf() with --> addBack().
Now is the angular 2 part:
owl-carousel.ts:
import {Component} from '#angular/core';
#Component({
selector: 'carousel',
templateUrl: 'carousel.component.html',
styleUrls: ['carousel.css']
})
export class Carousel {
images: Array<string> = new Array(10);
baseUrl: string = './../../../../public/img/650x350/';
}
carousel.component.ts:
import { Component, Input, ElementRef, AfterViewInit, OnDestroy } from '#angular/core';
#Component({
selector: 'owl-carousel',
template: `<ng-content></ng-content>`
})
export class OwlCarousel implements OnDestroy, AfterViewInit{
#Input() options: Object;
$owlElement: any;
defaultOptions: Object = {};
constructor(private el: ElementRef) {}
ngAfterViewInit() {
for (var key in this.options) {
this.defaultOptions[key] = this.options[key];
}
var temp :any;
temp = $(this.el.nativeElement);
this.$owlElement = temp.owlCarousel(this.defaultOptions);
}
ngOnDestroy() {
this.$owlElement.data('owlCarousel').destroy();
this.$owlElement = null;
}
}
carousel.component.html:
<owl-carousel class="owl-carousel"[options]="{navigation: true, pagination: true, rewindNav : true, items:2, autoplayHoverPause: true, URLhashListener:true}">
<div class="owl-stage" *ngFor="let img of images; let i=index">
<div class="owl-item">
<img src="{{baseUrl}}{{i+1}}.png"/>
</div>
</div>
</owl-carousel>
Make sure to bootstrap everything in the app.module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import {OwlCarousel} from './components/carousel/carousel.component';
import {Carousel} from './components/carousel/owl-carousel';
#NgModule({
imports: [
BrowserModule,
NgbModule,
],
declarations: [
AppComponent,
OwlCarousel,
Carousel
],
providers: [appRoutingProviders],
bootstrap: [ AppComponent ]
})
export class AppModule { }