Angular - Example 4 - Page Navigation Using Router(Call Component)

1. Create New Project Using Following Cmd - ng new PageNavigation - PageNavigation as Project Name

2. Open Visual Studio Code Application and open project.

3. Generate new component using cmd - 'ng g c PageList\Page1'

                                                              'ng g c PageList\Page2'

                                                              'ng g c PageList\Page3'

   g - generate 

   c - Component 

   PageList - New Folder Name

   Page1 - new Component Name

4. 4 new files are created for each new component - .html, .spec.ts, .ts, .css

5. After Creating New Component automatically changed in 'app.module.ts' file.

6. Open the file 'app-routing.module.ts' and changed code in the file - like below image

7. Open the file 'app.component.html' and changed code in the file - like below image

8. Open the file 'app.component.ts' and changed code in the file - like below image

9. And to complie and run this project -- ng serve --o

Output

A. If Page is empty

B. After click link button Redirect Page2 

C. After click button Redirect Page3

Angular - Example 3 - Create New Component and Call Component Content in App Component

1. Create New Project Using Following Cmd - ng new NewComponent - NewComponent as Project Name

2. Open Visual Studio Code Application and open project.

3. Generate new component using cmd - 'ng g c Master\CustomerMaster'
   g - generate 
   c - Component 
   Master - New Folder Name
   CustomerMaster - new Component Name

4. 4 new files are created for new component - .html, .spec.ts, .ts, .css

5. After Creating New Component automatically changed in 'app.module.ts' file.

6. Open the file 'customer-master.component.html' and changed code to <p>customer-master works!</p>

7. Selector name get from 'customer-master.component.ts' file and include into with tag in 'app.component.html' file.

8. And to complie and run this project -- ng serve --o

OUTPUT

Angular - Example 2 - Include Html TextBox Control and Onclick and OnChange Event

1. Create New Project Using Following Cmd - ng new TextBoxCtrl - TextBoxCtrl as Project Name

2. Open Visual Studio Code Application and open project.

3. In index.html file having app-root tag. This app-root tag controls loaded from
'..\src\app\app.component.html' file.

4. selector name is mentioned in '..\src\app\app.component.ts' file. This name to use to call the component.
(Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.)

5. Include html code inside in app.component.html file.

ex : <input type="text" (click)="callfunc()" />

     <input type="text" [(ngModel)]="Name" (change)="change(Name)" />

6. Include below code inside in app.component.ts file.

exsiting page

after code change(marked blue)

7. Include below code inside in app.module.ts file.

exsiting page

after code change(marked blue)

8. And to complie and run this project -- ng serve --o

Output

When i click first text box and shows alert

After typed in text box and leaves from textbox - shows alert with typed text.

First Program in Angular

Angular - Example 1


1. Create a Folder in Any Location (ex : E:\Angular_Examples\Example1)

2. Open Cmd - E:\Angular_Examples\Example1> to select specific location


3. Create New Project Using Following Cmd - ng new Welcome1 - Welcome1 as Project Name

4. Open Visual Studio Code Application and open project using below screen shot.

5. Complie program Command - ng serve

6. After complie project in cmd showing localhost url to copy and paste to browser and access the web application.

7. Terminate running project using cmd - ctrl + c

8. Complie and Run Command - ng serve --o

9. Automatically complied and application opened in the browser

How to Install Angular?

1. Install Visual Studio Code - https://code.visualstudio.com/
2. Install Angular - https://nodejs.org/en/download/ and https://cli.angular.io/