Skip to main content
100%

Angular base class for if-like directives (show or hide under condition)

✓ Published0🌍 Public
TTomStanczyk
Last edited Aug 28, 2020
Created on Aug 28, 2020

This example demonstrates an abstract base class in Angular for building custom structural directives that show or hide template content under a condition. The code defines `AppBaseIfDirective`, which uses `ViewContainerRef` and `TemplateRef` to manage embedded views, along with protected methods `showView`, `hideView`, and `updateView` that toggle the view’s visibility. It provides reusable logic for if-like directives without binding to any specific data source. The implementation relies solely on Angular’s core APIs, with no external rendering libraries involved.

AI-generated description

Similar vizzes

Loading thumbnail…

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

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.

PPedroPovedaQ
60% match
Loading thumbnail…

Directive-less ng-pageslide

A slide-out panel demonstrates Angular's dynamic class binding for a directive-less page slide. The example uses an HTML div with the classes `ng-pageslide` and `ng-pageslide-left`, toggling an `open` class via `ng-class` based on the `panels.state` variable. The accompanying CSS defines smooth transitions for width and height properties, expanding the panel to 350px wide from the left edge over 0.5 seconds. The code relies on Angular's built-in `ng-class` directive and CSS3 transitions, with the content inside the panel becoming visible only when the `open` class is applied.

HHypercubed
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…

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
54% match
Loading thumbnail…

Angular 2 hover class directive

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.

Aackuser
53% match
Loading thumbnail…

Angular awesome

The visualization demonstrates an interactive color-picking interface built with Angular, using the `ngx-color-picker` library. It shows a palette of selectable color swatches alongside a live preview of the chosen color, with the selected value displayed in real time. The code instantiates the color picker component and binds its output to update the display dynamically, leveraging Angular’s two-way data binding to synchronize state. The rendering relies on standard HTML and CSS within Angular templates, with no external charting or simulation libraries involved.

TTomStanczyk
53% 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
52% match
Loading thumbnail…

The Missing Introduction to Angular 2 and Modern Design Patterns

The gist demonstrates Angular’s shift to reactive programming and unidirectional data flow, contrasting it with AngularJS’s two-way binding. It presents a curated markdown guide with external links and code snippets, using RxJS observables for asynchronous streams and Promises for HTTP conversions. The example renders the Angular component tree and state management patterns in a static document, sourced from a gist by ackuser, with no interactive visualization. It relies on plain React for the view layer, though no specific d3 or canvas APIs appear.

Aackuser
52% match