Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page bootstrap slider setup angular 8 project ) Part 14

Home Page Bootstrap slider setup angular 8 project

 

is tutorial me hum hamere laravel server pr image ko store karege tha uske url ko hamre is anguar project me use karege .
In this tutorial, we will store the image on our Laravel server and its URL in the slider of our Angular project.
The process for storing the image in the Laravel server is described in the video.So now we will use the image URL of the Laravel server in our Angular project.

so you can open your angular project HomeComponent two files  

  1.  HomeComponent.html
  2. HtmlComponent.ts

 

in HomeComponent.ts file we can set baseurl of over laravel project 

HomeComponent.ts

 

import { Component, OnInit } from '@angular/core';

 

@Component({

  selector: 'app-home',

  templateUrl: './home.component.html',

  styleUrls: ['./home.component.css']

})

export class HomeComponent implements OnInit {

 base_url="http://localhost/tutorial/angular-laravel-project/";

  constructor() { }

 

  ngOnInit(): void {

  }

}

HomeComponet.html

 

<div id="demo" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

    <ul class="carousel-indicators">

      <li data-target="#demo" data-slide-to="0" class="active"></li>

      <li data-target="#demo" data-slide-to="1"></li>

      <li data-target="#demo" data-slide-to="2"></li>

    </ul>

    

    <!-- The slideshow -->

    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="slider_img" src="{{ base_url }}public/images/slider/slide1.jpeg" alt="Slide 1" >

      </div>

      <div class="carousel-item">

        <img class="slider_img" src="{{ base_url }}public/images/slider/slide2.jpg" alt="Slide 2" >

      </div>

      <div class="carousel-item">

        <img class="slider_img" src="{{ base_url }}public/images/slider/slide3.jpeg" alt="Slide 3" >

      </div>

    </div>

    

    <!-- Left and right controls -->

    <a class="carousel-control-prev" href="#demo" data-slide="prev">

      <span class="carousel-control-prev-icon"></span>

    </a>

    <a class="carousel-control-next" href="#demo" data-slide="next">

      <span class="carousel-control-next-icon"></span>

    </a>

  </div> 

After use this strp you can use ng server command for run your angular project 

Tutorial Topics