📄 Angular Custom Directives: Highlight Search Results Directive
#angular #directive
#angular #directive
Creating a custom directive in Angular to highlight search results within a block of text can improve the user experience when searching for specific terms in your application. In this example, we’ll create a custom directive named `appHighlightSearch` to highlight search results in a text block.
<p [appHighlightSearch]="searchQuery">
Lorem ipsum dolor sit amet, ...
</p>
👍2👎1
📄 Angular Custom Directives: Responsive Directive
#angular #directive
#angular #directive
Creating a custom directive in Angular to control the visibility of elements based on the screen size can help you create responsive designs. In this example, we’ll create a custom directive named appResponsive to show or hide elements based on the screen size.
<div [appResponsive]="'md, lg'">
This content is visible on medium and large screens.
</div>
📄 Angular Custom Directives: Input Mask Directive
#angular #directive
#angular #directive
Creating a custom directive in Angular to apply an input mask can help ensure that users enter data in a specific format. In this example, we’ll create a custom directive named appInputMask to format and validate an input as a phone number.
<input
type="text"
[appInputMask]="'(999) 999-9999'"
>
👎1
📄 Angular Custom Directives: Copy to Clipboard Directive
#angular #directive
#angular #directive
Creating a custom directive in Angular to allow users to copy content to the clipboard can enhance the usability of your application. In this example, we’ll create a custom directive named appCopyToClipboard to enable users to copy text when they click on an element.
import { Directive, Input, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appCopyToClipboard]'
})
export class CopyToClipboardDirective {
@Input() appCopyToClipboard: string;
constructor(private el: ElementRef) {}
@HostListener('click')
onClick() {
if (this.appCopyToClipboard) {
const textarea = document.createElement('textarea');
textarea.value = this.appCopyToClipboard;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
}
}<button [appCopyToClipboard]="'Text to copy'">
Copy to Clipboard
</button>
👍1
📄 Angular Custom Directives: Tooltip Directive
#angular #directive
#angular #directive
Creating a custom directive in Angular to display tooltips can enhance user interfaces by providing additional information when users interact with specific elements. In this example, we’ll create a custom directive named appTooltip to show tooltips on hover.
<button
[appTooltip]="'Click me to learn more'"
>Learn More</button>
📄 Angular Custom Directives: Disable Right-Click Directive
#angular #directive
#angular #directive
Creating a custom directive in Angular to disable right-clicking can be useful in scenarios where you want to prevent users from accessing context menus or taking specific actions using the right mouse button. In this example, we’ll create a custom directive named `appDisableRightClick` to prevent right-clicking on elements.
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appDisableRightClick]'
})
export class DisableRightClickDirective {
constructor() {}
@HostListener('contextmenu', ['$event'])
onRightClick(event: Event): void {
event.preventDefault();
}
}<div appDisableRightClick>
Right-clicking is disabled on this element.
</div>
👍4
📄 Angular Custom Directives: TimeAgo Directive
#angular #directive
#angular #directive
Creating a custom directive in Angular to display a time ago (relative time) can be useful for showing how long ago an event occurred. In this example, we’ll create a custom directive named appTimeAgo to display the time difference in a user-friendly format.
<p [appTimeAgo]="postDate"></p>
👎1
👍4
📄Angular: Creating custom structural directives accepting multiple parameters
#angular #directive
✅ Article link
#angular #directive
As applications grow in size and as the conditions become more complex, instead of stuffing multiple conditions inside a *ngIf or *ngSwitch, we can opt for creating a more cleaner custom structural directive.
✅ Article link
👍1🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍2