Angular 2 hover class directive

100%

Angular 2 hover class directive

✓ Published0🌍 Public

Last edited Feb 23, 2017

Created on Apr 23, 2018

This Angular 2 directive adds a hover class to an element when the mouse enters it and removes it on exit. It uses the `@HostListener` decorator to listen for `mouseover` and `mouseout` events, and the `Renderer.setElementClass` method to toggle the class on the host element. The directive takes a `hoverClass` input from the template to specify the class name. It relies on Angular’s `ElementRef` to access the native DOM element.

AI-generated description

Similar vizzes

Loading thumbnail…

Adding a tooltip to d3 angular component

This example demonstrates D3.js tooltips inside Angular components for both bar charts and pie charts, showing the name, value, and percentage share of each data point on mouse hover. The code creates a tooltip div appended to the chart container, then uses D3 event handlers `mousemove` and `mouseout` to position and display the tooltip dynamically. It calculates the percentage share using the total sum from the data source, and updates the tooltip’s HTML content via D3’s `.html()` method. The implementation uses D3 selections with `.on()` event binding and `d3.event.layerX/layerY` for positioning.

Aackuser

59% match

Loading thumbnail…

Gist 46260

This example shows a set of hoverable links that reveal hidden text spans when the mouse enters or leaves each link. The code uses jQuery’s `.hover()` method to toggle the visibility of the corresponding `.hoverable span` elements, with the text initially hidden via `.hide()`. The data is embedded directly in the HTML structure, and the interaction is driven by standard jQuery event handlers rather than any visualization library. The rendering approach relies on simple DOM manipulation, with no canvas, SVG, or external data sources involved.

Aamundo

55% match

Loading thumbnail…

Hovering Line Chart

Two hovering line charts are displayed in an SVG. The first line is red, and the second is green. When the mouse hovers over the first line, its stroke color changes to light gray. When hovering over the second line, its color shifts, and the cursor changes to a grab icon. The code uses CSS `:hover` pseudo-classes to alter the `stroke` property and cursor style of the SVG `path` elements. The paths are defined using SVG path data, with no data source specified.

WWRCIECH

55% match

Loading thumbnail…

Gist 280440

This visualization demonstrates a custom hover effect for navigation links, where each link reveals a small dot marker on its left side. The effect is implemented using CSS pseudo-elements, specifically `:hover:before`, which injects the dot image via the `content` property. The dot is positioned absolutely using `top: 6px` and `left: 4px` relative to the link, and the rule applies only when the user hovers over the link. No JavaScript or data libraries are involved; the example relies purely on CSS styling. The `gistfile1.css` file contains the styling, and the dot image is loaded from an external path.

CCaged

55% match

Loading thumbnail…

Gist 8019475

This example demonstrates an AngularJS directive that integrates the Marked library to render Markdown text as HTML. The directive supports both static content and dynamic bindings, dynamically updating the output when the bound value changes. It can be applied as an attribute or element, accepts optional configuration options through the `opts` attribute, and enables file inclusion via Angular's built-in `ng-include` directive. The code defines an Angular module named `marked` and uses dependency injection for the Marked library and HTTP service.

HHypercubed

55% match

Loading thumbnail…

linked-hover

Linked-hover displays two line charts drawn side by side from randomly generated data, each with 100 points. Hovering over a circle in either chart emphasizes the corresponding point in both charts by enlarging it and adding a blue stroke, while also updating the URL hash to reflect the selected index. The visualization uses D3.js v3 for SVG rendering and axes, with lodash helpers for data manipulation. The linked selection is driven by mouseover events and a shared setHover function that applies transitions to all circles, ensuring synchronized highlighting across charts.

11wheel

55% match

Loading thumbnail…

A simple DOM component (for angular and angular-ecs)

This example shows how to wrap raw DOM elements as AngularJS jqLite objects, enabling Angular-ECS components to manipulate them with familiar jQuery-like methods. It detects the browser’s CSS vendor prefix via `window.getComputedStyle` and regular expressions, then uses that prefix to set the `transform` property with `translate3d` for efficient GPU-accelerated positioning. The `Dom` class extends `angular.element`, allowing direct style changes through a custom `setPosition` method, while the prefix detection ensures cross-browser compatibility. The code relies on Angular’s built-in jqLite and demonstrates a lightweight alternative to heavier DOM abstraction libraries.

HHypercubed

54% match

Loading thumbnail…

Angular 2 Intro

This example visualizes the conceptual architecture of Angular 2, breaking down its core building blocks—components, services, routers, and directives—into an interactive diagram. The renderer uses D3.js to lay out and animate the relationships between these elements, with text labels explaining each concept’s role, such as how components encapsulate templates and data, while services handle HTTP calls and non-UI logic. Data is drawn from the included Angular overview text, structured as nodes and edges. The visualization relies on D3’s force simulation for positioning and SVG for drawing the connecting paths.

MMurithi

54% match