Angular JS - Native Routing Example

Enabling Native Routing with @beacon.li/bar in an Angular Component

If you're using Angular and the Angular Router and you want to enable native routing for the Beacon widget, you can achieve this by integrating the @beacon.li/bar package with your Angular component. This allows you to control the behavior of the Beacon widget based on the current route using the OnInit lifecycle hook.

Integrating @beacon.li/bar with Angular Router

Here's how you can enable native routing with Beacon in your Angular component:

1. Import the necessary modules and components at the beginning of your component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Beacon } from '@beacon.li/bar';

1. Create your Angular component as usual and implement the OnInit interface:

@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

1. Inject the Angular Router service into your component's constructor:

constructor(private router: Router) {
}

1. Use the ngOnInit lifecycle hook to set up Beacon's router based on the current route. This allows you to navigate to different routes when the user interacts with the Beacon widget:

ngOnInit() {
    Beacon.setRouter((path: string) => {
        this.router.navigateByUrl(path);
    });
}

How It Works

• The Router service from the Angular Router provides you with methods for navigating to different routes in your Angular application.

• In the ngOnInit method, you call Beacon.setRouter((path: string) => this.router.navigateByUrl(path)). This configures Beacon to use the Angular Router's navigateByUrl method when navigating to different routes.

• Whenever the user interacts with the Beacon widget, it will trigger this router configuration, allowing you to seamlessly integrate beacon into your Angular application's navigation flow.

By following these steps, you can enable native routing for the Beacon widget in your Angular component, ensuring a consistent and user-friendly experience when users interact with the beacon bar.