DEV Community

Agus Sudarmanto
Agus Sudarmanto

Posted on

My IONIC Notes

#ionic #angular #webdev #javascript

# Setup 

npm i -g @ionic/cli ionic start myApp tabs --capacitor --type=angular ionic generate [schematic] [name] schematic: pages, components, directives, services
Enter fullscreen mode Exit fullscreen mode

## Slide using Swiper.JS 

ionic start MySwiperApp blank --type=angular cd ./MySwiperApp npm i swiper@latest
Enter fullscreen mode Exit fullscreen mode

[1]. app.component.ts

... import ....; // Swiper.JS import { register } from "swiper/element/bundle"; register(); @Component({ ...
Enter fullscreen mode Exit fullscreen mode

[2]. banner.component.ts
To use a web component we now need to import the CUSTOM_ELEMENTS_SCHEMA

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { IonicSlides } from '@ionic/angular/standalone'; @Component({ selector: 'app-banner', templateUrl: './banner.component.html', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class BannerComponent { swiperModules = [IonicSlides]; banners = [ {id: 1, banner: 'assets/banner/1.jpg', active: true}, {id: 2, banner: 'assets/banner/2.jpg', active: true}, {id: 3, banner: 'assets/banner/3.jpg', active: true}, {id: 4, banner: 'assets/banner/4.jpg', active: true}, ]; }
Enter fullscreen mode Exit fullscreen mode

[3]. banner.component.html

<swiper-container [loop]="true" [pagination]="true" autoplay="true" > @for (banner of banners(); track $index) { <swiper-slide> <img [src]="banner?.image" /> </swiper-slide> } </swiper-container>
Enter fullscreen mode Exit fullscreen mode

ref:

## Maps using Leaflet.JS

Install Leaflet package

npm i leaflet
Enter fullscreen mode Exit fullscreen mode

[1]. global.scss

@import "leaflet/dist/leaflet.css"; #map { height: 100%; }
Enter fullscreen mode Exit fullscreen mode

[2]. leaflet.page.ts

import { Component, OnInit, OnDestroy } from "@angular/core"; import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; import { IonContent, IonHeader, IonTitle, IonToolbar, } from "@ionic/angular/standalone"; import * as L from "leaflet"; @Component({ selector: "app-leaflet", templateUrl: "./leaflet.page.html", styleUrls: ["./leaflet.page.scss"], standalone: true, imports: [ IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, ], }) export class LeafletPage implements OnInit, OnDestroy { constructor() {} map: L.Map | undefined; ngOnInit() { this.loadMap(); } ngOnDestroy() { if (this.map) { this.map.remove(); } } private loadMap() { // Initialize the map and set default view this.map = L.map("map").setView([0, 0], 13); // Add OpenStreetMap tile layer L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors", }).addTo(this.map); // Get the user's current location this.map.locate({ setView: true, maxZoom: 16 }); // Add event listener for location found this.map.on("locationfound", (event: L.LocationEvent) => { const { lat, lng } = event.latlng; // Add a marker for the current location const marker = L.marker([lat, lng]).addTo(this.map!); marker.bindPopup("You are here!").openPopup(); // Create a polygon around the current location const radius = 500; // 500 meters const polygon = L.circle([lat, lng], { radius: radius, color: "blue", fillColor: "lightblue", fillOpacity: 0.5, }).addTo(this.map!); }); // Handle location error this.map.on("locationerror", (error: L.ErrorEvent) => { alert("Location access denied or unavailable."); }); } }
Enter fullscreen mode Exit fullscreen mode

[3]. leaflet.page.html

<div id="map" style="height: 100%"></div>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)