We already saw how to encapsulate a 3D book from Chapter 4, Developing a Mobile App with Dart, into a polymer.dart custom element. Now we'll do the same but in AngularDart now.
We can skip main.dart, because there's nothing new for us there, and see <body> in index.html:
<!-- web/index.html --> <body> <p>angular: <input type="number" ng-model="elementsCount"></p> <shelf books-count="elementsCount"></shelf> <script type="application/dart" src="main.dart"></script> </body>
Note that we're setting ng-model outside any component, so it'll be kept in the root scope, which is automatically set to <html>. Also, we're using <input type="number">, which tells AngularDart to convert the input from this field into an integer automatically.
The <shelf> element has one custom attribute called books-count, and we'll also use cssUrl to set a custom CSS file for this Shadow DOM:
// lib/component...