It’s finally here - the day we add a tweet input element and can actually post things to our timeline.

Let’s take a moment to brag:

Let the tweets flow!

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First we’ll use the element markup

<form class="ui form">
  <div class="field">
    <label>What's on your mind?</label>
    <textarea name='body' placeholder="Penny for your thoughts" type="text"></textarea>
  </div>

  <button class="ui button primary" type="button">Tweet</button>
</form>

[ ] Then we’ll make a local variable that gives you access to the element in the template

#mytext

(click)='OnNewTweet(mytext)'

[ ] We’ll need a method to handle the new tweet

OnNewTweet(myTweet) {
    console.log(myTweet.value);
}

[ ] Need to add the forms module to the app.module.ts

import { FormsModule } from '@angular/forms';

imports: [ BrowserModule, FormsModule ],

[ ] Binding to a backing property MVVM

tweetText = '';

[ ] Add the ngModel directive - put the banana in the box 

[(ngModel)]='tweetText'

[ ] Change the OnNewTweet to take no args

OnNewTweet() {	
    this.tweets.unshift(
      { body: this.tweetText, author: 'Glen', avatar: 'glen.jpg', date: new Date(), retweets: [], favorites: [] }
    );
    this.tweetText = '';
}

[ ] Live the dream!