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);

  }

  

}