Eternal Infotech Front end Developer Interview Questions, Process, and Tips

Q1. What is event bubbling
Add your answer
Q2. What is TDD and why TDD
Add your answer

Reactive form and crud operations pipes crud operations

Q1. Basic understanding of js and angular is must expeciallly how js works questions on arrays objects shallow deep copy
Add your answer

Q1. Caching Strategy
Add your answer
Q2. What is micro Frontend architecture
Ans. 
Micro Frontend architecture is an approach to building front-end applications by breaking them down into smaller, independently deployable units.
• Allows different teams to work on separate parts of the application

• Each micro frontend can be developed using different technologies

• Enables incremental upgrades and updates without affecting the entire application

• Can improve performance by loading only the necessary components

• ...read more
Answered by AI
Add your answer
Q3. Pure and impure pipes in angular
Ans. 
Pure pipes in Angular are stateless and do not change the input data, while impure pipes can have side effects and change the input data.
• Pure pipes are used for simple transformations like formatting dates or numbers.

• Impure pipes are used for more complex transformations that require state or side effects.

• Pure pipes are faster and more efficient as they only run when a pure change to the input data is detected.

• Impure p...read more
Answered by AI
Add your answer
Q4. How to make singleton services multiton
Ans. 
Singleton services can be made multiton by maintaining a map of instances with unique keys.
• Create a map to store instances with unique keys

• Use a factory method to retrieve instances based on keys

• Ensure that only one instance is created per key
Answered by AI
Add your answer
Q5. What is dependency injection
Ans. 
Dependency injection is a design pattern where components are given their dependencies rather than creating them internally.
• Allows for easier testing by injecting mock dependencies

• Promotes loose coupling between components

• Improves code reusability and maintainability

• Examples: AngularJS, Spring Framework
Answered by AI
Add your answer

Q1. CSS Box-model definition
Ans. 
CSS Box-model defines how elements are rendered in a webpage, including padding, border, and margin.
• Box-model consists of content, padding, border, and margin

• Content area is where text or images are displayed

• Padding is the space between content and border

• Border is the line around the content and padding

• Margin is the space outside the border
Answered by AI
Add your answer
Q2. Difference b/n flexbox and grid
Ans. 
Flexbox is for one-dimensional layouts, grid is for two-dimensional layouts.
• Flexbox is best for arranging items in a single row or column.

• Grid is best for creating complex layouts with rows and columns.

• Flexbox is more suitable for smaller scale layouts, while grid is better for larger scale layouts.

• Flexbox is more flexible in terms of item order and sizing, while grid provides more control over the overall layout.

• Both
Answered by AI
Add your answer

Q1. Change Detection
Add your answer
Q2. Subjects & types
Add your answer

Q1. What is mean by dom
Ans. 
DOM stands for Document Object Model, which is a programming interface for web documents.
• DOM is a representation of the structure of a web page, allowing scripts to dynamically access and update the content, structure, and style of the page.

• It provides a way for scripts to interact with the elements on a web page, such as changing text, styles, and attributes.

• DOM is hierarchical, with elements nested inside other eleme...read more
Answered by AI
Add your answer
Q2. Explain promise in typescript
Ans. 
Promises in TypeScript are objects representing the eventual completion or failure of an asynchronous operation.
• Promises are used to handle asynchronous operations in a more readable and manageable way.

• They can be in one of three states: pending, fulfilled, or rejected.

• Promises can be chained using .then() to handle success and .catch() to handle errors.

• Example: const myPromise = new Promise((resolve, reject) => { ...
Answered by AI
Add your answer
Q3. Explain hooks in javascript
Ans. 
Hooks in JavaScript are functions that let you use state and other React features without writing a class.
• Hooks were introduced in React 16.8 to allow functional components to have state and lifecycle methods.

• useState() is a hook that allows you to add state to functional components.

• useEffect() is a hook that allows you to perform side effects in functional components.

• Custom hooks are functions that allow you to reuse
Answered by AI
Add your answer
Q4. Write a program 1 to 100 prime numbers
Ans. 
Generate an array of prime numbers from 1 to 100.
• Iterate from 1 to 100 and check if each number is prime

• A prime number is only divisible by 1 and itself

• Start with a list of prime numbers and check divisibility
Answered by AI
Add your answer

2 DSA questions. Both medium level difficult

Round duration - 60 Minutes
Round difficulty - Medium

This round consisted of some standard questions related to HTML , CSS , JS and basic Frontend develeoper practices .

Q1. What are the features of HTML5?
Ans. 
HTML stands for Hypertext Markup Language, and it is the standard markup language for creating web pages and
web applications. HTML5 is the 5th version of HTML.

Some of the new features that were added in HTML5 that make it better than HTML are as follows :

1) Intro of audio and video : Audio and Video tags are the two major addition to HTML5. It allows developers to
embed a video or audio on their website. HTML5 video can...read more
Answered Anonymously
Add your answer
Q2. Can you explain the CSS Box Model?
Ans. 
1) The CSS box model is a container that contains multiple properties including borders, margin, padding, and the
content itself.

2) It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of
different elements.

3) The web browser renders every element as a rectangular box according to the CSS box model.

4) Box-Model has multiple properties in CSS. Some of them are giv...read more
Answered Anonymously
Add your answer
Q3. Can you explain hoisting in JavaScript?
Ans. 
Hoisting is a default behaviour of javascript where all the variable and function declarations are moved on top.
This means that irrespective of where the variables and functions are declared, they are moved on top of the scope. The scope can be both local and global.

EXAMPLE 1 : 

hoistedVariable = 10;
console.log(hoistedVariable); // outputs 10 even when the variable is declared after it is initialized 
var hoist...read more
Answered Anonymously
Add your answer
Q4. What are closures in JavaScript?
Ans. 
A closure is the combination of a function and the lexical environment within which that function was declared. i.e, It is an inner function that has access to the outer or enclosing function’s variables. The closure has three scope chains

i) Own scope where variables defined between its curly brackets
ii) Outer function’s variables
iii) Global variables

Let's take an example of closure concept, 

function Welcome(name)...read more
Answered Anonymously
Add your answer
Q5. What is the difference between 'var' and 'let' in JavaScript?
Ans. 
1) The main difference between let and var is that scope of a variable defined with let is limited to the block in which it is declared while variable declared with var has the global scope. So we can say that var is rather a keyword which defines a variable globally regardless of block scope.

2) The scope of let not only limited to the block in which it is defined but variable with let also do not get added with global...read more
Answered Anonymously
Add your answer
Q6. What is prototype chaining in JavaScript?
Ans. 
1) Nearly all objects in JavaScript are instances of Object.

2) That means all the objects in JavaScript inherit the properties and methods from Object.prototype. This is called
Prototype chaining.

3) This is a very powerful and potentially dangerous mechanism to override or extend object behavior.

4) Objects created using the new keyword inherit from a prototype called Object.prototype.

For example: If a date object [new D...read more
Answered Anonymously
Add your answer

Round duration - 50 Minutes
Round difficulty - Medium

This round primarily focused on AngularJS and had questions revolving around it and basic JavaScript.

Q1. What are components in Angular?
Ans. 
Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.
Answered Anonymously
Add your answer
Q2. What are the differences between a Component and a Directive in Angular?
Ans. 
In a short note, A component(@component) is a directive-with-a-template.

Some of the major differences b/w the two are : 

Component : 
1) To register a component we use @Component meta-data annotation
2) Components are typically used to create UI widgets
3) Component is used to break up the application into smaller components
4) Only one component can be present per DOM element
5) @View decorator or templateurl/temp...read more
Answered Anonymously
Add your answer
Q3. What are lifecycle hooks in Angular?
Ans. 
Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application. 

The description of each lifecycle method is as below,

1) ngOnChanges: When the value of a data bound property changes, then this method is called.

2) ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound propertie...read more
Answered Anonymously
Add your answer
Q4. What is a service in Angular?
Ans. 
A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components. 

Let's create a repoService which can be used across components, 

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable({ // The ...read more
Answered Anonymously
Add your answer
Q5. What is dependency injection in Angular?
Ans. 
Dependency injection (DI), is an important application design pattern in which a class asks for dependencies from external sources rather than creating them itself. Angular comes with its own dependency injection framework for resolving dependencies( services or objects that a class needs to perform its function).So you can have your services depend on other services throughout your application.
Answered Anonymously
Add your answer
Q6. 
Sort Array Problem Statement
Given an array consisting of 'N' positive integers where each integer is either 0, 1, or 2, your task is to sort the given array in non-decreasing order.
Input:
Each input st...read more
Ans. 
1) The sort() method allows us to sort elements of an array in place. Besides returning the sorted array, the sort()
method changes the positions of the elements in the original array.

2) By default, the sort() method sorts the array elements in ascending order with the smallest value first and largest
value last.

3) The sort() method casts elements to strings and compares the strings lexicographically to determine the ord...read more
Answered Anonymously
Add your answer
Q7. What is Angular Bootstrap?
Ans. 
angular.bootstrap is a function component in the core ng module that is used for starting up the Angular application manually, which gives you more control over how you initialize your application. The syntax for angular.bootstrap is as follows:

angular.bootstrap(element, [modules], [config]);

Here , element is a DOM element (e.g. document) that is the root of the Angular application, modules (optional) is an array of mo...read more
Answered Anonymously
Add your answer

Round duration - 30 Minutes
Round difficulty - Easy

This was a typical HR round with some standard Behavioral questions like my interests, weaknesses, strengths, family
background, are you willing to relocate or travel , why Siemens, CEO of Siemens etc.

Q1. Why should we hire you?
Ans. 
Tip 1 : The cross questioning can go intense some time, think before you speak.

Tip 2 : Be open minded and answer whatever you are thinking, in these rounds I feel it is important to have opinion.

Tip 3 : Context of questions can be switched, pay attention to the details. It is okay to ask questions in these round,
like what are the projects currently the company is investing, which team you are mentoring. How all is the ...read more
Answered Anonymously
Add your answer