My IONIC Notes

# Setup

npm i -g @ionic/cli
ionic start myApp tabs --capacitor --type=angular
ionic generate [schematic] [name]

schematic: pages, components, directives, services

## Slide using Swiper.JS

ionic start MySwiperApp blank --type=angular
cd ./MySwiperApp

npm i swiper@latest

[1]. app.component.ts

...
import ....;

// Swiper.JS
import { register } from "swiper/element/bundle";
register();

@Component({
...

[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},
];
}

[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>

ref:

• https://ionicframework.com/docs/angular/slides
• https://ionicacademy.com/swiper-ionic-7-ion-slides/

## Maps using Leaflet.JS

Install Leaflet package

npm i leaflet

[1]. global.scss

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

[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.");
    });
  }
}

[3]. leaflet.page.html

<div id="map" style="height: 100%"></div>