Angular Directive to Repeat without *ngFor (Useful when wanting to print multiple times without array)

100%

Angular Directive to Repeat without *ngFor (Useful when wanting to print multiple times without array)

✓ Published0🌍 Public

Last edited Jan 5, 2021

Created on Jan 5, 2021

This Angular directive demonstrates a custom structural directive for repeating embedded content without an array, using `ngRepeat` as an input that takes an iteration count. It clears the `ViewContainerRef` and loops to create embedded views from the provided `TemplateRef`, effectively rendering the same template multiple times. This approach is useful for generating repeated UI elements, such as placeholders or static prints, when an array is unnecessary. The code relies on Angular's `Directive`, `Input`, `TemplateRef`, and `ViewContainerRef` APIs.

AI-generated description

Similar vizzes

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…

Improved angularjs markdown provider/filter/directive

This example demonstrates an AngularJS provider, filter, and directive that render Markdown into HTML. It uses the Showdown converter to process text, with a provider that allows configuring default options, such as enabling GitHub-flavored extensions. The filter and directive both invoke `makeHtml` to transform input, while the directive supports binding to scope elements, external files via `ng-include`, and attribute-based text or options. The code also includes a filter that applies the converter to any AngularJS expression, showcasing a reusable approach for embedding Markdown content in views.

HHypercubed

53% match

Loading thumbnail…

Angular directive to hide grandparent of '404' image

This AngularJS directive automatically hides an image’s grandparent element when the image fails to load. It demonstrates handling the `error` event on an `<img>` tag by navigating two levels up the DOM tree—using `element.parent().parent()`—and setting that ancestor’s `display` to `none`. The code relies on Angular’s `directive` API with `restrict: 'A'` and applies the behavior via the `hide-image` attribute in a sample `ng-repeat` loop over photo objects. The data source is an array of photo objects bound through `ng-repeat` in the sample HTML.

MMattDionis

52% match

Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K

51% match

Loading thumbnail…

Repeat Array

A row of green circles is rendered on an SVG canvas, evenly spaced from left to right. The example demonstrates how to generate and repeat array data using custom JavaScript functions. The code creates a data array of ten values, each incrementing by 100, and binds it to circle elements via d3’s `selectAll` and `data` methods. Circles are positioned using the `cx` attribute mapped from the data, with a fixed `cy` of 300, and styled with a radius of 10 and green fill.

NNita

51% 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

50% match

Loading thumbnail…

Gist cf65d4442946f9016d84d3562f267824

This example demonstrates a dynamic plugin system for an Angular application that loads and initializes modular features at runtime. The code uses Angular’s `Compiler` and `Injector` APIs to asynchronously compile and instantiate modules, while the `SettingsService` supplies the list of plugins to activate. It shows how plugins can be defined either as direct Angular injector definitions or as objects containing an `ngModule` and optional providers, which are then compiled and attached to the application’s root injector. The rendering approach is code-based, with no visual output, focusing on the service layer that orchestrates lazy-loaded functionality.

HHypercubed

49% match

Loading thumbnail…

Angular directive to replace '404' image with default image

This example shows an Angular directive that automatically replaces a broken image with a default fallback image. The `defaultImage` directive binds to the `error` event on an `<img>` element and swaps the `src` attribute to a specified fallback URL when the original image fails to load. The directive uses Angular’s `link` function to attach the event listener, and the sample HTML applies it via the `default-image` attribute alongside `ng-src`, referencing a fallback URL from Instagram’s anonymous user profile. The implementation relies solely on Angular’s directive API and native DOM events.

MMattDionis

48% match