Angular Concept questions and answers

Angularjs vs Angula4r2 vs Angular                                                                                     Angularjs vs Angular2 vs Angular4           1.Architecture- MVC                                    1.  Model, view, component                                                         1. reduced it’s bundled file                                                                                                                                                                                                 size  by 60%           2. Used Javascript to build app                 2.  Used Typescript 2.0 to build app (TS is a superset of JS)    2. TS 2.1 and 2.2           3. No mobile support                                 3. It made possible to accomplish the native                             3. same                                                                                       applications  for a mobile platform                                             Animations moved to its                                                                                                                                                                                                 own package,                                                                                                                                                                                                 @angular/animations                                                                                                                                                                                                 *ngIf with else                                                                                                                                                                                                   

Pipes in Angular? A pipe takes in data as input and transforms it to a desired output. Built-in-pipes:     DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe Example:  {{ birthday | date: "MM/dd/yy" }} , you can also pass multiple parameters to a pipe by using :  Chaining Pipes: e.g  {{ birthday | date: "MM/dd/yy"  | uppercase}} - we can use multiple pipes for  an input. Custom Pipes:   e.g  @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, exponent: string): number { let exp = parseFloat(exponent); return Math.pow(value, isNaN(exp) ? 1 : exp); } } Explanation:  A pipe is a class decorated with pipe metadata. The pipe class implements the PipeTransform interface's transform method that accepts an input value followed by optional parameters and returns the transformed value. There will be one additional argument to the transform method for each parameter passed to the pipe. Your pipe has one such parameter: the exponent. To tell Angular that this is a pipe, you apply the @Pipe decorator, which you import from the core Angular library. The @Pipe decorator allows you to define the pipe name that you'll use within template expressions. It must be a valid JavaScript identifier. Your pipe's name is exponentialStrength. Types: Pure pipe- no internal state- for given input, expected output produced              Impure pipe- has state, output may change for an input or output doesn't always depends on input

How many types can we create obj in javascript? var d = new Object(); var a = Object.create(null); var b = {}; var Obj = function(name) { this.name = name } var c = new Obj("hello"); function myObj(){}; myObj.prototype.name = "hello"; var k = new myObj(); Es6 class syntax: class myObject { constructor(name) { this.name = name; } } var e = new myObject("hello"); Singleton pattern: var l = new function(){ this.name = "hello"; }

4. Prototypes in javascript? When a function is created in JavaScript, JavaScript engine adds a prototypeproperty to the function. This prototype property is an object (called as prototype object) has a constructor property by default. constructor property points back to the function on which prototype object is a property. We can access the function’s prototype property using the syntax functionName.prototype.  

5. Import 3rd party library & package.json  npm install lib-name --save npm install @types/lib-name --save-dev

6. Hoist in javascript All variables are declared at the top of any function scope or block. Var is hoisted. Const and let are not hoisted since they are block scoped variables. and var is global scope. - Variable hoisting function definition hoisting:

What Are Arrow Functions? Arrow functions are anonymous and change the way this binds in functions. By using arrow function we avoid having to type the function keyword, return keyword (it’s implicit in arrow functions), and curly brackets. Basic Syntax with One Parameter-  Basic Syntax with One Parameter No Parameters -  Parentheses are required when no parameters are present. Usecases-  Promises and Callbacks Code that makes use of asynchronous callbacks or promises often contains a great deal of function and return keywords. When using promises, these function expressions will be used for chaining

What is DOM? When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."  The DOM represents the document as nodes and objects. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page

How to debug a javascript application? JavaScript Debuggers- With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing. The console.log() Method-   Setting Breakpoints The debugger Keyword-  The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging function. This has the same function as setting a breakpoint in the debugger. If no debugging is available, the debugger statement has no effect. With the debugger turned on, this code will stop executing before it executes the third line.