Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 228527 articles
Browse latest View live

routerLink not updating url value when changed

$
0
0

This still WFM:

@Injectable()
export class LinkService {
  private link$ = new BehaviorSubject<string>("nowhere");

  watchLink(): Observable<string> {
    return this.link$;
  }

  pokeLink(link: string) {
    this.link$.next(link);
  }
}
export class HomePage {
  destination = "";

  constructor(private linker: LinkService) {
  }

  moveRoad(): void {
    this.linker.pokeLink(this.destination);
  }
}
<ion-content>
    <ion-item>
        <ion-label>where to go?</ion-label>
        <ion-input [(ngModel)]="destination"></ion-input>
    </ion-item>
    <ion-item button (click)="moveRoad()">move road</ion-item>
</ion-content>
export class AppComponent {
  link = "nowhere";

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private linker: LinkService,
  ) {
    this.initializeApp();
    linker.watchLink().subscribe(link => this.link = link);
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}
<ion-app>
    <ion-header>
        <a [routerLink]="link">road to nowhere</a>
    </ion-header>
    <ion-content>
        <ion-router-outlet></ion-router-outlet>
    </ion-content>
</ion-app>

Local Notification every day at same time

$
0
0

Thanks @Hech96, but I need to schedule local push every day at specific time forever. I will disable it only if user disable manually push notification service.

I’d like to schedule trigger for every day but I don’t understand How.

Thanks for your support

L

Ionic 4: change ion-content background-image programmatically (iOS)

$
0
0

Sanitized things are fragile black boxes, and you should do as little as absolutely possible with them. Your ngStyle attribute is converting it to a string, which causes it to lose its magical pixie dust. See this issue for further guidance.

Close an alert with keyboard AND retrieve its input value

$
0
0

The generally-accepted UI contract of the “enter” key depends on the currently-focused element. If the user tabs to focus the “Exec” button and then presses “enter”, the alert should dismiss as normal, containing the command, without further intervention on your part.

Ion-select-option unable to give any event

$
0
0

The Material Design guidelines on checkboxes specifically address this situation. The “select all” parent checkbox needs to be visually set off and able to go tristate in order to capture this functionality. I don’t think it’s implementable by pretending “select all” is just another day.

Updating list upon ionic storage set() completion

Ionic 4: PWA display app version from config.xml

$
0
0

Hi,

Is there any way to display Ionic 4 app version when deployed to PWA?

Currently, for iOS and Android I do it via

@ionic-native/app-version/ngx

Is there any standard straight-forward way to display version number on PWA from config.xml?

Thank you.

Ion-searchbar: pass filtered list results to another page

$
0
0

My general answer to this is “via an Observable exposed in a mutually injected service”. SearchService would seem to be the logical choice here.


Accessing files in Windows

$
0
0

I need to access files in windows such it would be done in a desktop application. I mean to access to files such as “C:\file.txt”. I also need to list all files in the directory such as the “dir” command would do. The question is that if it would using the File native plugin would do the job?

in Windows we have access to some directories such as: this.file.dataDirectory but it allow access to a directory exclusive to the App and not outside the App. I would like to access for instance at least the Document directory in Windows.

How to use style in SCSS and HTML in ionic4?

$
0
0

I’m migrating source code from ionic3 to ionic4.

The usage of text-center in html has changed with this error.

[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
Replace:
'<p text-center>'

With:
'<p class="ion-text-center">'

How do I write the following code in ionic4?
Please help me.

> Writing for ionic3

html

<p class="txt_login" text-center (click)="Login()">LOGIN</p>

scss

.txt_login{
    color:white;
    font-size: 10.5rem;
  }

I tried the following but the font size did not work.
<p class="txt_login" style="text-align: center; color:white; font-size: 10.5rem;" (click)="Login()">LOGIN</p>

How to use style in SCSS and HTML in ionic4?

$
0
0

Hi you can use text-center to just like this:

<p class="ion-text-center"> Some Text... </p>

Send Email in ionic 4 without using email_composer

Help us test the Ionic 5 Release Candidate!

$
0
0

@brandyshea I wanted to say that ionic 4 app run too slow in real device. And some time the css does render in the app. What should I do?.I want help from you.

How to use style in SCSS and HTML in ionic4?

$
0
0

I was able to solve it.

<p class="txt_login ion-text-center" (click)="Login()">LOGIN</p>

Modal slides are not displayed in ionic4

$
0
0

I’m migrating source code from ionic3 to ionic4.


The following slide page is not displayed in ionic4.

How do I fix it?

I hope you would tell me.

app.component.ts (The calling page)

    ...
async error => {

const walkthroughModal = await this.modalCtrl.create({component: WalkthroughPage, componentProps:{prev_page: 'login'} });
    await walkthroughModal.present();
}
    ...

walkthrough.page.ts

    @Component({
    	selector: 'page-walkthrough',
    	templateUrl: 'walkthrough.page.html',
    	styleUrls: ['walkthrough.page.scss'],
    	providers: [CustomNativeStorage]
    })
    export class WalkthroughPage {
    ...
	
	@ViewChild('slides', {static: false}) slides: IonSlides;
...

walkthrough.page.html

<ion-slides pager="true">
	<ion-slide *ngFor="let slide of walkthroughSlides" [style.background-image]="slide.img">
		<div class="walkthrough-content-card">
			<div class="text-container">
				<div class="walkthrough-title">
					{{ slide.title }}
				</div>
				<div class="walkthough-text">
					{{ slide.text }}
				</div>
			</div>
			<div class="button-container">
				<ion-button class="button_continue" color="bright" (click)="slideNext()">
					CONTINUE
				</ion-button>
			</div>
		</div>
	</ion-slide>
</ion-slides>

Ionic 4 & Angular 9

$
0
0

Hi all, i’ve a Ionic 4 / Angular 8 app
Can i upgrade to Angular 9 easily ?

Thanks

BB

How to reset the navigation (router) stack?

$
0
0

Hi.
I am using ionic version 5.4.15 and {replaceUrl: true} does it for me. It navigates to the target location and clears the browsing history as well.

Please try to update your ionic to the latest version.

Hope it help

routerLink not updating url value when changed

$
0
0

Hello rapropos,

Thank you very much for your help and for the time you have spent solving my problem.

I tried to apply your code to test and I discovered that when I tried to clone the initial table of the appPages page list, the new variable contained a reference and not a copy, that’s why when I changed language or segment the value did not change because the new value generated does not correspond to any route.

I solved the problem by doing a deepCopy of the table

// Example
private pages = [
	{title: 'nav.home', url: '/home', icon: 'home'},
	{title: 'nav.list', url: '/list', icon: 'list'}
];

// Old
const pages = [...this.pages]

// New
const pages = JSON.parse(JSON.stringify(this.pages));

// Does not work for multi-dimensional arrays
const pages = [...this.pages]
const pages = this.pages.concat([]);
const pages = Object.assign([], this.pages);
const pages = this.pages.slice(0);

// There is also cloneDeep from the Lodash library which those who use this library
const pages = _.cloneDeep(this.pages);

Thanks again to you.

Have a good day.

Dependency failing google services

$
0
0

Hello my app builds 100% fine on iOS, but this happens on android, I understand what it means but no idea how to fix it, any1 can help?

In project ‘app’ a resolved Google Play services library dependency depends on another at an exact version (e.g. “[11.0.
1]”, but isn’t being resolved to that version. Behavior exhibited by the library will be unknown.

Dependency failing: com.google.android.gms:play-services-analytics-impl:11.0.1 -> com.google.android.gms:play-services-b
ase@[11.0.1], but play-services-base version was 15.0.1.

About the @ionic-native/http/ngx

$
0
0

Could you post an example of how you are implementing the native HTTP package? Here is what my post function looks like.

  post(endpoint: string, body: any, token?: string) {
    const headers = this.createHeaders(token);
    if (this.hasCordova) {
      this.httpNat.setDataSerializer('json');
      return from(this.httpNat.post(this.apiUrl + '/' + endpoint, body, null).then(response => {
          return JSON.parse(response.data);
        }).catch(error => {
          console.log(error.status);
          console.log(error.error);
          console.log(error.headers);
        }));
    } else {
    return this.http.post(this.apiUrl + '/' + endpoint, body, { headers });
    }
  }
Viewing all 228527 articles
Browse latest View live