angular2 and angular4 interview questions and answers part2

22) What is Pipes in Angular 2 ? What are those ?

 Transform data before display we called it as Pipes
 Built in pipes include lowercase, uppercase, decimal, date, percent, currency etc

 To apply a pipe on a bound property use the pipe character " | "
   <td>{{employee.code | uppercase}}</td>
   We can also chain pipes<td>{{employee.dateOfBirth | date:'fullDate' | uppercase }}</td>

23) What is ngFor in angular 2 ? How to define ngFor in angular 2 with example ?

   1) ngFor is usually used to display an array of items

   2) Since ngFor is a structural directive it is prefixed with *

   Example: *ngFor='let employee of employees'

            <tr *ngFor='let employee of employees'>
            <td>{{employee.code}}</td>
            <td>{{employee.name}}</td>
            <td>{{employee.gender}}</td>
            <td>{{employee.annualSalary}}</td>
            <td>{{employee.dateOfBirth}}</td>
           </tr>

24) What is ngIf in angular 2 ? How to define ngIf in angular 2 with example ?

    ngIf structural directive displays the row "No employees to display" when employees property does not exist or when there are ZERO employees in the array.

     Example : <tr *ngIf="!employees || employees.length==0">
               <td colspan="5">
                No employees to display
            </td>
           </tr>

25) What is Data Binding in angular 2?

  Data binding help us coordinate communication between a component and its view template. Data binding consist of One-Way Data-Binding and Two-Way Data-Binding

26) How many ways can data bind in angular2 ?

  In Angular data-binding can be broadly classified into 3 categories

  Data Binding          Description

  One way data-binding From Component to View Template

  One way data-binding From View Template to Component

  Two way data-binding From Component to View Template & From View template to Component

27) What is One way data-binding (From Component to View Template) ?

   One way data-binding - From Component to View Template : To display read-only data on a view template we use one-way data binding technique

   In the following example, Angular pulls the value of the firstName property from the component and inserts it between the opening and closing <h1> element.


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

    @Component({
       selector: 'my-app',
       template: `
                   <h1>{{ firstName }}</h1>
                 `
     })
    export class AppComponent {
          firstName: string = 'Srini';
      }

   Output :  Srini


28) What is the difference between Interpolation and Property binding ?

   Interpolation is a special syntax that Angular converts into a property binding.

   Interpolation is just a convenient alternative to property binding.

   In some cases like when we need to concatenate strings we have to use interpolation instead of property binding as shown in the example below.
        <img src='http://www.pragimtech.com/{{imagePath}}' />

    When setting an element property to a non-string data value, you must use property binding. In the following example, we are disabling a button by binding to the      boolean property isDisabled.
       <button [disabled]='isDisabled'>Click me</button>

   If we use interpolation instead of property binding, the button is always disabled irrespective of isDisabled class property value
  <button disabled='{{isDisabled}}'>Click me</button>


29) How to resolve this below error ?

    No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:12345' is therefore not allowed access.

    We get this error because our Angular application and Web API service are in different projects. Because they are present in different projects the port numbers     are different. Since the port numbers are different, the request from the angular project to the web api project is a cross domain request which violates the same      origin policy and as a result the browser blocks the request for security reasons

    To fix this error include the following setting in web.config file of the Web API project
     <system.webServer>
       <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
           <add name="Access-Control-Allow-Headers" value="Content-Type" />
           <add name="Access-Control-Allow-Methods"
            value="GET, POST, PUT, DELETE, OPTIONS" />
       </customHeaders>
      </httpProtocol>
     </system.webServer>

30) What is an Observable ?

   Observable is an asynchronous pattern. In the Observable pattern we have an Observable and an Observer. Observer observes the Observable. In many implementations an   Observer is also called as a Subscriber.
   An Observable can have many Observers (also called Subscribers).
   Observable emits items or notifications over time to which an Observer (also called Subscriber) can subscribe.
   When a subscriber subscribes to an Observable, the subscriber also specifies a callback function.
   This subscriber callback function is notified as and when the Observable emits items or notifications.
   Within this callback function we write code to handle data itmes or notifications received from the Observable.

About Author: author 4 + years of Information Technology experience in understanding and analyzing the software and hardware engineering requirements, onsite and offshore management of product development. Expert work on design and development for windows,web,mobile Expert knowledge of C#,ADO.NET, ASP.Net MVC, ENTITY FRAMEWORK, LINQ,COLLECTIONS, JAVASCRIPT,AngularJs 1.0,Angular2, Jquery,Jquery-Ajax, SQL SERVER, XAML,Windows phone 8.1 Good knowledge of WCF-Restful services,WCF, WEB API-Services ,Web- Services,MIcrosoft-Azure,JUICE UI,HTML,CSS,AJAX Read More...

Join him on Google+ | Facebook | Linkedin

No comments