ozenero | Mobile & Web Programming Tutorials

Angular Dynamic Component Loader Tutorial with Examples

[no_toc]In the tutorial, ozenero.com shows how to dynamically load an Angular components by examples. What we introduce:

Create Anchor Directive
Dynamically Loading and Resolving Components

Continue reading “Angular Dynamic Component Loader Tutorial with Examples”

Angular 7 Virtual Scroll example – Angular Material CDK

The @angular/cdk/scrolling module with a technique called Virtual Scrolling helps us display a big list of elements efficiently by only rendering the items in view. Virtual Scrolling is different from infinite scroll – where it renders batches of elements and then when user goes to bottom of the list, it renders the rest. In this tutorial, we create many simple examples that show you how to work with Angular 7 Material CDK – Virtual Scrolling.

Continue reading “Angular 7 Virtual Scroll example – Angular Material CDK”

Angular 7 Drag and Drop example – Angular Material CDK

The @angular/cdk/drag-drop module helps us drag single item or sort it within a horizontal/vertical list, transfer items between lists, show animations, previews, placeholders, custom drag handles. In this tutorial, we’re gonna create many simple examples that show you how to work with Angular 7 Material CDK – Drag and Drop.

Continue reading “Angular 7 Drag and Drop example – Angular Material CDK”

Angular 6 Component – How to create & integrate New Angular 6 Component

Angular Components are the major part of development which control a patch of screen view. So in the tutorial, we introduce how to create and integrate new Angular 6 Component.

Continue reading “Angular 6 Component – How to create & integrate New Angular 6 Component”

Angular 6 – Use Angular Elements to build Custom Elements example

Custom Element is a web standard with new HTML element which allows us to define a tag whose content is created and controlled by JavaScript code in a framework-agnostic way. Custom Element bootstraps itself. That means it starts automatically when added to the DOM, and is automatically destroyed when removed from the DOM. It looks and behaves like any HTML element without need to know anything about Angular, component’s data structures or implementation. This feature is currently supported by Chrome, Opera, and Safari, and available in other browsers through polyfills. In the tutorial, we will show you way to build a Custom Element from Angular Component using Angular Elements.

Continue reading “Angular 6 – Use Angular Elements to build Custom Elements example”