Ionic deeplink/universal link with Capacitor.
Tags: ionic, angular, capacitor, javascript
Published: 2020-11-22 03:31:47

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:](https://capacitorjs.com/docs/guides/deep-links)

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](https://twitter.com/oluwalosheyii)

Gracias!!!