ANGULAR 6

 Goto directories where you have save your project.

 Create a project by using “ng new appname” in the command prompt.
 Install npm packages -> which creates and import dependencies and use
-g for installing it as global orelse it will only
Install in a particular directory….

-> Use->”npm install –g @angular/cli” if you’re

Installing it for the first time.
 To create components->Use->”ng g c componentname”.
 To run a server-> use-> ng serve.
 It will open in the localhost:4200 in the browser.

1.component as helloworld created and binded to app.component.html:

And it’s output

 ANGULAR 6
2. Date component created and binded :

o/p:
 ANGULAR 6
3. Data binding, date and ASYNC IT:

Setting intervals for async:

 ANGULAR 6
o/p:

Two-way data binding:

Importing & exporting modules

 ANGULAR 6
Two-way data binding specifying member variables type:

o/p:
 ANGULAR 6
4.Interpolation:

o/p:
 ANGULAR 6
Another example for interpolation:

o/p:
 ANGULAR 6
Simple valuation for interpolation:

o/p:
 ANGULAR 6
5.ngFor Interpolation (without ngfor):

o/p:
 ANGULAR 6
5.ngFor Interpolation (with ngfor):

THERE WILL BE NO CHANGES IN O/P:

 ANGULAR 6
6.ngIf: (less than 0)

ngIf greater than 0:

 ANGULAR 6
7.Passing input to components:

After passing input to components:

 ANGULAR 6
8.Routing: basics

o/p:
 ANGULAR 6
Routing loads home page as main page:

o/p:
 ANGULAR 6
If pathmatch is given home or local it will redirect to home only:

o/p:
 ANGULAR 6
IF WE ENTER WRONG URL( IT USE “WILDCARD”) for showing error message:
 ANGULAR 6
Children or subroute in settings component:

o/p:
 ANGULAR 6
Nav and routes:

o/p:

( it wont reload the whole page)