In JavaScript, a memory leak occurs when a program reserves memory for objects or data that are no longer needed or referenced, preventing the JavaScript engine’s garbage collector from freeing up that memory. Over time, this can lead to performance issues, such as sluggishness and unresponsiveness in web applications.

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>

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>

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'"
>

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>