Angular Interview Questions and Answers | UI Architect Advanced Level Questions

How to write Custom Filter in Angular ?

Angular exposes a simple API for creating a filter. similiar to controller declaration with syntax  app.controller(‘myCtrl', function(){});, you can create a new filter by appending .filter(‘filterName', function(){}) to your Angular application. A filter is very similar to a factory or service but has a global scope once its created.You can invoke a filter on both the data binding in your html or directly inside of your controller or directive by using the $filter service.

Function to find the longest word in a sentence ?
First take string sentence and convert this into a array using split()  with separator as space (‘ ‘).

const stringArray = str.split(" ");

And than pass this array into custom sort function to sort based on the word length.

function findLongestWord(str) {
  const stringArray = str.split(" ");
  const orderedArray = stringArray.sort((a, b) => {
    return a.length < b.length;
  });
  return orderedArray;
}

Now just return the  first word (0-index of the array) of the array which contains longest word of the sentence.

Difference between service & factory in Angular ?

The difference between factory and service is just like the difference between a function and an object

Factory Provider

• Gives us the function’s return value ie. You just create an object, add properties to it, then return that same object.When you pass this service into your controller, those properties on the object will now be available in that controller through your factory. (Hypothetical Scenario)
• Singleton and will only be created once
• Reusable components
• Factory are a great way for communicating between controllers like sharing data.
• Can use other dependencies
• Usually used when the service instance requires complex creation logic
• Cannot be injected in .config() function.
• Used for non configurable services
• If you’re using an object, you could use the factory provider.
• Syntax: module.factory('factoryName', function);

Service Provider

• Gives us the instance of a function (object)- You just instantiated with the ‘new’ keyword and you’ll add properties to ‘this’ and the service will return ‘this’.When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service. (Hypothetical Scenario)
• Singleton and will only be created once
• Reusable components
• Services are used for communication between controllers to share data
• You can add properties and functions to a service object by using the this keyword
• Dependencies are injected as constructor arguments
• Used for simple creation logic
• Cannot be injected in .config() function.
• If you’re using a class you could use the service provider
• Syntax: module.service(‘serviceName’, function);

AngularJS .service

module.service('MyService', function() {

    this.method1 = function() {
            //..method1 logic
        }

    this.method2 = function() {
            //..method2 logic
        }
});

AngularJS .factory

module.factory('MyFactory', function() {

    var factory = {}; 

    factory.method1 = function() {
            //..method1 logic
        }

    factory.method2 = function() {
            //..method2 logic
        }

    return factory;
});

Explain CSS position attribute ?

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

Explain Isolate Scope in Angular ?
Scope in AngularJS inherits from Parent Scope by default. Isolated scope does not inherit from the parent scope by default. It can access its parent scope through the $parent property.  So, Directive has three options for isolating its scope from parent scope. The following are the three options:

Explain angular Prototype ? 

Difference between async and defer tags in Javascript ?
Defer and Async tags are available only for external scripts (with src=”” tag). If you will try to use them for internal scripts like <script>…</script> tags, defer and async will be ignored.
Adding an async tag to the JavaScript code , so that creation of the DOM model happens in parallel, and won’t be interrupted while the JavaScript is loading and executed.
Adding a defer tag with JavaScript code, it will not stop loading the DOM and CSSOM models. All scripts with a defer tag will be loaded and run immediately after the DOM and CSSOM models are completed. Any scripts will be loaded in the order you code.

What is Event delegation in JS ?
JavaScript event delegation is a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements.

What is Closure in JS ?
A closure is basically when an inner function has access to variables outside of its scope. Closures can be used for things like implementing privacy and creating function factories.

What is Debouncing & Throttling in JS ?
Debouncing is one way to solve the issue of same function calling multiple times on event action, by limiting the time that needs to pass by until a function is called again.

Throttling is another technique that’s is similar to debouncing, except that instead of waiting for some time to pass by before calling a function, throttling just spreads the function calls across a longer time interval.
So if an event occurs 10 times within 100 milliseconds, throttling could spread out each of the function calls to be executed once every 2 seconds instead of all firing within 100 milliseconds.

Difference between  TDD vs BDD ?
In TDD (Test Driven Development), the test is written to check the implementation of functionality, but as the code evolves, tests can give false results. BDD (Behavior Driven Development) is also a test-first approach, but differs by testing the actual behavior of the system from the end users perspective.