I recently added a new package to my project using 'npm install angular-image-slider --save' and included sliderModule in the app.module.ts file
import { AppComponent } from './app.component';
import { AppRoutingModule } from './/app-routing.module';
import { SliderModule } from 'angular-image-slider';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
DragScrollModule,
SliderModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
FileUploadModule,
TagInputModule,
BrowserAnimationsModule,
NgxCurrencyModule,
NgbModule.forRoot(),
ScrollToModule.forRoot(),
MetaModule.forRoot(),
BrowserModule.withServerTransition({appId: 'my-app'}),
DataTablesModule
],
providers: [TravalservicesService, Globalvar, Alwaysguard, Alwaysguradhost, Alwaysguarduserhost, LoaderService, {provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter}],
bootstrap: [AppComponent]
})
export class AppModule { }
home.component.html
<div class="row">
<h2 class="text-uppercase fs-20px text-strong">SENSE</h2>
<angular-image-slider [images]="imagesUrl"></angular-image-slider>
</div>
In the home.component.ts file
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
viewProviders: [Title],
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
public imagesUrl;
ngOnInit() {
this.imagesUrl = [
'IMAGE_URL1.jpg',
'IMAGE_URL2.jpg',
'IMAGE_URL3.jpg',
];
}
}
However, I encountered some errors: Error: Template parse errors: Can't bind to 'images' since it isn't a known property of 'angular-image-slider'. 1. If 'angular-image-slider' is an Angular component and it has 'images' input, then verify that it is part of this module. 2. If 'angular-image-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
'angular-image-slider' is not a known element: 1. If 'angular-image-slider' is an Angular component, then verify that it is part of this module. 2. If 'angular-image-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Apologies for the unusual question as I am still learning about Angular development.