KendoUI controls specifically for Angular 4! (and some Bootstrap 4)

At work today, four of use took a pause to watch a live webinar by a Carl Bergenhem of Telerik which is the company that owns KendoUI. He set up, in forty minutes time, a quicky Angular 4 app that showed off a grid of records from a KendoUI control. The grids look like this:

<kendo-grid [data]="gridData">
   <kendo-grid-column field="ProductID"
         title="ID">
   </kendo-grid-column>
   <kendo-grid-column field="UnitPrice"
         title="Price">
   </kendo-grid-column>
</kendo-grid>

 
 

It's not really too hard to squint one's eyes and see that kendo-grid must be the selector for a component and data an input for it and everything inside of the kendo-grid tags some templating. He also had time to show off button controls for Kendo which look like so:

<button kendoButton>Default</button>

 
 

Yawn. Everyone bored? Alright the more interesting part of the talk came upfront when Carl was laying out the HTML for application which used Bootstrap 4. I am still very new to Bootstrap and as I ramp up on Angular 4 I honestly do not find myself growing nearly as fast at Bootstrap, but, naturally, it is important too. In...

<div class="row my-3">

 
 

...the m in my-3 is for margin, the y suggests the y-axis should be affected, and the 3 in turn is for the size, in this case the default size in setting. There seems to be a good cheat sheet on it at https://v4-alpha.getbootstrap.com/utilities/spacing/ and I'm sure there are others out there too. Carl set up a series of menu items in a collapsible navigation at the top and the top nav in turn affected a set of "cards" below. The new concept of cards replaces panels, thumbnails, and wells in Bootstrap 4's paradigm.