In Part 1 of this series, we defined a basic TypeScript object for a Tweet and we created an API to add Tweet documents to our MongoDB database. By the end of the last tutorial, we had a working API to add a bare-bones, “Scheduled Tweet” object to the database. In this tutorial, I’m going to focus on the Angular portion of the application.

To start, let’s just copy and paste the TypeScript Tweet class from my last tutorial into a new folder called “twitter” (src/app/twitter). This is where I’m going to store my Twitter component as well

src/app/twitter/tweet.ts

Now let’s create the component. Open up that trusty Angular CLI and create a component:

ng g component twitter/Twitter

With default Angular settings, this should create the following components packed nicely into a folder:

twitter.component.html

twitter.component.spec.js

twitter.component.ts

twitter.component.css

(update to app.module.ts)

We’re also going to need a service to connect to our API, so we might as well create that now while we’re in the command line.

ng g service twitter/Twitter

Now we have a Twitter service for our Twitter component to schedule our tweets.

That’s a lot of Twitter.

Setting Up The Twitter Service

The Twitter Service will start out with some boilerplate code:

import { Injectable } from ' @angular/core ';

providedIn: 'root'

})

export class TwitterService { @Injectable ({providedIn: 'root'})export class TwitterService { constructor() { }

}

We’ll want to set up our HTTPClient. Add the necessary import statements:



import { HttpClient } from '

import { Observable } from 'rxjs'; import { Tweet } from './tweet';import { HttpClient } from ' @angular/common /http';import { Observable } from 'rxjs';

Create an http object in the constructor:

constructor(private http: HttpClient){}

and create the ScheduleTweet function, which returns an rxjs observable:

ScheduleTweet(tweet: Tweet) : Observable<any>{

return this.http.post('api/tweets', tweet);

}

All together, and with syntax highlighting, our completed Twitter Service should look like this:

Not too bad, eh?

And Now, The Twitter Component

Now it’s time to set up our component. This is the part of the application where the user interacts with the UI to create the scheduled tweet. I’m using bootstrap 4 in my application to speed things up, and we’ll assume that the user is already logged in. We’ll begin again by taking a look at the boilerplate that Angular has set up for us.

Here’s the component boilerplate:

import { Component, OnInit } from ' @angular/core ';

selector: 'app-twitter',

templateUrl: './twitter.component.html',

styleUrls: ['./twitter.component.css']

})

export class TwitterComponent implements OnInit { @Component ({selector: 'app-twitter',templateUrl: './twitter.component.html',styleUrls: ['./twitter.component.css']})export class TwitterComponent implements OnInit { constructor() { } ngOnInit() {

} }

Right off the bat, we’re going to want to import our Twitter service, as well as some kind of user/login service to get the username who is logged in. I won’t go over the user/login service in this tutorial since that’s a whole different animal to set up, but basically all you need to know is that you’ll be receiving a username from it.

Import the two services, as well as the Tweet object: (just remember login.service is not reviewed in this tutorial.)

import { Tweet } from '../tweet';

import { LoginService} from '../../login/login.service';

import { TwitterService } from '../twitter.service';

Add an instance for each of the two services to the constructor:

constructor(

private loginService: LoginService,

private twitterService: TwitterService

) { }

And last but not least, the glorious scheduleTweet function (which essentially invokes the scheduleTweet() function from the service):

sendTweet(tweet: Tweet){

this.twitterService.scheduleTweet(tweet).subscribe(

(data: any) => console.log(data),

err => console.log(err)

);

}

I like to keep things simple to start, so I’m simply logging the success or failure to the JavaScript console. Eventually we’ll display the data and create error fallbacks, but right now I just want to see data entered into the database from the UI.

One last piece before we get to the UI. On the load of the page, we’re going to have to retrieve the user to go into the shq_userid field of our scheduled Tweet object. That will be one thing we’ll need from our loginService, which we’ll add to ngOnInit():

this.scheduledTweet.mhq_userid = this.loginService.getLoggedInUser();

If you’re in a pinch, you could always just set this to a specific string for the time being.

What’s left?

We still need the user to fill in the Tweet text and the shq_scheduled_date fields. And we probably will need to somehow get the Twitter id and screen_name fields. Since I’m currently just focusing on connecting to MongoDB, we’re going to focus on the user-entered Text and Scheduled Date first. So I’ll simply add the following two lines as placeholder code to the ngOnInit() function, and we’ll get to the user entered data on the next part of this tutorial. Thanks for sticking with it!

this.scheduledTweet.user.id = 123456;

this.scheduledTweet.user.screen_name = "aaronbrosef";

PS, here’s the syntax-highlighted, full twitter.component.ts at the end of this tutorial:

Part 3 coming soon!