Angular Production Build

Build Angular App for Production

while you plan for production release then keep these things in Mind

ng build --prod --base--href /vdname/

above command will create a production build in your app folder . a dist folder will be added in your app folder with name "dist".

This dist folder will have all build files .

Note1 : keep in mind that vdname and your actual vd name where you will do the deployment always                   will be the same .

suppose your hosting address is http://www.xafdeveloper.blogspot.com

then while making build you need to create build like this .

ng build --prod --base--href   /xafdeveloper/

Note2: URL Rewrite extension need to install in IIS and you can download it from Microsoft site .

Note3: you need to add web.config file in your vd as by default angular build didn't create a                                   "web.config" file .

you can create is by adding a text file and change its name and file type as config .

now copy url rewrite code from web and paste it in this file .

Now access your app and enjoy Angular Application Cheers !..

Note3. you can see base reference details in Index.html file also in your build folder

Follow on Shubh Techno Expert

@ShubhTechnoExpet on Facebook page .

Excel Download Feature in Angular

For Excel Download feature in Angular these Modules are required . you need to install.

1. file-saver

2. xlsx

npm install file-saver --save

npm install xlsx --save

once you install these package then it will give some error and ask for fund but dont wory your package will be installed which is required for excel download .

you need admin right to intall these packages.

 You Can Follow my Channel for VDO Shubh Techno Expert

Dropdown binding in Angular 6 by *ngFor

Dropdown binding in Angular 6 by *ngFor


Looping can be achieved by *ngFor directive

Syntax     *ngFor="let item of collection"


 <select id="slemp" (change)="GetEmp($event)">

        <option *ngFor="let item of Empcollection" value={{item.EmpCode}} >
                            
                            {{item.EmpName}}
        </option>
    </select>

Here one Dropdown is created and its value and text is shown in an alert box .  we have created a GetEmp($event) method and passed event as an argument by which we will get the control value .

you can Follow Shubh Techno Expert

Salesperson.Component.Html

<div>

<h1 style="text-align: center;">Dropdown binding in Angular by *ngFor</h1>

<div align="center">

<select (change)="myEmp($event)" >

    <option *ngFor ="let item of Empcollection" value={{item.EmpCode}}>{{item.EmpName}}</option>

</select>

</div>

Salesperson.Component.ts

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-salesperson',

  templateUrl: './salesperson.component.html',

  styleUrls: ['./salesperson.component.css']

})

export class SalespersonComponent implements OnInit {

  constructor() { }

  ngOnInit() {

      }

 

      Empcollection: any =

      [

        { EmpCode: "E001",EmpName: "Nagendra",  Email: "Nagendra@test.com", Salary: 8000 },

        { EmpCode: "E002",EmpName: "Raj",  Email: "raj@test.com", Salary: 70000 },

        { EmpCode: "E003",EmpName: "Shubh",  Email: "Nagendra@test.com", Salary: 80000 },

        { EmpCode: "E004",EmpName: "Techno",  Email: "Shubh@test.com", Salary: 9000 }

  

      ]

      myEmp(event)

      {

        alert("Emp Name Selected :" + event.target.value);

      }

     

}

You Can Subscribe my Channel for upcoming VDO related to Angular Shubh Techno Expert 

Looping in Angular by *ngFor

Looping can be achieved by *ngFor directive

Syntax     *ngFor="let item of collection"

Here collection object may be your collection of any class or array
     item is the variable in which you will get each object which is available in your collection.


you can Refer on my Channel

                Shubh Techno Expert

https://youtu.be/3dYC1PTXmfI

Here is Example .

Salesperson.component.html 

<h1 style="text-align: center;">Looping through *ngFor</h1>

<div>
    <h1 align="center">Employee</h1>
    <table border="2" align="center">
        <thead>
            <th>Emp Name</th>
            <th>Emp Code</th>
            <th>Email</th>
            <th>Salary</th>
        </thead>
        <tbody>
            <tr *ngFor="let item of Empcollection">
                <td>{{item.EmpCode}}</td>
                <td>{{item.EmpName}}</td>
                <td>{{item.Email}}</td>
                <td>{{item.Salary}}</td>
            </tr>
        </tbody>

    </table>

Salesperson.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-salesperson',

  templateUrl: './salesperson.component.html',

  styleUrls: ['./salesperson.component.css']

})

export class SalespersonComponent implements OnInit {

  constructor() { }

  ngOnInit() {

      }

      Empcollection: any =

      [

        { EmpCode: "E001",EmpName: "Nagendra",  Email: "Nagendra@test.com", Salary: 8000 },

        { EmpCode: "E002",EmpName: "Raj",  Email: "raj@test.com", Salary: 70000 },

        { EmpCode: "E003",EmpName: "Shubh",  Email: "Nagendra@test.com", Salary: 80000 },

        { EmpCode: "E004",EmpName: "Techno",  Email: "Shubh@test.com", Salary: 9000 }

  

      ]

     

}

You Can Subscribe my Channel for upcoming VDO related to Angular  Shubh Techno Expert

Usefull Command In Angular

How to Create new Application in Angular

ng new appname

How to Create New Component

ng generate component componentname

ng g c Component Name

if you want to create component in a folder then specify folder name also

ng g c emp/EmployeeDetails


g -- generate and c -- component

How to create New Class

ng generate class classname

How to Create New Service 

ng g service servicename

Angular Build Minification and Uglification

Minification and Uglyfication in Angular Deployement

Minification : While building Angular Application white spaces , unused variable , unused token removal is called Minification and it reduced build size .


uglyfication : While building Angular app variable name , function name class and other things name changes and compiled so after build in view source file you will not able to see the script , vairable class and other things . it also reduce files and insure security. its called Uglification .


you can make build by

ng build --dev  For Development

ng build --prod For Production Release

after building you cann see the build package in dist Folder in your currwnt app.

all bukld will will be in compressed and combined format.

ngIf in Angular 6

The *ngIf directive is most commonly used to conditionally show an inline template

The ngIf directive can be very useful in scenarios where you want to show a part of your Angular application UI

see my VDO on Shubh Techno Expert

https://youtu.be/eirevolrNYI

Content to render when condition is true.

Content to render when condition is

true.

----------------------------------------------------------------------------

Content to render when condition is true.

Content to render when condition is true.

True Condition Executed

False Condition Executed




-----------------------------------------------------------------------------

Content to render when condition is true.
Content to render when condition is false.


------------------------------------------------------------------------------

{{value}}

Content to render when value is null.

Customer.component.html

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  flag: boolean = false; 
 
  empcollection: any = [
    {name: "Raj", email:"Raj@gmail.com" ,Salary:2000},
    {name: "Sumit", email:"sumit@gmail.com",Salary:70000},
    {name: "Nagendra", email:"Nagendra@Gmail.com",Salary:8000},
    {name: "Manish", email:"Manish@Gmail.com",Salary:9000}
    ]

}

customer.components.ts

<h1 align="center">how to use ngIf<h2>

        <div>

            <h1>Employee</h1>

            <table border="2">

                <thead>

                    <th>Name</th>

                    <th>Email</th>

                    <th *ngIf="flag">Salary</th>

                    <th *ngIf="flag">Actions</th>

                </thead>

                <tbody>

                    <tr *ngFor="let e of empcollection">

                        <td>

                            {{e.name}}

                        </td>

                        <td>

                            {{e.email}}

                        </td>

                        <td *ngIf="flag">

                            {{e.Salary}}

                        </td>

                        <td *ngIf="flag">

                            <button>Delete</button>

                            <button>Update</button>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

        <table border="3">

            <th>Name</th>

            <th>Age</th>

            <tr *ngIf="false">

                <td>Amit</td>

                <td>12</td>

            </tr>

            <tr>

                <td>Rohit</td>

                <td>34</td>

            </tr>

            <tr *ngIf="true">

                <td>Deepak</td>

               <td>23</td>

            </tr>

        </table>

 

        

<div *ngIf="true; else loggedOut">

        Welcome friend.

      </div>

      

      <ng-template #loggedOut>

        Please friend, login.

      </ng-template>

Event Binding in Angular 6

we have taken a component to Show Event Binding .

See My VDO on Shubh Techno Expert

https://youtu.be/2LDYq7uKhzE

sidebar.component.html

   

Interpollation

   

       
           
                Email ID
               
               
           

           
                password
               
               

           
           
                 
               
               
             
           
           
                My Mail ID is :
               
               
           
       



   

sidebar.component.ts

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {

  myEmail:any;
  constructor() { }

  ngOnInit() {  }

  onClickSubmit(data) {
   debugger
    this.myEmail = data.emailid;
    alert("Entered Email id : " + data.emailid +"   " + data.passwd);
  }

  btnClicked()
  {
    console.log('i am clicked from HTML Page');
  }

  btnClickedwithParamter(evnt)
  {
    console.log('Button is clicked which Will return Click Event value') ;
    console.log(evnt) ;
  }
 
}

Interpolation in Angular 6

Interpolation is a technique that allow the user to bind a value to a UI element . two curly braces are used for this {{}} . It is called a Template Expression

See my VDO on Shubh Techno Expert Channel 

https://youtu.be/NQpmnOLM_Ms

app.component.html

   

Interpollation

   

       
           
                Email ID
               
                                ngModel width="100%">
           

           
                password
               
                                 ngModel width="100%">

           
           
                 
               
               
             
           
           
                My Mail ID is :
               
                             value="{{userlogin1.value.emailid}}">
           
       



   
    {{userlogin1.value.emailid}}
    This is incremented Value : {{1+ 1}}

    Sum of :

sum of : {{10 + 20 + 30}}

{{userlogin1.value.emailid}}

{{'This is My Email id ' + userlogin1.value.emailid}}

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class appComponent {

  myEmail:any;

  constructor() { }

  ngOnInit() {  }

  onClickSubmit(data) {

   debugger

    this.myEmail = data.emailid;

    alert("Entered Email id : " + data.emailid +"   " + data.passwd);

  }

  

}

Angular 6 Routing

Routing in Angular


https://www.youtube.com/watch?v=-Rtf6G7u4-4&t=1s


Today i will tell you how to Create Link in Angular .

to Create a link you need a app-routing.module.ts
in this module we define link /routes .


Frist we will Create Some Link on our Home Page Component

app.component.html

Home


Employee

The tells the router where to display routed views.

Now our HTML page in created in which two link will be there
on clicking these link you will be redirected on another page .
this is done through routing .

Routing outlet is used for routing .


we have create component

C:\MyAngular\myapp> ng g c home
CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (261 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (553 bytes)

C:\MyAngular\myapp> ng g c emp
CREATE src/app/emp/emp.component.html (18 bytes)
CREATE src/app/emp/emp.component.spec.ts (607 bytes)
CREATE src/app/emp/emp.component.ts (257 bytes)
CREATE src/app/emp/emp.component.css (0 bytes)
UPDATE src/app/app.module.ts (623 bytes)

see in both case app.module.ts is updated .

in app.module.ts routing module is already added in import section

by default import { AppRoutingModule } from './app-routing.module'; is added in app.module.ts


app-routing.module.ts
--------------------------------

const routes: Routes = [
{ path:'',component : HomeComponent } ,
{ path:'employee',component : EmplistComponent }

];
path: a string that matches the URL in the browser address bar.
component: the component that the router should create when navigating to this route.

---------------------------------

Angular 6 Project Structure

Learn the Project Structure of Angular 6

Shubh Techno Expert

https://www.youtube.com/watch?v=povG03z340E

you will able to understand the Project Structure .

Project Architecture

app-routing.module.ts

This Module is used to define Routing

app.component.html

This HTML file is used for UI and HTML designing

app.component.spec.ts

This file is used for Unit Testing .

app.component.ts

This is typescript File where you can write your script .

app.module.ts

This is the Module where you can import and define modules.

Index.html

This is the Startup file

angular.json

Here you can set your Botstrap css file and script files

Src Folder

   This Folder Contains all your Files

.editorconfig

This is the Configration File of Project

Angular 6 Tutorials

Angular is a JavaScript open-source front-end web application framework. 

Learn and Start Angular 6 


https://youtu.be/iCczsazLY-E

Prerequisites

1. Node.js

2. npm package manager

3.Install the Angular CLI

open command Prompt and Install 

c: \ > npm install -g @angular/cli