Data Binding Challenge

Summary

Data binding is an essential part of any application. In this challenge, you will interpolate and data bind various data to have them show up on the view.

Requirements

Start off with a Stackblitz Angular project. Stackblitz is a similiar to C9 in that it is a cloud base computer that runs your code, the only difference is Stackblitz is already installed and ready for angular. Stackblitz is meant to be a tool so you can keep small angular examples to reference later, just like you would notes in a regular class.

  • Use the app.component.ts and interpolate , using double curly braces {{ }} the follow data on the page directly:

Sample Data
isTrue       | false;
multiply     | 67 *5
timesSkydive | 3
subtract     | function() { 30 - 7 }
favFruit     | apple
jason        | { firstName: 'Jason', lastName: 'Bourne', age: 22, favoriteTV: 'Simpsons', isWorking: false }
family       | [ 'mom', 'dad', 'sister', 'brother', 'dog' ]
url          | https://www.google.com
linkText     | Click Me

  • Add a link and interpolate the url into the href attribute. Additionally, use linkText as the inner html for that link

  • Write a method and attach it to a button via the click event binding. Have the button alert details about Jason again as the alert message and should be formatting like:

First Name: Jason

Last Name: Bourne

… etc

  • Attach a class property binding to a new paragraph element.

    • Insert any text into the paragraph element.

    • Add CSS to change the color of the text

    • Insert a button and attach a method to that changes the text color to something other than the original color

    • It should toggle between the two colors

Rename your stackblitz file, upperleft corner to ssf- <yourname> - interpolation-example. This way you can find it easier in the future.

Tips/Hints

  • Use event binding to add functionality to your button

  • Make sure your HTML view is readable, don’t put all interpolated text on one line.

  • Data Binding Stack Blitz Examples

Bonus Work

  • Use CSS to style your view

  • Find if there is a better way to interpolate array items

Helpful Past Lessons

PreviousComponent's and CSS StylingNextUser Input with - [(ngModel)]

Last updated