Angular Interview Questions

Angular Interview Questions 1. What is the difference between Angular and AngularJS? AngularJS 1. AngularJS refers to version 1.x which is in JavaScript (hence JS). 2. AngularJS is a structural framework for dynamic web apps. It can be added to an HTML page with a <Script> tag. 3. It extends HTML attributes with directives & binds data to HTML with expressions. 4. Rendering at client side Angular 1. Angular refers to Angular 2 and above which is in TypeScript (hence no JS) 2. mobile oriented & better in performance. 3. Angular provides more choice for languages. You can use any of the languages from ES5, ES6, TypeScript or Dart. 4. Angular implements web standards like components, and it provides better performance. 5.Component based and MVVM. 6. Rendering at server side. 2. What are the main components of Angular 2? Component:− This can be used to bring the modules together. Service: − This is used to create components which can be shared across the entire application. Modules: − This is used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task. Templates: − This is used to define the views of an Angular JS application. Metadata: − This can be used to add more data to an Angular JS class.

3. What are the core differences between Observables and Promises? A Promise handles a single event when an async operation completes or fails. Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn't so far. An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn't matter if you want to handle 0, 1, or multiple events. You can utilize the same

API in each case. Observable also has the advantage over Promise to be cancelable. If the result of an HTTP request to a server or some other expensive async operation isn't needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don't need the notification or the result it provides anymore. Observable provides operators like map, forEach, reduce, ... similar to an array. There are also powerful operators like retry(), or replay(), ... that are often quite handy. Promises vs Observables o

i. ii. o

Promises: returns a single value not cancellable Observables: 1. works with multiple values over time 2. cancellable 3. supports map, filter, reduce and similar operators 4. proposed feature for ES 2016 5. use Reactive Extensions (RxJS) 6. an array whose items arrive asynchronously over time https://stackoverflow.com/questions/36064303/what-are-the-differences-betweenobservables-and-promises-in-javascript 4. How do components communicate with each other? A: Various ways - for example: Input/Output properties, services, View child / ViewContent. 5. What is an async pipe? A: An impure pipe that accepts a promise or observable as input and eventually returns emitted values. 6. What are observables? A: They provide a declarative way of message passing between publishers and subscribers in an application. They typically produce one or more values over time, which are subscribed to by observers. They provide some advantages over promises. 7. What are some advantages to using observables? A: Observables are cancellable; they come with powerful transformative functions (especially when using RxJS) to make asynchronous coding easier. 8. Explain the life cycle hooks of Angular 2 application Angular 2 component/directive has lifecycle events, managed by @angular/core. It creates the component, renders it, creates and renders its children, processes changes when its data-bound properties change, and then destroys it before removing its template from the DOM. Angular provides a set of lifecycle

hooks(special events) which can be tapped into this lifecycle and perform operations when required. The constructor executes prior to all lifecycle events. Each interface has a single hook method prefixed with ng. For example, ngOnint interface has Oninit method that must be implemented in the component. Some of the events are applicable for both component/directives while few are specific to components.  

 

ngOnChanges: Responds when angular sets its data-bound property which receives the current and previous object values. ngOnInit: Initializes the component/directive after first ngOnChange triggers. This is most frequently used method to retrieve the data for the template from a back-end service. ngDoCheck: Detect and act upon changes occuring outside Angular context. It is called when every change detection run. ngOnDestroy: Cleanup just before Angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks. Component-specific hooks:

   

ngAfterContentInit: Component content has been initialized ngAfterContentChecked: After Angular checks the bindings of the external content that it projected into its view. ngAfterViewInit: After Angular creates the component’s view. ngAfterViewChecked: After Angular checks the bindings of the component’s view.

9. What is lazy loading and How to enable lazy loading in angular 2? Most of the enterprise application contains various modules for specific business cases. Bundling whole application code and loading will be huge performance impact at initial call. Lazy lading enables us to load only the module user is interacting and keep the rest to be loaded at runtime on demand. Lazy loading speeds up the application initial load time by splitting the code into multiple bundles and loading them on demand. Every Angular application must have one main module say AppModule. The code should be splitted into various child modules (NgModule) based on the application business case.

JavaScript Interview Questions What is Closure? A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables. Closures is a neat way to deal with scope issues. The closure has three scope chains: it has access to its own scope — variables defined between its curly brackets it has access to the outer function’s variables it has access to the global variables Suppose, you want to count the number of times user clicked a button on a webpage. For this, you are triggering a function on onclick event of button to update the count of the variable. click me Now there could be many approaches like: 1) You could use a global variable, and a function to increase the counter: var counter = 0; function updateClickCount() { ++counter; // do something with counter } But, the pitfall is that any script on the page can change the counter, without calling updateClickCount(). 2) Now, You might be thinking of declaring the variable inside the function: function updateClickCount() { var counter = 0; ++counter; // do something with counter } But, Hey! Every time updateClickCount() function is called, the counter is set to 1 again. 3) Thinking about Nested functions?

Nested functions have access to the scope "above" them. In this example, the inner function updateClickCount() has access to the counter variable in the parent function countWrapper() function countWrapper() { var counter = 0; function updateClickCount() { ++counter; // do something with counter } updateClickCount(); return counter; } This could have solved the counter dilemma, if you could reach the updateClickCount() function from the outside and you also need to find a way to execute counter = 0 only once not everytime. 4) Closure to the rescue! (self-invoking function): var updateClickCount=(function(){ var counter=0; return function(){ ++counter; // do something with counter } })(); The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression. This way updateClickCount becomes a function. The "wonderful" part is that it can access the counter in the parent scope. This is called a JavaScript closure. It makes it possible for a function to have "private" variables. The counter is protected by the scope of the anonymous function, and can only be changed using the add function! More lively example on Closure: <script> var updateClickCount=(function(){ var counter=0; return function(){ ++counter; document.getElementById("spnCount").innerHTML=counter; } })();

click me Self exercise https://js.do/ Difference between call, apply and bind method in JavaScript? Call - allows you to pass in arguments one by one. Example function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = 'food'; } console.log(new Food('cheese', 5).name); // expected output: "cheese" Apply -allows you to pass in arguments as an array. Example var numbers = [5, 6, 2, 3, 7]; //passed as a array var max = Math.max.apply(null, numbers); console.log(max); // expected output: 7 Bind returns a new function, allowing you to pass in a this array and any number of arguments. Example Bind () Allows us to Borrow Methods var pokemon = { firstname: 'Pika', lastname: 'Chu ',

};

getPokeName: function() { var fullname = this.firstname + ' ' + this.lastname; return fullname; }

var pokemonName = function() { console.log(this.getPokeName() + 'I choose you!'); }; var logPokemon = pokemonName.bind(pokemon); // creates new object and binds pokemon. 'this' of pokemon === pokemon now logPokemon(); // 'Pika Chu I choose you!' React JS interview 1. Differentiate between Real DOM and Virtual DOM. Real DOM

Virtual DOM

1. It updates slow.

1. It updates faster.

2. Can directly update HTML.

2. Can’t directly update HTML.

3. Creates a new DOM if element updates. 3. Updates the JSX if element updates. 4. DOM manipulation is very expensive.

4. DOM manipulation is very easy.

5. Too much of memory wastage.

5. No memory wastage.

2.What do you understand by Virtual DOM? Explain its working. A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system. This Virtual DOM works in three simple steps.

1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.

2. Then the difference between the previous DOM representation and the new

one is calculated. 3. Once the calculations are done, the real DOM will be updated with only the

things that have actually changed.

React vs Angular TOPIC

REACT

ANGULAR

1. ARCHITECTURE

Only the View of MVC

Complete MVC

2. RENDERING

Server-side rendering

Client-side rendering

Uses virtual DOM

Uses real DOM

One-way data binding

Two-way data binding

Compile time debugging

Runtime debugging

3. DOM 4. DATA BINDING 5. DEBUGGING

6. AUTHOR

Facebook

Google

Explain the lifecycle methods of React components in detail. Some of the most important lifecycle methods are: i. ii. iii. iv. v. vi. vii.

componentWillMount() – Executed just before rendering takes place both on the client as well as server-side. componentDidMount() – Executed on the client side only after the first render. componentWillReceiveProps() – Invoked as soon as the props are received from the parent class and before another render is called. shouldComponentUpdate() – Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false. componentWillUpdate() – Called just before rendering takes place in the DOM. componentDidUpdate() – Called immediately after rendering takes place. componentWillUnmount() – Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

What do you know about controlled and uncontrolled components?

Controlled vs Uncontrolled Components Controlled Components 1. They do not maintain their own state

Uncontrolled Components 1. They maintain their own state

2. Data is controlled by the parent component 2. Data is controlled by the DOM 3. They take in the current values through props and then notify the changes via callbacks

3. Refs are used to get their current values