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