Angular 4 virtual scroll, markdown text editor, sticky data table headers, animations & more come to Covalent in 1.0.0-beta.7

Image for post
Image for post

tl;dr: Virtual scroll wrapper for any element, Markdown text editor, Data table sticky headers & virtual scroll, Dynamic Form features, Animation utilities, Angular 4.3 & Material Beta 10 support (also, our last beta!)

Github / Docs & Demo / Changelog

Virtual Scroll

We’ve abstracted the virtual scroll to a wrapper component that can be used around any element!

Image for post
Image for post
Scrolls on Scrolls on Scrolls

Simply wrap with this syntax which is similar to ngFor:

   <td-virtual-scroll-container #virtualScroll [style.height.px]="400" [data]="data">
<ng-template let-row="row" let-last="last" tdVirtualScrollRow>
...
</ng-template>
</td-virtual-scroll-container>

Markdown Text Editor

Edit markdown in a simple text editor (aptly name Simple Markdown Editor). Combined with the Covalent Markdown Parser component, users can edit and preview markdown in real-time! …


Data Tables take center stage in Covalent 1.0.0-beta.4

Image for post
Image for post

tl;dr: Lots of Data Table features, Loader async/boolean support, new Messages component, Pagination jump ahead features, and Angular v4 loading optimization (also Datepicker from Angular-Material beta.5!)

Github / Docs & Demo / Changelog

Important note: To enforce optimized bundle size & lazy loading, the CovalentCoreModule has been removed so you only import what you need (it’s a good thing).

New Data Table Features

The Covalent Data Table is one of the most widely used component in Teradata products so we’re focusing efforts around popular feature requests such as keyboard support for tabbing & selection, hiding columns, customizing search options and click events on rows. …


Simple steps to prototype an chat application in Angular Material

Image for post
Image for post
Material Design Slack built on Angular v4 with Covalent

What we’re building

Image for post
Image for post

We will quickly build a responsive layout with all the main UI elements and interactions of the Slack desktop app using Angular components from Angular Material and Covalent. Using atomic design we will build this layout all with existing UI elements and zero custom SCSS.

Check out the final prototype in plunker

What’s Covalent?

At Teradata we created Covalent to fill the need for a rapid prototyping tool to serve a global organization and quickly flip mock applications to enterprise products.

Change the app color theme

Changing the entire application color scheme is simple with Angular Material’s theme. Edit /src/theme.scss and change the $primary and $accent colors (referring to the material color palette) to the class purple & teal Slack theme. …

About

Kyle Ledbetter

Sr. Director of UX for Teradata in San Diego

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store