Add element with RouterLink dynamically

Question

When i put an anchor element in someweher in a angular 2 Component like this,

Static Link
         


        

Answer 1

routerLink cannot be added after the content is already rendered but you can still achieve the desired result:

1. Create a href with dynamic data and give it a class:

   `${someDynamicValue}`
   

2. Add a HostListener to app.component that listens for the click and uses the router to navigate

   @HostListener('document:click', ['$event'])
   public handleClick(event: Event): void {
    if (event.target instanceof HTMLAnchorElement) {
      const element = event.target as HTMLAnchorElement;
      if (element.className === 'routerlink') {
        event.preventDefault();
        const route = element?.getAttribute('href');
        if (route) {
          this.router.navigate([`/${route}`]);
        }
      }
    }
   

   }