Grammar check

Author: kum-deepak

_posts/2022-03-02-rx-stomp-with-angular.md

@@ -7,15 +7,15 @@ toc: true
 ---
 
 This step by step guide will create a new Angular application
-and demonstrate usage of rx-stomp.
+and demonstrate usage of [rx-stomp].
 
-While preparing this guide `Angular` `13.2.0` and
+While preparing this guide, `Angular` `13.2.0` and
 `@stomp/rx-stomp` `1.1.4` are used.
 
-For the impatient, final code from this tutorial is at:
+For the impatient, the final code from this tutorial is at:
 [https://github.com/stomp-js/rx-stomp-angular]
 
-## Pre requisites
+## Prerequisites
 
 You need to have [Node.js](https://nodejs.org)
 and [npm](https://www.npmjs.com/) installed.
@@ -33,21 +33,20 @@ Install latest Angular CLI as below:
 $ npm i @angular/cli -g
 ```
 
-Change to the folder where you want to create the application
-and create your new application:
+Change to the intended folder and create your new application:
 
 ```bash
 $ ng new rx-stomp-angular --skip-install --defaults
 ```
 
-Change to new created folder and install all dependencies:
+Change to newly created folder and install all dependencies:
 
 ```bash
 $ cd rx-stomp-angular/
 $ npm i
 ```
 
-To run the application locally execute the following and
+To run the application locally, execute the following and
 point your browser to [http://localhost:4200/](http://localhost:4200/).
 
 ```bash
@@ -57,7 +56,7 @@ $ ng serve
 You can keep it running in a terminal and keep the browser tab open.
 It will detect changes, recompile and reload the browser tab.
 
-_At this stage you can use favorite IDE and be ready to edit code._
+_At this stage, you can use your favorite IDE and be ready to edit code._
 
 ### Add @stomp/rx-stomp, Inject RxStompService
 
@@ -66,8 +65,8 @@ $ npm i @stomp/rx-stomp
 ```
 
 We will need to define our configuration.
-This configuration will get injected by Angular Dependency Injection mechanism
-while creating instance of `RxStompService`.
+This configuration will get injected by the Angular Dependency Injection mechanism
+while creating an instance of `RxStompService`.
 
 #### Configuration
 
@@ -106,7 +105,7 @@ export const myRxStompConfig: RxStompConfig = {
 };
 ```
 
-The above should work for a out of the box installation of RabbitMQ broker.
+The above should work for an out-of-the-box installation of RabbitMQ broker.
 Please change as per your broker configuration.
 
 #### The RxStompService
@@ -141,7 +140,7 @@ export function rxStompServiceFactory() {
 
 #### Angular DI setup
 
-Next we need the service get injected. Open `src/app/app.module.ts`
+Next, we need the service to get injected. Open `src/app/app.module.ts`
 Add the following to the `providers` array of your `@NgModule`:
 
 ```typescript
@@ -153,7 +152,7 @@ providers: [
 ]
 ```
 
-Also add appropriate import lines towards the top of this file (after existing import
+Also, add appropriate import lines towards the top of this file (after the existing import
 statements):
 
 ```typescript
@@ -165,7 +164,7 @@ import { rxStompServiceFactory } from './rx-stomp-service-factory';
 
 We will create a component that will do the following:
 
-- It will have a click-able button to send a message.
+- It will have a clickable button to send a message.
 - It will subscribe and keep listing all received messages.
 
 #### Skeleton
@@ -193,7 +192,7 @@ Now we will create the basic HTML in
 ```
 
 We will add this component to the main UI by editing `src/app/app.component.html`.
-In this process we will remove most of the default HTML generated by Angular CLI.
+We will remove most of the default HTML generated by Angular CLI in this process.
 Edit `src/app/app.component.html` to look like the following:
 
 ```html
@@ -203,24 +202,23 @@ Edit `src/app/app.component.html` to look like the following:
 <app-messages></app-messages>
 ```
 
-This is a great time to check the browser tab to see that display has changed
+Now is a great time to check the browser tab to see that display has changed
 and it should show the HTML that we have added to `src/app/messages/messages.component.html`.
 
-If you find an empty screen, please check the terminal where you executed `ng serve`, if
-there are compilation errors you would see it here. Also, see the browser Javascript
-console, sometimes you may notice errors here.
+If you find an empty screen, please check the terminal where you executed `ng serve`.
+If there are compilation errors, you will see them here. Also, check the browser Javascript console. Sometimes, you may notice errors here.
 
 #### Sending messages
 
 We will now inject `RxStompService` as a dependency in `MessageComponent`.
-To that we will add it to the constructor in `src/app/messages/messages.component.ts`,
+To achieve that, we will add it to the constructor in `src/app/messages/messages.component.ts`,
 which should look like the following:
 
 ```typescript
   constructor(private rxStompService: RxStompService) { }
 ```
 
-We will now add code to send message:
+We will now add code to send a message:
 
 ```typescript
   onSendMessage() {
@@ -230,9 +228,9 @@ We will now add code to send message:
 ```
 
 _Please see [RxStomp#publish][rx-stomp-publish].
-Keep this page open as we would be using more methods from this class soon._
+Keep this page open as we will be using more methods from this class soon._
 
-Full content of `src/app/messages/messages.component.ts` should look like
+The entire content of `src/app/messages/messages.component.ts` should look like
 the following:
 
 ```typescript
@@ -256,7 +254,7 @@ export class MessagesComponent implements OnInit {
 }
 ```
 
-We will attach `onSendMessage` to the button in the html.
+We will attach `onSendMessage` to the button in the HTML.
 Edit `src/app/messages/messages.component.html` and add `(click)="onSendMessage()"`
 to the button. The file should look like the following now:
 
@@ -273,9 +271,9 @@ to the button. The file should look like the following now:
 </div>
 ```
 
-At this stage you should go back to the browser tab and open the web console.
-When you click on the `Send Message` button, you can see in the console that message
-is being sent to the broker.
+You should go back to the browser tab and open the web console at this stage.
+When you click on the `Send Message` button, you can see that the message
+is being sent to the broker in the console.
 
 #### Receiving messages
 
@@ -293,19 +291,17 @@ Typically we will subscribe this `Observable` to receive actual messages.
   }
 ```
 
-We will need to add a declaration for `receivedMessages` and import `Message`
-from `@stomp/stompjs`.
-There are `Message` classes exposed by few other modules as well, so,
-you need to be careful.
+We will need to add a declaration for `receivedMessages` and import `Message` from `@stomp/stompjs`.
+A few other modules also expose `Message` classes, so you need to be careful.
 
 _If you are coming from `@stomp/stompjs`, please notice that you do not
-need to subscribe within callback of stomp getting connected.
-This library internally ensures that actual subscription is carried out
+need to subscribe within the callback of stomp getting connected.
+This library internally ensures that actual subscription happens
 when the broker is actually connected.
-It also keep tracking of broker re-connections and automatically resubscribes._
+It also keeps tracking of broker re-connections and automatically resubscribes._
 
 Now is the time to link the HTML template to received messages.
-We will use `ngFor` to bind list of messages to `<li>`.
+We will use `ngFor` to bind the list of messages to `<li>`.
 Edit `src/app/messages/messages.component.html`:
 
 ```html
@@ -358,22 +354,18 @@ export class MessagesComponent implements OnInit {
 </div>
 ```
 
-Check your application in the browser now. Try sending few messages.
-Open another browser window/tab and see messages being received in both.
+Check your application in the browser now - try sending a few messages. Then open another browser window/tab and see that both receive messages.
 
 ### Stopping the watch
 
-We are almost done, we just need to add stopping the watch when the component is destroyed.
-For this we need to call `unsubscribe` on the RxJS subscription when we are done.
-`MessagesComponent` will need to implement `OnDestroy`. For this we will need to do
-the following:
+We are almost done. We need to add stopping the watch when the component is destroyed. For this, we need to call `unsubscribe` on the RxJS subscription. We will need to do the following:
 
-- Add `OnDestroy` to the implements list (by default `OnInit` will be there).
+- Add `OnDestroy` to the implements list (by default, `OnInit` will be there).
 - Implement `ngOnDestroy` method.
 - Add `OnDestroy` to the imports.
 
-Once the above is done we will modify code in `ngOnInit` to store the RxJS
-subscription in a member variable and call `unsusbscribe` in `ngOnDestroy`.
+After this, we will modify the code in `ngOnInit` to store the RxJS
+subscription in a member variable and call `unsubscribe` in `ngOnDestroy`.
 
 ```typescript
 ngOnInit() {
@@ -439,11 +431,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
 - Using [token authentication](/faqs/faqs.html#p-can-i-use-token-based-authentication-with-these-libraries-p)
   with the STOMP broker.
 
-I will be writing more tutorials in following days to cover additional topics:
-
-- Manual control in the configuration and connection establishment.
-  (In this sample, STOMP broker is connected during the Angular DI class
-  initialization phase.)
 
 [tour-of-heroes]: https://angular.io/tutorial
 [angular-di]: https://angular.io/guide/dependency-injection