I'm facing a challenge in displaying a routerLink within my d3.tree(). I've attempted to do so like this:
.append("a")
.html(`<a [routerLink]="/mycomponent" fragment="1.1">link to user component</a>`);
However, the following code works:
.append("a")
.html(`<a href="mycomponent#1.1">link to user component</a>`);
The issue is that the code with routerLink only displays the text and is not clickable, unlike when directly written into the component where everything works fine.
create a custom link directive called custom-link.directive.ts
@Directive({
selector: "[linkify]",
})
// Enhance Angular Routing functionality and prevent default behavior
export class CustomLinkDirective {
@Input()
appStyle: boolean = true;
constructor(
private router: Router,
private ref: ElementRef,
@Inject(PLATFORM_ID) private platformId: Object
) {}
@HostListener("click", ["$event"])
onClick(e: any) {
e.preventDefault();
const href = e.target.getAttribute("href");
href && this.router.navigate([href]);
}
// Apply styling to links
ngAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {
this.ref.nativeElement.querySelectorAll("a").forEach((a: HTMLElement) => {
const href = a.getAttribute("href");
href &&
this.appStyle &&
a.classList.add("text-indigo-600", "hover:text-indigo-500");
});
}
}
}
implement the directive in your code
const apiSectionText= "Access our <a href='/tracking-api'>Tracking API</a> and <a href='/tracking-webhook'>Tracking Webhook</a> solutions,"
<p linkify
class="mt-3 text-lg text-gray-500 include-link"
[innerHtml]="apiSectionText"
></p>
Update: Kindly refer to the response provided by @K-coding, as it offers a more efficient approach than mine!
Here is another less effective approach:
Angular does not compile, so if you add an .html file, you cannot use "Angular" to control it. You need to handle it in JavaScript.
The issue with mixing JavaScript and Angular is that we cannot rely on the function names. Hence, we must dispatch a CustomEvent and subscribe to it.
Let's create a function that retrieves all the "link" elements inside a div called wrapper using a template reference variable.
<div #wrapper>
<div [innerHTML]="link"></div>
</div>
createLinks()
{
//get the "links" inside the "wrapper"
const links = this.wrapper.nativeElement.getElementsByTagName('a');
//for each link
for (var i = 0; i < links.length; i++) {
//we change the color only to check if it works
links[i].style.color = 'red';
//we override the click event
links[i].onclick = (event) => {
//prevent default behavior
event.preventDefault();
//get the "target" using getAttribute('href')
const target = (event.target as HTMLElement).getAttribute('href');
//dispatch a custom event from "wrapper"
this.wrapper.nativeElement.dispatchEvent(
new CustomEvent<string>('route', { detail: target })
);
};
}
}
//and in ngOnInit, we subscribe to the custom event
ngOnInit()
{
fromEvent(this.wrapper.nativeElement, 'route').subscribe((res: any) => {
this.router.navigate([res.detail]);
});
}
}
Here is a simple stackblitz example
NOTE: In the stackblitz, notice that I call the function "createLink" after everything is painted. I use a setTimeout to allow Angular time to render - alternatively, you could use ngAfterViewInit, but when creating the D3 tree, you need to call it after the rendering process.
Here is the JSON structure that I have: { "first_name": "Peter", "surname": "Parker", "adresses": { "adress": [{ "info1": "intern", "info2": "bla1" }, { "info1": "extern", "info2": "bla2" }, { "info1": " ...
Hey everyone, I'm a newcomer to Angular2 and JS frameworks in general. I've been following tutorials on the official site but I can't seem to find a solution to my problem. So, I have a checkbox that is optional, but if it is checked, a new ...
Why am I getting an 'undefined' error when trying to import the Tooltip class from the npm tooltip.js package in my TypeScript file? ...
Recently, I came across this npm package designed for React using Typescript. To debug it locally, I initiated npm link in a new React project but encountered an error: https://i.sstatic.net/nObH6.png I suspect it may not be reading the packages correct ...
I'm currently facing an issue with a child component inside a ngFor loop where I need to pass dynamic values. Here is what I have attempted so far, but it doesn't seem to be working as expected <div *ngFor="let item of clientOtherDetails& ...
Is it possible to retrieve a date from XHR Header Response? https://i.sstatic.net/ErMMh.jpg I attempted to include '{observe: 'response'}' as options constructor(private http: HttpClient) { } getAllTemps() { return this. ...
Suppose we have a scenario where an interface/type is defined as follows: interface ITest { abc: string[] } and then it is assigned to an object like this: const obj: ITest = { abc: ["x", "y", "z"] } We then attempt to create a type based on the valu ...
I have a useful service within my Angular 2 package that I am looking to publish on NPM. Here are the key lines of code for this service: public showModal: Subject<any> = new Subject<any>(); public $showModal = this.showModal.asObservable(); ...
Implementing a Custom Function in Observable for Subscribers (defer) I have created an Observable using event streams, specifically Bluetooth notifications. My goal is to execute a function (startNotifictions) only when the Observable has a subscriber. ...
I'm working on an exciting project with Ionic 2/Angular 2 that involves using Amazon SNS/GCM. My main goal is to efficiently send and receive push messages through GCM. To set up the push plugin, I followed these steps: ionic plugin add phonega ...
In my VSTS local GIT REPO, I have a solution file with three main projects: an API, an Angular App, and a SQL Server DB Project. There are also some test projects included in the solution. I am currently facing challenges in setting up CI/CD for this setu ...
Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...
Attempting to implement the below code, however, it is not functioning as expected. npm install --save three-obj-loader import * as ThreeObjLoader from 'three-obj-loader'; const OBJLoader = ThreeObjLoader(THREE); let loader = new OBJLoader(): ...
The data is successfully displayed in the console. However, when trying to display it on the page, an error occurs: ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed services getdetails(id:number) : ...
If you are working on a javascript-based React project, adding a Service Worker is simply a matter of updating serviceWorker.unregister() to serviceWorker.register() in index.jsx. Here is an example project structure: - src |- index.jsx |- serviceWo ...
In the application I'm working on, I want to incorporate a variety of progress-loader-animations such as spinners or bars. To achieve this, I've developed a module with a component. Now, I'm trying to figure out how to display the module&ap ...
As I work on my express project, I am currently coding a function called route. const morph = (params: Function[]) => (req: Request) => params.map(f => f(req)) const applyTransformers = (transformers: Function[]) => (response: any) => { ...
https://i.sstatic.net/3hIOo.png I'm encountering an issue while attempting to add a method to my Typescript class using prototype. Visual Studio is giving me a warning that the function does not exist in the target type. I came across some informati ...
I'm currently working on an Angular project and I've been trying to implement the dropdown navbar from Bootstrap. I simply copied the code from here, but unfortunately, the dropdown feature isn't functioning properly for me: // I've att ...
I'm encountering an issue with my code when trying to utilize Props. The error message I'm receiving is "Parsing error: Unexpected reserved word 'interface'. (3:0)eslint". This project is being developed using next with TypeScript. Er ...