Your First Angular Component

19 Pages·2017·0.78 MB·English

by  Shreeharsh Ambli

Your First Angular Component
Copyright © 2017, Shreeharsh Ambli. All Rights Reserved.
Who should read this guide?
Although this guide explains any new concepts before first use, it’s not
designed to replace official documentation and other ‘beginner’ books in the
market. This guide helps you understand how to leverage different Angular
concepts to create re-usable components.
We will be creating a star rating component from scratch to begin with. We
will also create a Pie / Donut Chart component and will use Google Charts –
this would be more in line with real world development.
This is what you will end up with after finishing this guide:
Let’s get started already!
Getting Started
First things first, we need your computer setup for Angular development.
Please follow online resources and get the following in place before you
continue:
1. Install Visual Studio Code
2. Install NodeJS
3. Install Angular CLI using NPM:

NodeJS is the best way to get NPM, which is a package manager. Angular
CLI is the recommended way to develop on Angular. It also generates code
that meets all recommended standards / conventions.
Tip
The –g option tells NPM to install the Angular CLI globally.

Please refer to online help on NPM and Angular CLI in case of any issues.
Star Rating Component
Let’s use the Angular CLI (Command Line Interface) to create our first
Angular application and the star rating component.
Run the following command to create the new star-rating app:
This will create a new folder named star-rating and will ready all the
necessary plumbing for your new application. It would take some time to
finish off so please be patient.
Once done, open the folder that the CLI created and run the following
command to see if all worked OK:
This command builds and deploys your app locally. The –open option
automatically opens the browser for you. If you forget to set this option, you
will need to open http://localhost:4200/ manually to see the application.
Angular CLI
Please visit https://github.com/angular/angular-cli/wiki for more details
on Angular CLI commands.

Keep both the terminal and the browser open henceforth. Any change you
make to code will automatically refresh in the browser.
Open the folder in Visual Studio Code before proceeding. You should see a
file structure similar to below:
Digging deeper, we see that the Angular CLI has created the default App
component for us:
Let’s add a new component for our star rating. To do so run the following
command:
You should now be able to see a new folder and new files under the same for
our new component:
Now that we have all the plumbing in place, thanks to Angular CLI, we can
get coding.
Angular CLI
For more details on generating various items using the CLI, please see
https://github.com/angular/angular-cli/wiki/generate

Open up the star-rating.component.ts file and rename the selector to star-
rating:
Now, open up the app.component.html and replace all text with below:
It would be intuitive to pass the rating value as an input, thus the above code.
Now let’s start work on the star rating component.
Add a new input properly for the rating value in the StarRatingComponent
class (star-rating.component.ts file):
Let’s see what we have accomplished for now. Simply switch to the browser
and it should have automatically refreshed after you have saved all your
changes:
Replace all existing text in the star-rating.component.html with:
Switching to the browser, we now see our passed rating value:
Now, this is a very good example to use Angular Pipes. Pipes basically
formats / converts a value from one form to another that’s more suitable to
display. In our case, we need to convert a number to show stars.
To show a filled star, we can use ★ and to show an empty star use
☆ html names / codes. So let’s add a new pipe to our component. Make
sure you are in the star-rating component folder before creating the pipe by
using the below command, else the pipe will be created under the app
component:
You should now see the new pipe created under the star-rating component: