Angular Others Components & Directives

Uncategorized AngularJS components, directives, modules, plugins, APPs and other related resources.

ngDynamicTitle

Easy Dynamic Page Titles In Angular – ngDynamicTitle

ng-dynamic-title is an angular1.x library to update the ‘s tag text on angular-ui-router state change event: $stateChangeSuccess.</p> </p> <div class="post-info"> <span class="thetime date updated"><i class="fa fa-calendar"></i> <span>July 6, 2016</span></span> <span class="thecategory"><i class="fa fa-tags"></i> <a href="https://angularscript.com/category/others/" title="View all posts in Others">Others</a></span> </div> </header> </article> <article class="latestPost excerpt last"> <a href="https://angularscript.com/angular-2-data-tree-component-ng2-branchy/" title="Angular 2 Data Tree Component – ng2-branchy" class="post-image post-image-left"> <div class="featured-thumbnail"><img width="370" height="297" src="" class="attachment-sociallyviral-featured size-sociallyviral-featured wp-post-image" alt="ng2-branchy" title="" decoding="async" loading="lazy" data-layzr="https://angularscript.com/wp-content/uploads/2016/07/ng2-branchy-370x297.png" /></div> </a> <header> <h2 class="title front-view-title"><a href="https://angularscript.com/angular-2-data-tree-component-ng2-branchy/" title="Angular 2 Data Tree Component – ng2-branchy">Angular 2 Data Tree Component – ng2-branchy</a></h2> <p><p>ng2-branchy is a simple Angular 2 component for visualizing data that can be naturally represented as a tree.</p> </p> <div class="post-info"> <span class="thetime date updated"><i class="fa fa-calendar"></i> <span>July 5, 2016</span></span> <span class="thecategory"><i class="fa fa-tags"></i> <a href="https://angularscript.com/category/others/" title="View all posts in Others">Others</a></span> </div> </header> </article> <article class="latestPost excerpt first"> <a href="https://angularscript.com/native-angular-multi-select-tree/" title="A Native Angular Multi Select Tree" class="post-image post-image-left"> <div class="featured-thumbnail"><img width="370" height="297" src="" class="attachment-sociallyviral-featured size-sociallyviral-featured wp-post-image" alt="A Native Angular Multi Select Tree" title="" decoding="async" loading="lazy" data-layzr="https://angularscript.com/wp-content/uploads/2016/07/A-Native-Angular-Multi-Select-Tree-370x297.png" /></div> </a> <header> <h2 class="title front-view-title"><a href="https://angularscript.com/native-angular-multi-select-tree/" title="A Native Angular Multi Select Tree">A Native Angular Multi Select Tree</a></h2> <p><p>An amazing tree list that is very easy to use with an integrated search input to filter the content of the tree. </p> </p> <div class="post-info"> <span class="thetime date updated"><i class="fa fa-calendar"></i> <span>July 4, 2016</span></span> <span class="thecategory"><i class="fa fa-tags"></i> <a href="https://angularscript.com/category/others/" title="View all posts in Others">Others</a></span> </div> </header> </article> <article class="latestPost excerpt last"> <a href="https://angularscript.com/generic-dashboard-widgets-functionality-angularjs/" title="Generic Dashboard / Widgets Functionality With AngularJS" class="post-image post-image-left"> <div class="featured-thumbnail"><img width="370" height="297" src="" class="attachment-sociallyviral-featured size-sociallyviral-featured wp-post-image" alt="Generic Dashboard Widgets Functionality With AngularJS" title="" decoding="async" loading="lazy" data-layzr="https://angularscript.com/wp-content/uploads/2016/06/Generic-Dashboard-Widgets-Functionality-With-AngularJS-370x297.png" /></div> </a> <header> <h2 class="title front-view-title"><a href="https://angularscript.com/generic-dashboard-widgets-functionality-angularjs/" title="Generic Dashboard / Widgets Functionality With AngularJS">Generic Dashboard / Widgets Functionality With AngularJS</a></h2> <p><p>Generic AngularJS component/directive providing dashboard/widgets functionality.</p> </p> <div class="post-info"> <span class="thetime date updated"><i class="fa fa-calendar"></i> <span>July 3, 2016</span></span> <span class="thecategory"><i class="fa fa-tags"></i> <a href="https://angularscript.com/category/others/" title="View all posts in Others">Others</a></span> </div> </header> </article> <article class="latestPost excerpt"> <a href="https://angularscript.com/material-design-expansion-panels-angular-material/" title="Material Design Expansion Panels For Angular Material" class="post-image post-image-left"> <div class="featured-thumbnail"><img width="370" height="297" src="" class="attachment-sociallyviral-featured size-sociallyviral-featured wp-post-image" alt="Material Design Expansion Panels For Angular Material" title="" decoding="async" loading="lazy" data-layzr="https://angularscript.com/wp-content/uploads/2016/07/Material-Design-Expansion-Panels-For-Angular-Material-370x297.png" /></div> </a> <header> <h2 class="title front-view-title"><a href="https://angularscript.com/material-design-expansion-panels-angular-material/" title="Material Design Expansion Panels For Angular Material">Material Design Expansion Panels For Angular Material</a></h2> <p><p>A module that implements design elements based on Material Design Expansion Panels.</p> </p> <div class="post-info"> <span class="thetime date updated"><i class="fa fa-calendar"></i> <span>July 1, 2016</span></span> <span class="thecategory"><i class="fa fa-tags"></i> <a href="https://angularscript.com/category/others/" title="View all posts in Others">Others</a></span> </div> </header> </article> <article class="latestPost excerpt first last"> <a href="https://angularscript.com/angular-2-click-edit-component/" title="Angular 2 Click-To-Edit Component" class="post-image post-image-left"> <div class="featured-thumbnail"><img width="370" height="297" src="" class="attachment-sociallyviral-featured size-sociallyviral-featured wp-post-image" alt="Angular 2 Click-To-Edit Component" title="" decoding="async" loading="lazy" data-layzr="https://angularscript.com/wp-content/uploads/2016/06/Angular-2-Click-To-Edit-Component-370x297.jpg" /></div> </a> <header> <h2 class="title front-view-title"><a href="https://angularscript.com/angular-2-click-edit-component/" title="Angular 2 Click-To-Edit Component">Angular 2 Click-To-Edit Component</a></h2> <p><p>Click on a data-binding to make it an input field, and save the changes!</p> </p> <div class="post-info"> <span class="thetime date updated"><i class="fa fa-calendar"></i> <span>June 30, 2016</span></span> <span class="thecategory"><i class="fa fa-tags"></i> <a href="https://angularscript.com/category/others/" title="View all posts in Others">Others</a></span> </div> </header> </article> <article class="latestPost excerpt"> <a href="https://angularscript.com/angularjs-rating-directive-based-ionic-framework/" title="Angularjs Rating Directive Based On Ionic Framework" class="post-image post-image-left"> <div class="featured-thumbnail"><img width="370" height="297" src="" class="attachment-sociallyviral-featured size-sociallyviral-featured wp-post-image" alt="Angularjs Rating Directive Based On Ionic Framework" title="" decoding="async" loading="lazy" data-layzr="https://angularscript.com/wp-content/uploads/2016/06/Angularjs-Rating-Directive-Based-On-Ionic-Framework-370x297.png" /></div> </a> <header> <h2 class="title front-view-title"><a href="https://angularscript.com/angularjs-rating-directive-based-ionic-framework/" title="Angularjs Rating Directive Based On Ionic Framework">Angularjs Rating Directive Based On Ionic Framework</a></h2> <p><p>An angularjs directive that take care of visualising a star rating bar, build for Ionic Framework. angular-ui has the same rating directive, but it is build on top of bootstrap. This repo just reuse most of the js code, but build for the ionic framework. Preview:</p> </p> <div class="post-info"> <span class="thetime date updated"><i class="fa fa-calendar"></i> <span>June 29, 2016</span></span> <span class="thecategory"><i class="fa fa-tags"></i> <a href="https://angularscript.com/category/others/" title="View all posts in Others">Others</a></span> </div> </header> </article> <article class="latestPost excerpt last"> <a href="https://angularscript.com/angular-2-directive-handling-click-outside-event/" title="Angular 2 Directive For Handling Click Outside Event" class="post-image post-image-left"> <div class="featured-thumbnail"><img width="370" height="297" src="" class="attachment-sociallyviral-featured size-sociallyviral-featured wp-post-image" alt="Angular 2 Directive For Handling Click Outside Event" title="" decoding="async" loading="lazy" data-layzr="https://angularscript.com/wp-content/uploads/2016/06/Angular-2-Directive-For-Handling-Click-Outside-Event-370x297.png" /></div> </a> <header> <h2 class="title front-view-title"><a href="https://angularscript.com/angular-2-directive-handling-click-outside-event/" title="Angular 2 Directive For Handling Click Outside Event">Angular 2 Directive For Handling Click Outside Event</a></h2> <p><p>A simple Angular 2 directive for handling click events outside of an element.</p> </p> <div class="post-info"> <span class="thetime date updated"><i class="fa fa-calendar"></i> <span>June 24, 2016</span></span> <span class="thecategory"><i class="fa fa-tags"></i> <a href="https://angularscript.com/category/others/" title="View all posts in Others">Others</a></span> </div> </header> </article> <nav class="navigation pagination" aria-label="Posts pagination"> <h2 class="screen-reader-text">Posts pagination</h2> <div class="nav-links"><a class="prev page-numbers" href="https://angularscript.com/category/others/page/19/">Previous</a> <a class="page-numbers" href="https://angularscript.com/category/others/">1</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://angularscript.com/category/others/page/15/">15</a> <a class="page-numbers" href="https://angularscript.com/category/others/page/16/">16</a> <a class="page-numbers" href="https://angularscript.com/category/others/page/17/">17</a> <a class="page-numbers" href="https://angularscript.com/category/others/page/18/">18</a> <a class="page-numbers" href="https://angularscript.com/category/others/page/19/">19</a> <span aria-current="page" class="page-numbers current">20</span> <a class="page-numbers" href="https://angularscript.com/category/others/page/21/">21</a> <a class="page-numbers" href="https://angularscript.com/category/others/page/22/">22</a> <a class="page-numbers" href="https://angularscript.com/category/others/page/23/">23</a> <a class="page-numbers" href="https://angularscript.com/category/others/page/24/">24</a> <a class="page-numbers" href="https://angularscript.com/category/others/page/25/">25</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://angularscript.com/category/others/page/47/">47</a> <a class="next page-numbers" href="https://angularscript.com/category/others/page/21/">Next</a></div> </nav> </div> <aside id="sidebar" class="sidebar c-4-12" role="complementary" itemscope itemtype="http://schema.org/WPSideBar"> <div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><!-- Ezoic - angular-sidebar-top - sidebar --> <div id="ezoic-pub-ad-placeholder-102"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- angular_sidebar --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2783044520727903" data-ad-slot="4882238795"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <!-- End Ezoic - angular-sidebar-top - sidebar --></div></div><div id="mts_recent_posts_widget-2" class="widget widget_mts_recent_posts_widget horizontal-small"><h3 class="widget-title">Recent</h3><ul class="advanced-recent-posts"> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/microsoft-fluent-buttons/" title="Microsoft Fluent Buttons for Angular Material"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="Microsoft Fluent Buttons for Angular Material" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2021/05/Microsoft-Fluent-Buttons-for-Angular-Material-65x65.png 65w, https://angularscript.com/wp-content/uploads/2021/05/Microsoft-Fluent-Buttons-for-Angular-Material-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2021/05/Microsoft-Fluent-Buttons-for-Angular-Material-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/microsoft-fluent-buttons/" title="Microsoft Fluent Buttons for Angular Material">Microsoft Fluent Buttons for Angular Material</a> </div> <div class="post-info"> <span class="thetime updated"><i class="fa fa-clock-o"></i> May 13, 2021</span> </div> <!--.post-info--> </div> </div> </div></li> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/smoking-hot-notifications-toast/" title="Smoking Hot Angular Notifications – hot-toast"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="Smoking Hot Angular Notifications - hot-toast" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2021/05/Smoking-Hot-Angular-Notifications-hot-toast-65x65.png 65w, https://angularscript.com/wp-content/uploads/2021/05/Smoking-Hot-Angular-Notifications-hot-toast-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2021/05/Smoking-Hot-Angular-Notifications-hot-toast-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/smoking-hot-notifications-toast/" title="Smoking Hot Angular Notifications – hot-toast">Smoking Hot Angular Notifications – hot-toast</a> </div> <div class="post-info"> <span class="thetime updated"><i class="fa fa-clock-o"></i> May 11, 2021</span> </div> <!--.post-info--> </div> </div> </div></li> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/draggable-resizable-grid-system/" title="Responsive Draggable Resizable Grid System For Angular"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="Responsive Draggable Resizable Grid System For Angular" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2021/05/Responsive-Draggable-Resizable-Grid-System-For-Angular-65x65.png 65w, https://angularscript.com/wp-content/uploads/2021/05/Responsive-Draggable-Resizable-Grid-System-For-Angular-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2021/05/Responsive-Draggable-Resizable-Grid-System-For-Angular-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/draggable-resizable-grid-system/" title="Responsive Draggable Resizable Grid System For Angular">Responsive Draggable Resizable Grid System For Angular</a> </div> <div class="post-info"> <span class="thetime updated"><i class="fa fa-clock-o"></i> May 11, 2021</span> </div> <!--.post-info--> </div> </div> </div></li> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/frosted-glass-effect-icon-blur/" title="Create Frosted Glass Icon Effect In Angular – icon-blur"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2021/05/Create-Frosted-Glass-Icon-Effect-In-Angular-icon-blur-65x65.jpg 65w, https://angularscript.com/wp-content/uploads/2021/05/Create-Frosted-Glass-Icon-Effect-In-Angular-icon-blur-150x150.jpg 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2021/05/Create-Frosted-Glass-Icon-Effect-In-Angular-icon-blur-65x65.jpg" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/frosted-glass-effect-icon-blur/" title="Create Frosted Glass Icon Effect In Angular – icon-blur">Create Frosted Glass Icon Effect In Angular – icon-blur</a> </div> <div class="post-info"> <span class="thetime updated"><i class="fa fa-clock-o"></i> May 10, 2021</span> </div> <!--.post-info--> </div> </div> </div></li> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/directed-acyclic-graphs/" title="Angular Service For Managing Directed Acyclic Graphs – dag"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="Angular Service For Managing Directed Acyclic Graphs - dag" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2020/12/Angular-Service-For-Managing-Directed-Acyclic-Graphs-dag-65x65.png 65w, https://angularscript.com/wp-content/uploads/2020/12/Angular-Service-For-Managing-Directed-Acyclic-Graphs-dag-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2020/12/Angular-Service-For-Managing-Directed-Acyclic-Graphs-dag-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/directed-acyclic-graphs/" title="Angular Service For Managing Directed Acyclic Graphs – dag">Angular Service For Managing Directed Acyclic Graphs – dag</a> </div> <div class="post-info"> <span class="thetime updated"><i class="fa fa-clock-o"></i> December 10, 2020</span> </div> <!--.post-info--> </div> </div> </div></li> </ul> </div><div id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><!-- Ezoic - Angular-Side-Middle - sidebar_middle --> <div id="ezoic-pub-ad-placeholder-106"> </div> <!-- End Ezoic - Angular-Side-Middle - sidebar_middle --></div></div><div id="single_category_posts_widget-2" class="widget widget_single_category_posts_widget horizontal-small"><h3 class="widget-title">Recommended</h3><ul class="category-posts"> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/smoking-hot-notifications-toast/" title="Smoking Hot Angular Notifications – hot-toast"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="Smoking Hot Angular Notifications - hot-toast" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2021/05/Smoking-Hot-Angular-Notifications-hot-toast-65x65.png 65w, https://angularscript.com/wp-content/uploads/2021/05/Smoking-Hot-Angular-Notifications-hot-toast-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2021/05/Smoking-Hot-Angular-Notifications-hot-toast-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/smoking-hot-notifications-toast/" title="Smoking Hot Angular Notifications – hot-toast">Smoking Hot Angular Notifications – hot-toast</a> </div> </div> </div> </div></li> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/draggable-resizable-grid-system/" title="Responsive Draggable Resizable Grid System For Angular"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="Responsive Draggable Resizable Grid System For Angular" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2021/05/Responsive-Draggable-Resizable-Grid-System-For-Angular-65x65.png 65w, https://angularscript.com/wp-content/uploads/2021/05/Responsive-Draggable-Resizable-Grid-System-For-Angular-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2021/05/Responsive-Draggable-Resizable-Grid-System-For-Angular-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/draggable-resizable-grid-system/" title="Responsive Draggable Resizable Grid System For Angular">Responsive Draggable Resizable Grid System For Angular</a> </div> </div> </div> </div></li> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/directed-acyclic-graphs/" title="Angular Service For Managing Directed Acyclic Graphs – dag"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="Angular Service For Managing Directed Acyclic Graphs - dag" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2020/12/Angular-Service-For-Managing-Directed-Acyclic-Graphs-dag-65x65.png 65w, https://angularscript.com/wp-content/uploads/2020/12/Angular-Service-For-Managing-Directed-Acyclic-Graphs-dag-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2020/12/Angular-Service-For-Managing-Directed-Acyclic-Graphs-dag-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/directed-acyclic-graphs/" title="Angular Service For Managing Directed Acyclic Graphs – dag">Angular Service For Managing Directed Acyclic Graphs – dag</a> </div> </div> </div> </div></li> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/resizable-draggable-modal-dialog/" title="Resizable & Draggable Modal Library For Angular – Dialog"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="resizable-draggable-modal-dialog" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2020/07/resizable-draggable-modal-dialog-65x65.png 65w, https://angularscript.com/wp-content/uploads/2020/07/resizable-draggable-modal-dialog-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2020/07/resizable-draggable-modal-dialog-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/resizable-draggable-modal-dialog/" title="Resizable & Draggable Modal Library For Angular – Dialog">Resizable & Draggable Modal Library For Angular – Dialog</a> </div> </div> </div> </div></li> <li class="post-box horizontal-small horizontal-container"><div class="horizontal-container-inner"> <div class="post-img"> <a href="https://angularscript.com/tooltip-popover-helipopper/" title="Beautiful Animated Tooltip & Popover Library For Angular – Helipopper"> <img width="65" height="65" src="" class="attachment-sociallyviral-widgetthumb size-sociallyviral-widgetthumb wp-post-image" alt="Beautiful Animated Tooltip & Popover Library For Angular - Helipopper" title="" decoding="async" loading="lazy" srcset="https://angularscript.com/wp-content/uploads/2020/06/Beautiful-Animated-Tooltip-Popover-Library-For-Angular-Helipopper-65x65.png 65w, https://angularscript.com/wp-content/uploads/2020/06/Beautiful-Animated-Tooltip-Popover-Library-For-Angular-Helipopper-150x150.png 150w" sizes="auto, (max-width: 65px) 100vw, 65px" data-layzr="https://angularscript.com/wp-content/uploads/2020/06/Beautiful-Animated-Tooltip-Popover-Library-For-Angular-Helipopper-65x65.png" /> </a> </div> <div class="post-data"> <div class="post-data-container"> <div class="post-title"> <a href="https://angularscript.com/tooltip-popover-helipopper/" title="Beautiful Animated Tooltip & Popover Library For Angular – Helipopper">Beautiful Animated Tooltip & Popover Library For Angular – Helipopper</a> </div> </div> </div> </div></li> </ul> </div><div id="search-3" class="widget widget_search"><form method="get" id="searchform" class="search-form" action="https://angularscript.com" _lpchecked="1"> <fieldset> <input type="text" name="s" id="s" value="" placeholder="What are you looking for?" /> <button id="search-image" class="sbutton" type="submit" value=""> <i class="fa fa-search"></i> </button> </fieldset> </form> </div><div id="custom_html-4" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><!-- Ezoic - Angular-Bottom-Floating - sidebar_floating_1 --> <div id="ezoic-pub-ad-placeholder-107"> </div> <!-- End Ezoic - Angular-Bottom-Floating - sidebar_floating_1 --></div></div></aside><!--#sidebar--> </div> </div><!--#page--> </div><!--.main-container--> <footer id="site-footer" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter"> <div class="container"> <div class="footer-widgets first-footer-widgets widgets-num-3"> <div class="f-widget f-widget-1"> <div id="text-2" class="widget widget_text"><h3 class="widget-title">About AngularScript</h3> <div class="textwidget"><p>Angularscript.com provides latest, free AngularJS  modules, components, directives, services, filters, plugins and other related resources for modern web and mobile development.</p> </div> </div> </div> <div class="f-widget f-widget-2"> <div id="text-4" class="widget widget_text"><h3 class="widget-title">Useful AngularJS Resources</h3> <div class="textwidget"><ul> <li><a href="https://angularjs.org/" target="_blank">AngularJS Official Website</a></li> <li><a href="http://ngmodules.org/" target="_blank">Popular AngularJS Modules</a></li> <li><a href="https://angular-ui.github.io/" target="_blank">Angular UI</a></li> <li><a href="https://github.com/angular/material2" target="_blank">Material Design for AngularJS</a></li> <li><a href="http://reactscript.com/" target="_blank">React & React Native Components</a></li> <li><a href="http://www.vuescript.com/" target="_blank">Vue.js Components</a></li> <li><a href="http://angularscript.com/angularjs-development-resources/">More...</a></li> </ul></div> </div> </div> <div class="f-widget last f-widget-3"> <div id="text-3" class="widget widget_text"><h3 class="widget-title">Keep in touch with us</h3> <div class="textwidget">Subscribe our <a href="https://feeds.feedburner.com/angularscript" rel="nofollow">RSS</a> or follow us on <a href="https://www.facebook.com/angularscript" target="_blank" rel="nofollow">Facebook</a> to keep updated.</div> </div> </div> </div><!--.first-footer-widgets--> <div class="copyrights"> <!--start copyrights--> <div class="row" id="copyright-note"> <div class="copyright"><a href=" https://angularscript.com/" title=" Latest Free Angular Components And Directives">Angular Script</a> Copyright © 2026. </div> <a href="#blog" class="toplink"><i class=" fa fa-angle-up"></i></a> <div class="top"> <div id="footer-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <nav id="navigation" class="clearfix"> <ul id="menu-footer" class="menu clearfix"><li id="menu-item-2823" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2823"><a href="https://angularscript.com/about/">About</a></li> <li id="menu-item-2822" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2822"><a href="https://angularscript.com/contact/">Contact</a></li> <li id="menu-item-2821" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2821"><a href="https://angularscript.com/privacy-policy/">Privacy</a></li> </ul> </nav> </div> </div> </div> <!--end copyrights--> </div> </div><!--.container--> </footer><!--#site-footer--> <!--start footer code--> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-56771776-1', 'auto'); ga('send', 'pageview'); </script> <!-- Begin Cookie Consent plugin by Silktide - http://silktide.com/cookieconsent --> <script type="text/javascript"> window.cookieconsent_options = {"message":"This website uses cookies to ensure you get the best experience on our website","dismiss":"Got it!","learnMore":"More info","link":"//angularscript.com/privacy-policy/","theme":"dark-bottom"}; </script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js"></script> <!-- End Cookie Consent plugin --> <!--end footer code--> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/mts_sociallyviral/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="q2w3_fixed_widget-js-extra"> var q2w3_sidebar_options = [{"sidebar":"sidebar","use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":"","screen_max_width":0,"screen_max_height":0,"widgets":["#search-3","#custom_html-4"]}]; //# sourceURL=q2w3_fixed_widget-js-extra </script> <script defer id="q2w3_fixed_widget-js" src="https://angularscript.com/wp-content/plugins/q2w3-fixed-widget/js/frontend.min.js"></script> <script id="layzr-js" src="https://angularscript.com/wp-content/themes/mts_sociallyviral/js/layzr.min.js"></script> </body> </html>