# 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](https://stackblitz.com/). 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.&#x20;

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

{% code title="Sample Data" %}
```typescript
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

```
{% endcode %}

* 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:

&#x20;First Name: Jason

&#x20;Last Name: Bourne

&#x20;… 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

{% hint style="success" %}
Rename your stackblitz file, upperleft corner to ssf-  \<yourname> - interpolation-example. This way you can find it easier in the future.
{% endhint %}

## **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 lin&#x65;**.**
* [Data Binding Stack Blitz Examples](https://stackblitz.com/edit/angular-interpolation-ssf-examples?file=app/app.component.html)

## **Bonus Work**

* Use CSS  to style your view
* Find if there is a better way to interpolate array items

## **Helpful Past Lessons**

* [**Angular App install with CLI**](https://docs.google.com/document/d/1smKbtjv3aSeqslDcRt-AfJ6usFTOIXZfch4CONFK0V8/edithttps://docs.google.com/document/d/1TW4MGNqzqk3EUHC5Fh8voTLNHd82Qf2a_1nY3XW38QA/edit#heading=h.kk1966kbedef)
* [**Angular Interpolation**](https://stackblitz.com/edit/angular-interpolation-ssf-2)
