📄 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