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
- HomeComponent.html
- 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>
After use this strp you can use ng server command for run your angular project
Tutorial Topics
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (Angular 8 Project Tutorial Environment Setup ) Part 1
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (How to install bootstrap in angular 8 project)
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (how to install laravel project on localhost ) Part 3
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel | Overview part 4
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (Angular 8 project folder structure) Part 5
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (laravel project folder structure) Part 6
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (Remove public on laravel project URL) Part 7
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (What is component in angular project ) Part 8
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (create user section related component in angular ) Part 9
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (global navigation and footer setup in angular 8 project) Part 10
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (angular 8 project user component routing) Part 11
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (footer section social link angular 8 project ) Part 12
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page bootstrap slider setup angular 8 project ) Part 13
- 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 service section angular 8 project ) Part 15
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page service section angular 8 project ) Part 16
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (laravel project environment setup for web api (web service) ) Part 17
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (model and migration creation and api server side validation in laravel for contect form) Part 18
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api in laravel ) Part 19
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api | laravel api calling from angular 8 project ) Part 20
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api | laravel api calling from angular 8 project ) Part 21
- Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api | laravel api calling from angular 8 project ) Part 21