.NET BOX

Angular Routing allows navigation between different views. Learn more on:  https://angular.io/guide/router Lets try this with an example. 1. Create another component inside components folder. I named it as phone. 2. Go to phone.component.html and change the html a bit. < h2 >   Phone works! </ h2 > 3. Go to app.module.ts and import router module import { RouterModule , Routes } from '@angular/router' ; 4. Import router module inside imports RouterModule . forRoot ( appRoutes ) 5. Create the routs in app.module.ts Each route will have an object. const appRoutes : Routes = [   { path: '' , component: UserComponent },   { path: 'phone' , component: PhoneComponent }, ]; 6. Change app.component.html and change its html to: < router-outlet ></ router-outlet > 7. Save and go to your browser and type: http://localhost:4200/phone then it will show your phone component. 8. Show navigation links.

2-way data binding can use to bind data to properties in page. 1. Create a form to enter data. Lets create a simple user form in user.component.html < div >   < label for = "name" > Name: </ label >   < input type = "text" /> </ div > < br > < div >     < label for = "age" > Age: </ label >     < input type = "text" /> </ div > < br > In order to bind data from template to component and vise versa; we need to use ngModel To use ngModel we have to import forms module. 2. Go to app.modules.ts and import forms module. 3. Go to user.component.html and perform 2-way data binding It defines by: 1. [(ngModel)] = 'Name of the property' 2. Need name attribute with the same name of the property Ex: < input type = "text" [( ngModel )]= "name" name = "name" /> When a property is inside a mod

Directives There are 2 types of directive in Angular 4: 1. Attribute Directives ( https://angular.io/guide/attribute-directives ) 2. Structural Directives ( https://angular.io/guide/structural-directives ) For now lets learn about Structural Directives . Lets create an array called hobbies.    hobbies : string []; this . hobbies = [ 'gamming' , 'travelling' , 'coding' ]; Lets use Angular's predefined directives for this example. We are going to use ngFor ( https://angular.io/api/common/NgForOf ) Go to your component template (user.component.html) and use this directive to populate the data in the array. < h3 > Hobbies </ h3 > < ul >   < li * ngFor = "let hobby of hobbies" > {{hobby}} </ li > </ ul > You can use the Index if you want. < ul >   < li * ngFor = "let hobby of hobbies; let i = index" > {{i + 1}} - {{hobby}} </ li > </ ul > Th

Installing Angular 4 There are 2 ways to install Angular4 Using Angular CLI - Recommended ( https://cli.angular.io/ ) Quickstart seed So in this blog I will use the recommended way; using the CLI. In order to use CLI you have to have Nodejs installed in your pc.  If you have not installed Nodejs; download and install it from their website: https://nodejs.org/en/download/ Ok let's install Angular CLI globally by executing following command in node command prompt: npm install -g @angular/cli Create new Application I'm going to use Visual Studio Code as the IDE for develop this application. 1. Open VS Code  2. Open the application folder  3. Open the terminal in VS Code and execute the following command ng new MyAngular4App ngCommands Find this command in package.json under scripts Ex: ng serve - start the app "scripts" : {     "ng" : "ng" ,     "start" : "ng serve" ,