@umaiz33 wrote:

I am trying to find some good tabs example but I am not able to find a single example. There is no option or component in ionic for curved tabs or other good tabs? I am attaching 1 image I need something similar or other tabs, not the default one. Please if anyone has link of example or tutorial, please

Posts: 1

Participants: 1

Read full topic

@tchinou1 wrote:

Hi everyone !

I’m wondering if this is a bug or me just missing something, but I can’t figure out how to navigate within a certain tab. Like when you check the profile of someone from home page on Instagram and on the explore page, in both case you stay in the current tab. However since Ionic 4 (and now 5), I can’t figure out how to do it.

If I do: “/tabs/home/post/1” it will always activate the Home tab.
If I do “/tabs/post/1” then no tab is activated when I visite the post page.

Adding every possible route like this:"/tabs/home/post/1 and “/tabs/profile/post/1”, becomes impossible with a bigger app since the number of possible route is infinite.

For more context, here is the link of an exemple: https://github.com/simetin/IonicTabRoutingIssue

Thank you very much !

William

Posts: 1

Participants: 1

Read full topic

@didinj wrote:

Posts: 1

Participants: 1

Read full topic

@AIBug wrote:

i am trying to change the active tab colors (icon or background) for the ionic conference app. I’ve tried everything i could find. Does anyone know why they won’t change? Here is the tabs code…

html

<ion-tabs>
  <ion-tab-bar slot="bottom">
 
  <ion-tab-button tab="about">
    <ion-icon src="/assets/img/ChurchLogoIcon2.svg" ></ion-icon>
    <ion-label>Home</ion-label>
  </ion-tab-button> 
       
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Calendar</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="speakers">
      <ion-icon name="people"></ion-icon>
      <ion-label>Pastors</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="stuffs">
      <ion-icon name="happy"></ion-icon>
      <ion-label>Activies & More</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

scss

.tabbar {
  justify-content: center;
}

.tab-button {
  max-width: 200px;
}

.activated {
  background-color: rgb(235, 4, 4);

}

the “.activated” does nothing at all…

Thanks for taking a look if you happen to gaze by

Posts: 1

Participants: 1

Read full topic

@wjun20314 wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

@sergiosmail wrote:

Hi guys
Surely I’m doing something right, but I hope you can help me with it. My source code looks like:
<img style="position: absolute; left: {{imageInfo.left}}px; top: {{imageInfo.top}}px;" [src]="imageInfo.strBase64Image">

Basically I was hoping that I can setup image absolute control X,Y position on view. But when I run inspector I see:

sanitizing unsafe style value position: absolute; left: 200px; top: 300px; (see http://g.co/ng/security#xss).v

Could you help me to understand what is wrong in my statement? Also it would be nice if you can recommend a good reading/article to understand how it works (in general) about supplying component variables to interface.

Posts: 1

Participants: 1

Read full topic

@lickos wrote:

Hello all.
Hope you are all doing well and “stay at home”.
I want to ask a quastion about animation.
Is it possible to “move” (translateX or translateY) a Child Component and move (“pass”) over the parent Component?

Thank you very much and stay safe✌️

Posts: 1

Participants: 1

Read full topic

@AIBug wrote:

so… i’m trying to get a video on my page from a data.json

It is strange, if i source the video directly, it works fine.

here is my code, then i’ll explain more.

html

<div class="sermon-background">
    <div class="topRoom" >
      <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
       <source [src]="sermon?.sermonVideo" type="video/mp4" />
      </video>
    </div>
    <div class="topRoom2">
      <svg width="100%" height="calc(1vw + 1vh + 6vmin)">
        <rect width="100%" height="calc(1vw + 1vh + 6vmin)" style="fill:rgba(44, 44, 44, 0.548);stroke-width:0;stroke:rgb(60,200,160)" />
        <text dominant-baseline="middle" text-anchor="middle" x="50%" y="55%" fill="white" style="font-size: calc(1vw + 1vh + 2vmin); font-family: 'Quicksand', sans-serif; font-weight: calc(.1vw + .1vh + .1vmin); text-shadow: 1px 1px 0px rgba(44, 44, 44, 0.445), 2px 2px 0px rgba(44, 44, 44,0.445), 3px 3px 0px rgba(44, 44, 44, 0.445) ">{{sermon?.name}}</text>
      </svg>
    </div >
    <img [src]="sermon?.profilePic" [alt]="sermon?.name">
  </div>

so, the profilePic from the same place using the same method loads fine.

also, if I use “src=assets/videos/Sermon1.mp4”, that works fine.

here is my data.json

      "name": "Finding Grace",
      "profilePic": "/assets/img/stuffs/PastorEvaFace.jpg",
      "sermonVideo": "/assets/videos/Sermon1.mp4",
      "about": "Learn to fnid Grace in every circumstance and realize just how much God has given you.",
      "sum": "God has given us grace, we just need to open our eyes.",
      "location": "Everywhere",
      "id": "1"

anyone have any idea why it can’t run the video?
Thank in advance for taking a peak

Posts: 1

Participants: 1

Read full topic

@pirmax wrote:

Hi,

I’ve an error when I build with iOS Xcode 11 on Ionic Pro Hub.

Running with gitlab-runner 10.2.0~beta.147.gbd1f3fcb (bd1f3fcb)
on ip-10-2-128-50 (c93ac604)
Creating new VM…
ERROR: Preparation failed: The name ‘runner-c93ac604-project-0-concurrent-0’ already exists.
Will be retried in 3s …
Creating new VM…
ERROR: Preparation failed: The name ‘runner-c93ac604-project-0-concurrent-0’ already exists.
Will be retried in 3s …
Creating new VM…
ERROR: Preparation failed: The name ‘runner-c93ac604-project-0-concurrent-0’ already exists.
Will be retried in 3s …
ERROR: Job failed (system failure): The name ‘runner-c93ac604-project-0-concurrent-0’ already exists.

appflow1258×453 36.2 KB

Thanks.

Posts: 1

Participants: 1

Read full topic

@YXUN wrote:

Hey guys, noob here. I have watch tutorials on ionic and angular, and I just can’t differentiate all these 3 as saw different developers used 3 different kinds of command.

• npm run build
• ng build
• ionic build

Can anyone tell me what’s the difference and which one should I actually run for my ionic project?

Posts: 1

Participants: 1

Read full topic

@charles-s wrote:

Hello everybody!

I am new to Ionic and I have been struggling to make my navigation works. I am using NavController’s navigateForward, navigateRoot and back functions and nearly everything is working fine but one back function I use on my login page.

I’ve been searching for this issue on the forum but nothing on Ionic 5 that can make it work…

It is really simple and I am maybe missing something very obvious.

What I do is redirecting the user with a navigateForward(’/login’) if he wants to checkout and he’s not logged in yet.

Here is my login component :

import { Component, OnInit,ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IonBackButtonDelegate } from '@ionic/angular';
import { ServerService } from '../../service/server.service';
import { ToastController,NavController,Platform,LoadingController,Events } from '@ionic/angular';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {
  
  @ViewChild(IonBackButtonDelegate, { static: false }) backButton: IonBackButtonDelegate;
  email:any;
  password:any;
  text:any;
  loading:any;
  canBack = 1;
  
  constructor(public events: Events,private platform: Platform,private route: ActivatedRoute,public server : ServerService,public toastController: ToastController,private nav: NavController,public loadingController: LoadingController){

  this.text = JSON.parse(localStorage.getItem('app_text'));

  }

  ngOnInit()
  {
  }

  ionViewWillEnter()
  {
    this.setUIBackButtonAction();
    if(localStorage.getItem('user_id') && localStorage.getItem('user_id')!=null && localStorage.getItem('user_id')!="null"){
      this.nav.back();
    }
  }

  async login(data)
  {
    const loading = await this.loadingController.create({
      message: 'Merci de patienter...',
    });
    await loading.present();

    this.server.login(data).subscribe((response:any) => {
    
      if(response.msg != "done")
      {
        loading.dismiss();
        this.presentToast(response.msg);
      }
      else
      {
        localStorage.setItem('user_id',response.user_id);
        this.events.publish('user_login', response.user_id);
        this.nav.back();
      }

      loading.dismiss();

    });
  }

  setUIBackButtonAction() {
    this.backButton.onClick = () => {
      console.log('login press button');
      if(this.canBack){
        console.log('login can press button');
        this.canBack = 0;
        this.nav.back();
      }
    }
    this.platform.backButton.subscribeWithPriority(2, () => {
      if(this.canBack){
        this.canBack = 0;
        this.nav.back();
      }
    });
  } 
}

As weird as it is, the back function I call when the user log in works just fine! But if he doesn’t log in and chosse to press the back button (the hardware android back button as well), it goes back to the home page quickly and then goes to the previous page I am looking for (the cart page) but with what seems to be a navigateRoot because after that, the user is stuck on the cart page with no way to go back…

I am really sorry for my english and if I am not clear enough. Thank you very much for reading me and I will be more than pleased to give more info if it’s necessary.

P.S. : the canBack variable is used to prevent multiple press on the back button because the app was going crazy when a user was spaming the back button…

P.S.S. : I also tried to make it work with the pop function but nothing different…

Posts: 1

Participants: 1

Read full topic

@tbaumer22 wrote:

Hey everyone,

I’m attempting to use Apple’s MusicKitJS framework inside of my Ionic 5 project with Angular. Originally, I attempted to reference the framework from a script tag inside of my index.html file, but I soon realized that Angular can not interact with these (or at least for this instance). Then, I proceeded to find an npm package containing all the TS definitions for Apple’s MusicKitJS: https://www.npmjs.com/package/musickit-typescript

Now, I can’t figure out how to use these definitions with my project after following the instructions. This is the import code I have on a page, and I can’t seem to get it to find the package:

import { MusicKit } from 'musickit-typescript';

If anybody can help me figure out what I’m doing wrong here, it would be very much appreciated.

Thank you!
Tate

Posts: 4

Participants: 2

Read full topic

@elkestudio wrote:

Hello,

I’m curious if there is a way to place custom component as a header (or inside ion-header) inside ion-app without it to be fixed? Same way for footer

Posts: 1

Participants: 1

Read full topic

@vitonimal wrote:

Hello! I am migrating from Ionic 3 to Ionic 4 and I plan on using the angular router. The general process was pretty straight forward for the most part, but I did encounter some issues.

I know that IonicPageModule has been deprecated and that we are now supposed to use IonicModule. However, IonicModule does not have a forChild() function, so I am wondering how I can translate an ionic 3 code stating:
IonicPageModule.forChild(Component)

Can I just delete these statements and perform a workaround with the angular router?

Thanks!

Posts: 3

Participants: 2

Read full topic

@vitonimal wrote:

Hello! I am migrating to Ionic 4 and the code I am translating is using a class that extends the Ion class, previously in ‘ionic-angular’.

However, I do not see the Ion base class in the @ionic/angular package. Which class should I extend in order to create a customized ion component?

Here is the ionic 3 class:

@Component({
  selector: "fa-icon",
  template: ""
})
export class FaIconComponent extends Ion implements OnChanges {
  @Input() name: string;
  @Input() size: string;

  @Input("fixed-width")
  set fixedWidth(fixedWidth: string) {
    this.setElementClass("fa-fw", this.isTrueProperty(fixedWidth));
  }

  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
    super(config, elementRef, renderer, "fa");
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.name) {
      this.unsetPrevAndSetCurrentClass(changes.name);
    }
    if (changes.size) {
      this.unsetPrevAndSetCurrentClass(changes.size);
    }
  }

  isTrueProperty(val: any): boolean {
    if (typeof val === "string") {
      val = val.toLowerCase().trim();
      return (val === "true" || val === "on" || val === "");
    }
    return !!val;
  };

  unsetPrevAndSetCurrentClass(change: SimpleChange) {
    this.setElementClass("fa-" + change.previousValue, false);
    this.setElementClass("fa-" + change.currentValue, true);
  }
}

Posts: 1

Participants: 1

Read full topic

@Rasioc wrote:

I’m starting a new app and want to use several firebase capabilities like Auth, Realtime DB, etc… However, Seems like both “Firebase” and “FirebaseX” plugins are not supporting capacitor. The FirebaseX one is not listed on incompatibilities page, but github issue show that there are issues and author says he doesn’t plan to support capacitor.

For Auth there is a capacitor community plugin which I could use. But for Realtime DB there seems none yet? I know I could use the web SDK too, but that lacks offline persistency for Realtime Database, which I would need definitively.

Did anyone find a working realtime databse capacitor plugin yet or is working on one?

Posts: 1

Participants: 1

Read full topic

@TomTruyen wrote:

Hello I’m quite new to ionic (& angular framework) and I’m currently using the latest version.
I’m working on a fitness app on which I currently have a list of exercises which I want to filter by ‘category’
Now I have setup the list and build the list using *ngFor=… though I want to ‘rebuild’ that list depending on what the user selects in the select box.

Each exercise is build using the following format:

{
      id: 'ex109',
      title: 'Knees to Elbows',
      category: 'Core',
      imageUrl: '../../assets/myAssets/kneestoelbows.png',
      advancedImageUrl: '../../assets/myAssets/kneestoelbows-detail.jpg',
      instructions: [
        '1. Grasp the pull up bar with a shoulder width grip. You can perform this movement with your palms facing away from your or towards you. This is your starting position.',
        '2. From the hanging position, bringing both of your knees up so they make contact with your elbows.',
        '3. Lower yourself down to the starting position.',
        '4. Repeat for reps.',
      ],
    },

In turn these exercises are stored in array called ‘exercises’

Now I have setup a select with all categories of the exercises though I have no idea on how to change the current ion-list when changing the select. I know there is a event on the select called ionChange on which I could call a function and filter through my exercises array. But how would I go about rebuilding the list? Do I have to empty it first (innerHTML) and then rebuild it using a for/foreach loop on my exercises? Or is there an easier Angular way of doing it?

My current code (HTML):

<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      <ion-col>
        <ion-select value="All">
          <ion-select-option>All</ion-select-option>
          <ion-select-option>Arms</ion-select-option>
          <ion-select-option>Back</ion-select-option>
          <ion-select-option>Cardio</ion-select-option>
          <ion-select-option>Chest</ion-select-option>
          <ion-select-option>Core</ion-select-option>
          <ion-select-option>Full body</ion-select-option>
          <ion-select-option>Legs</ion-select-option>
          <ion-select-option>Olympic</ion-select-option>
          <ion-select-option>Shoulders</ion-select-option>
        </ion-select>
      </ion-col>
      <ion-col> </ion-col>
      <ion-col> </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-list>
          <ion-item
            class="ion-no-padding"
            *ngFor="let exercise of exercises"
            [routerLink]="['./', exercise.id]"
            detail
          >
            <ion-avatar slot="start">
              <ion-img [src]="exercise.imageUrl"></ion-img>
            </ion-avatar>
            <ion-label>
              <h2>{{exercise.title}}</h2>
              <p>{{exercise.category}}</p>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

My typescript file:

import { Component, OnInit } from '@angular/core';

import { Exercise } from './exercises.model';
import { ExercisesService } from './exercises.service';

@Component({
  selector: 'app-exercises',
  templateUrl: './exercises.page.html',
  styleUrls: ['./exercises.page.scss'],
})
export class ExercisesPage implements OnInit {
  exercises: Exercise[];

  constructor(private exerciseService: ExercisesService) {}

  ngOnInit() {
    this.exercises = this.exerciseService.getAllExercises();
  }
}

My typescript service file (functions as the file mostly contains the array of all my exercises)

getAllExercises() {
    return [...this.exercises];
  }

  getExercise(exerciseId: string) {
    return {
      ...this.exercises.find((exercise) => {
        return exercise.id === exerciseId;
      }),
    };
  }

Thanks in advance

Posts: 1

Participants: 1

Read full topic

@abdosaeed wrote:

Hi
my ionic version is 6.5.0
i did next:
1- in assets folder, i create folder named fonts
2- in global.scss, i put next code

@font-face {
font-family: ‘appfont’;
font-style: normal;
font-weight: normal;
src: url(’./assets/fonts/Sofia\ Pro\ SemiBold.ttf’);
}

3- in pages i scss file i put next

• {
  font-family: “appfont”;
  }

but the font not worked for me, please help

Posts: 1

Participants: 1

Read full topic

@ryan-kelly1997 wrote:

I am trying to create a search bar in an ionic application to filter through a collection in Firebase Cloud firestore database. I cannot seem however to establish a connection. I have placed credentials in environment.ts and environment.prod.ts and then injected firebase key into app module.ts

The code for the search bar works fine and the search bar loads however no results from the collection are being printed. The collection is simply called ‘name’

I will attach the code below, if anyone sees any issues please let me know.

HomePage.html - this is used to create search bar and list to filter through

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-searchbar showCancelButton (ionInput)="filterList($event)"> </ion-searchbar>
  <ion-list>
  <ion-item *ngFor="let item of goalList">
    <ion-label>{{item.goalName}} </ion-label>
  </ion-item>

  </ion-list>

  </ion-content>

homepage.ts

import { Component,OnInit } from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
  public searchList: any[];
  public loadedsearchList: any[];


  constructor(private firestore:AngularFirestore) {}

  ngOnInit(){
    this.firestore.collection(`name`).valueChanges().subscribe(searchList => {
      this.searchList = searchList;
      this.loadedsearchList = searchList;
    });
  }
   initializeItems():void {
     this.searchList= this.loadedsearchList;
   }

   filterList(evt){
     this.initializeItems();
     const searchTerm = evt.srcElement.value; 
     if(!searchTerm){
       return; 
     }


   this.searchList= this.searchList.filter(currentGoal =>{
  if(currentGoal.goalName && searchTerm){
    if(currentGoal.goalName.toLowerCase().indexOf(searchTerm.toLowerCase())>-1){
      return true; 
    }
    return false; 
  }

   });
  }
}

environment.ts

export const environment = {
  production: false,
  firebaseConfig:{ credentials are in here 

app.module.ts page where calling firebaseconfig from environment.ts with credentials.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireStorageModule ],


  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Posts: 1

Participants: 1

Read full topic

@joelphilippage wrote:

I am trying to write an extension in chrome from scrolling content with the keyboard. This is easy with most sites, but ones with built with ionic do not scroll the same. The first problem is that the user has to click within the ion-content element before they can scroll. I’ve tried triggering a click and focus on this element but this does nothing. The next thing I was going to try was to just capture a key press and scroll manually. I am able to use the ionScroll event, but detail always returns 0. Is there a part of the event I need to sent to get it to scroll? Am I on the right path?

Here is the html for ion-content I am trying to scroll:

<ion-content class="md hydrated" style="--offset-top:0px; --offset-bottom:0px;">

Here is the javascript I am using to try to scroll:

var content = document.querySelector('ion-content');
content.scrollEvents = true;
content.addEventListener('ionScrollStart', () => console.log('scroll start'));
content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
content.addEventListener('ionScrollEnd', () => console.log('scroll end'));

console.log("About to scroll");
var ionScrollEvent = document.createEvent('MouseEvents');
ionScrollEvent.initEvent('ionScroll', true, true);
ionScrollEvent.detail = 500;
content.dispatchEvent(ionScrollEvent);
this.console.log("Finished scrolling");

This code returns in the console:

About to scroll
scroll 0
Finished scrolling

Also, scrolling manually with the mouse triggers scroll start and scroll end but never the scroll event

The main site I am looking for is JustWatch
https://www.justwatch.com/

Thanks!
-Joel

Posts: 1

Participants: 1

Read full topic