Creating your first app using Angular.io – User friendly Tech help

Do something today that your future self will thank you for

n

nWe have created this tutorial to make you up and running with Angular.io in 10 minutes. This is not a very detailed tutorial incase you are not familiar with Angular basics, please refer Angular.io documentation to get more details on the core concepts.
n
nExpectation:- 
nWe’ll create our working app in Angular2 and it will look as below
n
n

n

Working code

n

nStep1:-Starting with quickstart to create the setup for Angular2
na)Clone Quickstart into given folder ( say frontend)
n
ngit clone https://github.com/angular/quickstart.git learning
n
Cloning into ‘learning’…
nremote: Counting objects: 1352, done.
nremote: Total 1352 (delta 0), reused 0 (delta 0), pack-reused 1352
nReceiving objects: 100% (1352/1352), 1.11 MiB | 0 bytes/s, done.
nResolving deltas: 100% (745/745), done.
nChecking connectivity… done.

n

b) cd into the folder and install all the dependencies.

n

npm install 

n

c) Run the default angular App

n

npm start

n

n

nNow we are good with our angular setup, lets go ahead and create our own component. app.

n

nStep2:-Creating our first Component
n
nWhat is a component?
nComponents allow us to create different views, an angular app is a tree of angular components. These are subsets of directives ( from Angular -1) but unlike directives, components always consists of a template and only 1 component per selector ( like message selector that we’ll use in further steps) is instantiated. Each component need to be registered in ng-module ( the main component in angular) so that it can used by another components in a application.
n
nCreating component:-
nAdd new file under apps folder with .ts extension
n
n

n

n
• import components library inside this file

n

• create template

n

• create decorator 

n

n

n
Using this component:-
n
Export this component in the component where we want to use
nRegister the component in the ng-module 
n
n
Adding dummy data into component like 
n

n

//Taking dummy data

n

messages = [

n

{

n

text : ‘Text1’,

n

owner : ‘Tim’

n

},

n

{

n

text : ‘Text2’,

n

owner : ‘Paul’

n

}

n

]

n

nStep3:-Making our UI look better
nWe’ll add material library from Angular.
n
a)Add material lib

n

npm install --save @angular/material @angular/cdk

n

b)Import the .css into index.html file
n
nc)Add newly installed library into ng-module 
n
n
nd)Add this into module loader ( systemjs)
n

n

Learn more JS
n