As I generate a list of strings dynamically, I am displaying it in Angular using ngFor. However, some of the strings contain hyperlinks which are not being distinguished properly when displayed - they appear as normal text. I want to differentiate these hyperlinks by underlining them.
For example: Check out https://support.google.com/accounts/answer/abc?hl=en# for instructions on 'Creating a Google Account' using an email.
Understanding correctly, it's quite straightforward and can be achieved by following this method:
<a href="{{yourlinkVariable}}">{{Text Variable}}</a>
creating a custom pipe that generates clickable links from URLs within an [innerHtml]
@Pipe({name: 'linkPipe'})
export class LinkPipe implements PipeTransform {
constructor(private _domSanitizer: DomSanitizer){}
transform(value: string): any {
if (value.indexOf("http")>=0)
{
//extract the URL
const link=value.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+~#?&//=]*)?(\[.*\])?/)
if (link)
{
const valueSplit=link[0].split('[')
value=value.replace(link[0],
"<a href='"+valueSplit[0]+"'>"+
(valueSplit[1]?valueSplit[1].slice(0,-1):valueSplit[0])+
"</a>")
}
}
return this._domSanitizer.bypassSecurityTrustHtml(value)
}
}
example of usage:
<p [innerHTML]="'see the http://www.google.com[Google page] for more info'|linkPipe "></p>
<p [innerHTML]="'http://www.google.com'|linkPipe"></p>
view on stackblitz
We are looking to transform the lengthy HTML Xpath values in the existing code into a shorter CSS value: driver.findElement(By.cssSelector(".form button")).click(); ...
Just curious if it's feasible, not looking for actual code. For instance, say I have an h2 class called "stock-number" with a value of #NC123456. Is it possible for JavaScript to access each instance of that class, retrieve data from a different datab ...
On larger screens, I would like the navigation/navbar to be positioned at the top. However, on mobile view or when collapsed, I want the toggle button to reveal the navigation menu by sliding from the left side, similar to this example: (source by David B ...
Currently implementing grommet in my React project and exploring how to capitalize text within a few <Heading /> components. ...
After logging in with my credentials, the session starts. However, if the user does not have an administrator role, I need to redirect them to another application. The challenge is maintaining the active session without requiring the user to log in again ...
Is there a way to display the three columns horizontally instead of vertically? I also want them to adjust responsively and fade smoothly. Here is my fiddle link: https://jsfiddle.net/Spleendrivel/dswufb78/3/ <!DOCTYPE html> <html> <head ...
I am currently delving into the world of JavaScript, aiming to comprehend its intricacies. With limited experience in this language, I have managed to successfully hide and unhide radio buttons based on user input. My next challenge lies in achieving a si ...
Currently, I am in the process of developing a website for a local bakery and have decided to incorporate a Facebook like button on the homepage. After visiting developers.facebook, I proceeded to copy and paste the code provided. It appears that there use ...
I need help with a CSS issue involving hiding one div on mouse hover and showing another instead. I attempted to achieve this using pure CSS, but both divs end up hidden. Would jQuery be necessary for this task? Below is the CSS/HTML code I wrote: .r ...
Recently, I've encountered a problem with routing in my Angular 5 project. My CLI version is 1.5.2. The issue arises when transitioning from one route to another. If I scroll down on the page and then navigate back to the previous route, the page rem ...
Recently, I started my own blog using Google Blogger and I've run into a minor issue. Despite applying a background image for the entire blog, all of my posts have a white background instead. I haven't used any background-color in the HTML code o ...
Trying out a full page layout for the first time, with a left div serving as a block style nav. #admin_nav { width: 230px; height: 100%; background-color: #f9f9f9; border-right: 1px solid #ddd; float: left; } The content is on the rig ...
I recently created a button with a link that opens in a new tab. I also implemented some JavaScript to display an alert. Everything is working as expected, but after the user clicks "OK" on the alert, they remain on the same page. I would like to automati ...
I'm struggling to make my 2-column layout display properly with a footer that sticks to the bottom of the page. Despite following all the usual advice, my columns keep expanding beyond their container div, which causes the footer to get pushed off the ...
I'm encountering an issue with my website where I can't seem to find a solution no matter what I try. My goal is to ensure that my website looks consistent across all computer screen sizes. However, when viewed on larger screens, there's a ...
After taking an online course at TreeHouse, I used the provided HTML & CSS code and made some adjustments to create a layout with 10 columns instead of the original 12 within a 1000px container. The columns were converted to percentages to fit my needs. I ...
My goal is to align the items in my navbar similar to this layout (replacing 'Buy on App Store' with a Search Box): https://i.sstatic.net/4NOhU.png I'm drawing inspiration from this material-ui component: https://material-ui.com/components ...
I have a specific vision for the design: Please follow this link to view the readmore image. I would like it styled with CSS3. ...
I am encountering a simple issue that is giving me an error message TypeError: Cannot set property 'question' of undefined at setQuestion I am struggling to identify the root cause of this problem. As I am new to AngularJS, I wonder if ...
As someone who is still relatively new to coding, I am facing a challenge while trying to create a TypeScript class within an Angular project that is based on a complex JSON file. The issue arises from the way the properties were defined in the JSON using ...