This article will assume you have already done the appropriate configurations for both android and ios but if you haven't then quickly check the steps here:
The code samples in this article will be strictly for Angular. Let's get started.
Open your app.component.ts
file and import NgZone
, Router
from Angular, then App
from Capacitor at the beginning of the file as seen below:
import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { Plugins } from '@capacitor/core';
const { App } = Plugins;
Then, add Router
and NgZone
to the constructor as seen below:
constructor(private router: Router, private zone: NgZone) {
this.initializeApp();
}
The next thing is to listen to the appUrlOpen
event, and redirect when a deep link is found or matched.
initializeApp() {
App.addListener('appUrlOpen', (data: any) => {
this.zone.run(() => {
// Example URL: https://example.com/signup?ref=1234
const slug = data.url.split("?")[0];
if (slug == 'https://example.com/signup') {
this.router.navigateByUrl('/signup');
}
// If there's no match do nothing
});
});
}
From the snippet above, data.url
contains the original link that was clicked. But there's need to know what URL was returned by the appUrlOpen
event so as to be able to handle redirects to the appropriate screen within your app. So we split the URL into parts by using the ?
as the point of separation:
data.url.split("?")
The above line gives an array as seen below:
["http://example.com/signup", "ref=1234"]
So we assign the item with the zero index to slug:
const slug = data.url.split("?")[0];
Then check if it matches before performing a redirect:
if (slug == 'https://example.com/signup') {
this.router.navigateByUrl('/signup');
}
The cool part is that using this technique, you can have other URLs like https://example.com/reset-password
which should take your users to the password reset screen within your app. To do this, modify your code like this:
// URL 1: https://example.com/signup?ref=1234
// URL 2: https://example.com/reset-password?email=test@gmail.com
const slug = data.url.split("?")[0];
if (slug == 'https://example.com/signup') {
this.router.navigateByUrl('/signup');
}
else if (slug == 'https://example.com/reset-password') {
this.router.navigateByUrl('/reset');
}
Handling query params.
It is possible sometimes we are not just redirecting but we need to get the query params and use it within the app. Let's use the signup link https://example.com/signup?ref=1234
as an example. This can be done with the help of this regex expression which returns value of ref
from the link:
getQueryParams(params, url) {
let reg = new RegExp('[?&]' + params + '=([^&#]*)', 'i');
let queryString = reg.exec(url);
return queryString ? queryString[1] : null;
};
And we can use it like this:
let url = 'https://example.com/signup?ref=1234';
const params = this.getQueryParams('ref', url);
//params is 1234
That's it!!! I hope you had fun reading and learning from the article to continue the conversation you can follow me on Twitter: @oluwasheyii
Gracias!!!
Top comments (4)
Hello, im trying to set this up. However, im still building the app so I am on localhost.
In fact, itβs an angular app that we want to transform to native android using capacitor (running on localhost:4200)
A rest API (dotnet core) is running on localhost:8001.
Is it possible to have deeplinks working on a connected android tablet? Where do I need to put the assetlinks file ?
It should be in a directory accessible from your server.
After you place it there, ensure you were able to verify it before proceeding from here developers.google.com/digital-asse...
Disculpa, puse en practica tu ejemplo pero no redirecciona a la App, quizas me darias alguna ayuda extra , por favor.