Smail LOUNES smaillns
smaillns
/ final-map.component.ts
Created
August 3, 2021 17:08
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // component.ts | |
| myLatLng = { lat: 48.829677, lng: 2.239609 };// Map Options | |
| mapOptions: google.maps.MapOptions = { | |
| center: this.myLatLng, | |
| zoom: 10, | |
| }; | |
| markerOptions: google.maps.MarkerOptions = { icon: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi-dotless.png' }; |
smaillns
/ final-map.component.html
Created
August 3, 2021 17:05
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- component.html --> | |
| <google-map [options]="mapOptions" width="100%"> | |
| <map-marker | |
| *ngFor="let spot of spots" | |
| [position]="{ lat: spot.lat, lng: spot.lng }" | |
| [options]="markerOptions" | |
| [clickable]="true" | |
| (mapClick)="selectMarker(spot)" | |
| ></map-marker> | |
| </google-map> |
smaillns
/ map.component.ts
Last active
August 3, 2021 17:23
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // component.ts | |
| myLatLng = { lat: 48.829677, lng: 2.239609 }; // Map Options | |
| mapOptions: google.maps.MapOptions = { | |
| center: this.myLatLng, | |
| zoom: 10, | |
| }; | |
| markerOptions: google.maps.MarkerOptions = {}; |
smaillns
/ map.component.html
Last active
August 3, 2021 17:23
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- component.html --> | |
| <google-map [options]="mapOptions" width="100%"> | |
| <map-marker *ngFor="let spot of spots" | |
| [position]="{ lat: spot.lat, lng: spot.lng }" | |
| [options]="markerOptions"></map-marker> | |
| </google-map> |
smaillns
/ index.html
Last active
August 3, 2021 16:01
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- index.html --> | |
| <!doctype html> | |
| <head> | |
| ... | |
| <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"></script> | |
| </head> |
smaillns
/ product-gallery.component.scss
Created
July 10, 2020 19:38
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .product-gallery__featured { | |
| border-radius: 8px; | |
| border: solid 1px #F0F3F4; | |
| background-color: #fff; | |
| } | |
| .product-gallery__carousel { | |
| margin-top: 9px; | |
| owl-carousel-o img{ |
smaillns
/ product-gallery.component.html
Last active
July 10, 2020 19:35
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="gallery-container"> | |
| <div class="product-gallery__featured"> | |
| <owl-carousel-o [options]="{items: 1, dots:false, margin:8, autoWidth: autoWidth}" #owlCar> | |
| <ng-container *ngFor="let image of productImages"> | |
| <ng-template carouselSlide [id]="image.url" [width]="imageSize"> | |
| <img [src]="image.url"> | |
| </ng-template> | |
| </ng-container> | |
| </owl-carousel-o> |
smaillns
/ product-gallery.component.ts
Created
July 10, 2020 19:23
Pretty simple Image gallery in angular
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component, OnInit} from '@angular/core'; | |
| @Component({ | |
| selector: 'app-product-gallery', | |
| templateUrl: './product-gallery.component.html', | |
| styleUrls: ['./product-gallery.component.scss'] | |
| }) | |
| export class ProductGalleryComponent implements OnInit { | |
| productImages = [ {url: 'assets/images/produit1.jpg'}, |
NewerOlder