Categories

Saturday, October 5, 2024
#919814419350 therichposts@gmail.com
Angular 8Angular 9Nodejsowl carousel

Angular 9 owl carousel with Node Js backend

Angular 9 owl carousel with Node Js backend

Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 9 owl carousel with Node Js backend.

Post Working:

In this post, I am implementing Owl Carousel in Angular 9 and showing images in that slider with Node js backend.

Here is the working video from where you can get Owl Carousel In Angular 8, 9:

Here is the working code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 9 application on your machine:

$ npm install -g @angular/cli

$ ng new angularowlslider // Set Angular9 Application on your pc

cd angularowlslider // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

 

2. Now run below command into your terminal to include owl carousel package into your angular 9 application:

npm i ngx-owl-carousel-o

 

3. Now, add below code into your angular.json file:

....
"styles": [
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
    "src/styles.css"
  ],
....

 

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CarouselModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

5. Now add below code into your app.component.ts file:

In this, I have also made API call to get data from node jsbackend:

import { Component } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  images:any;
  constructor(private http: HttpClient){
    this.http.get('http://localhost/8080/api/data').subscribe(data => {
        this.images = data;
        }, error => console.error(error));
  }
 
  
  customOptions: OwlOptions  = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
}

 

6. Finally add, below code into your app.component.html file:

In this, I am getting images data with *ngfor looping:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <div>Some tags before</div>
  <owl-carousel-o [options]="customOptions">
    <ng-container *ngFor="let image of this.images;">
      <ng-template carouselSlide><img src="{{image.image}}"></ng-template> 
    </ng-container> 
  </owl-carousel-o>

  <div>Some tags after</div>
</div>

 

7. Here I have made custom API in nodejs file from where I am showing images in Owl Carousel Angular 9:

const express = require('express');
const app = express();
const cors = require('cors');
app.use(cors());
//I create api route with custom data
app.route('/api/data').get((req, res) => {
res.send({
events: [{ image: 'https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg' },{ image: 'https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg' },{ image: 'https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg' } ]
});
});
app.listen(8080, () => {
console.log('Server started!');
});

 

8. After execute node file with node node.js command, you will see below json data into your browser:

This is it and if you have any query related to this post, then please let me know or comment below.

Jassa

Thank you

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

2 Comments

  • pls help me

    i use angular 9
    i done every thing but not working

    ERROR in src/app/app.component.html:11:5 – error NG8001: ‘ng-tamplate’ is not a known element:
    1. If ‘ng-tamplate’ is an Angular component, then verify that it is part of this module.
    2. If ‘ng-tamplate’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

    11
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~

    src/app/app.component.ts:6:16
    6 templateUrl: ‘./app.component.html’,
    ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
    src/app/app.component.html:12:5 – error NG8001: ‘ng-tamplate’ is not a known element:
    1. If ‘ng-tamplate’ is an Angular component, then verify that it is part of this module.
    2. If ‘ng-tamplate’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

    12
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~

    src/app/app.component.ts:6:16
    6 templateUrl: ‘./app.component.html’,
    ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
    src/app/app.component.html:13:5 – error NG8001: ‘ng-tamplate’ is not a known element:
    1. If ‘ng-tamplate’ is an Angular component, then verify that it is part of this module.
    2. If ‘ng-tamplate’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.