Unknown 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 | My Project HD
X

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

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






Send Project Report Request


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 

More Tutorials

Web Technology Tutorials in Hindi

Web Technology Tutorials in Hindi

Read More
Diploma engineering tutorial for polytechnic collage

Diploma Engineering Tutorial

Read More
Final Year Projects for Computer Science with Source Code

Final Year Projects for Computer Science with Source Code

Read More