Angular Interview Questions and Answers - Part 05
Angular is a popular open-source single-page application design framework and development platform. It is a robust front-end JavaScript framework that is widely used for front-end application development. Nowadays Angular is very famous as a frontend technology so it is very common for the interview point as well.
Introduction
This is the Angular Interview Questions and Answers series. Here we will see 200+ Most Frequently Asked Angular Interview Questions. This is the 5th part of the Angular Interview Questions and Answer series.
I will highly recommend that please visit the following parts before continuing to this part:
Please do visit our YouTube Channel here to watch Interview Questions & Answers and important technology videos.
In this part we will discuss the following Important Angular Interview Questions:
Q049. What is the difference between ng build vs. ng serve command in Angular?
Q050. What is the difference between ng build vs. ng build --prod command in Angular CLI?
Q051. What is the purpose of the dist folder in Angular? When the dist folder is created?
Q052. What are the key building blocks of any Angular application?
Q053. What is the metadata.json file? What is the purpose of the metadata.json file?
Q054. What is MVVM architecture? What is the difference between MVC vs. MVVM pattern?
Q055. What is Angular Material? How can you use the material in the Agular app?
Q056. What type of DOM does Angular use? What is the difference between Regular DOM vs. Virtual DOM?
Q057. What is Single Page Application (SPA)? Why SPA if you can use Ajax to update the content of the page without reloading the entire page?
Q058. What is Bootstrap? How can you embed Bootstrap into an Angular App?
Q059. What are controllers in Angular? What is the difference between controller vs. component?
Q060. What is class in Angular? How do we generate a class in Angular using CLI?
Angular Interview Questions and Answers: Part 05
Q049. What is the difference between ng build vs. ng serve command in Angular?
The ng build command compiles the Angular application into an output directory named dist/ at the given output path. This command is used when you're ready to build our application and deploy it.
The application builder of Angular uses the webpack build tool, with configuration options specified in the workspace angular.json configuration file. The ng build command is used intentionally for building the apps and deploying the build artifacts.
ng build
The ng serve command is used to develop and test our application locally. The ng serve command is intended for fast, local, and iterative developments and also for building, watching, and serving the application from a local CLI development server.
The ng serve command starts up a local development server, which will serve our application when creating it. When the server is running, the command automatically reloads if a file is modified, making the development process quick and easy.
ng serve
The ng serve command does not generate any output folder. But the ng build command will generate the output folder i.e. dist/.
The ng serve builds artifacts from memory instead for a faster development experience. While the ng build command generates output files just once and doesn’t serve them locally.
In ng serve the rebuild is enabled by default, so it detects changes in source files and automatically rebuilds and reloads the application in the browser. On the other hand, it is not enabled by default in the ng build. It requires the –watch flag to rebuild the application on file changes.
The ng serve is suitable for local development and testing purposes. While the ng build is intended for deploying the application to a web server or hosting platform.
Q050. What is the difference between the ng build vs. ng build --prod command in Angular CLI?
The ng build is used for the dev build by default (--dev) while the ng build --prod is used for creating the production build. The –prod flag activates many optimization flags. One of them is –aot for Ahead Of Time compilation. Your component templates are compiled during the build, so TypeScript can detect more issues in your code.
ng build --prod
A "production" configuration is generated by default when you use the CLI to create the new project, and you can use that configuration by specifying the –configuration="production" or the –prod="true" option explicitly as well.
Prod vs. Dev Build in Angular: There are the following key differences between them:
- The dev build uses the environment.ts file while the prod build uses the environment.prod.ts file.
- The dev build generates the source.map file whereas the prod build does not generate any source.map file. Source map files help us easily debug our application even after the files are compressed and compiled.
- In dev build global styles are extracted to .js files whereas with production build they are extracted to .css files.
- In the dev build, source files are not minified and uglified, but in production builds files are minified and uglified. Minification and uglification are generally used to reduce the bundle size.
- In the dev build, AOT is not enabled by default but AOT is enabled by default in the prod build. With the development build files will be compiled with the JIT compiler, but in the production build we get AOT compilation.
- Development build files are not tree-shaked, but production build files are. Tree shaking is a process of removing any code that we are not actually using in our application from the final bundle.
Q051. What is the purpose of the dist folder in Angular? When the dist folder is created?
The dist stands for distribution or distributable. It is the minified or concatenated version of the source code. The code present in the /dist folder is actually the code that is used on production web applications.
Along with the minified code, the dist/ folder also comprises all the compiled modules that may or may not be used with other systems. It is basically used on production sites. The CLI analyzes the application and makes the files while optimizing it to its best.
The ng build command generates the output folder as dist/. The ng build command compiles an angular application/library into an output directory named dist at the given path. The application builder in Angular uses a webpack build tool that configures the workspace configuration file.
It is easier to add files to the /dist folder as it is an automatic process. All the files are automatically copied to the dist folder on save. The dist folder contains the compiled code of your angular application in the format of JavaScript and it also contains HTML and CSS files.
Q052. What are the key building blocks of any Angular application?
There are nine main building blocks of any Angular application:
1. Components:
Components are the main building blocks for UI designing in Angular that lets you easily style through various CSS styling and other relevant components suitable for specific devices. An Angular app is built with a set of Angular components that are subsets of Angular directives and relevant to a specific template.
All Angular applications have at least one component called the root component. This component is bootstrapped in the root module, the main module. All the components include the logic of the application that is defined in a class, while the main role of the class is to interact with the view using an API of functions and properties.
The components in Angular generally have different types of file formats such as .css, .js, and .html files which are focused on styling, interactivity, and structuring respectively.
There are mainly two types of components in Angular: Parent Component and Child Component
2. Modules:
Modules are represented as NgModule. A module functions like a cohesive group of codes that offers a compact compilation context for diverse solutions, services, and parts. Modules are dedicated to maintaining the modularity of an Angular application.
There are two types of modules in Angular: Root modules and Feature modules.
The root module, which is known as AppModule of an Angular app, helps in bootstrapping while NgModules helps consolidate different types of directives, pipes, and components into cohesive blocks with well-defined functionalities.
Modules are crucial for Angular as they function as a collection of JavaScript modules with their respective functionalities. Some important modules are like HttpClientModule, CommonModule, BrowserModule, FormsModule, ReactiveFormsModule etc.
3. Data Binding:
Data binding is the process in which the various sections of a template interact with the component. The binding markup needs to be added to the HTML template so that Angular can understand how it can connect with the component and template. Data binding in Angular is pivotal to streamlining and defining the communication between a DOM and a specific component.
Angular supports multiple data bindings: One-way binding, Property binding, Attribute binding, Event Binding, and Two-way Binding.
4. Directives:
A directive in Angular is defined as a .js or .ts class that is declared with a directive to enable you to change or modify the UI elements during the runtime. Angular templates are of a dynamic nature, and directives help Angular understand how it can transform the DOM while manifesting the template.
There are three types of directives in Angular: Component Directives, Attribute Directives, and Structural Directives.
5. Metadata:
TypeScript classes have metadata attached to them with the help of decorators so that Angular will have an idea of processing the class. Metadata in Angular defines a class to ensure that it executes the functions it is intended to.
Metadata is crucial in configuring a class to exhibit its intended properties and hence is considered to be one of the prime building blocks during Angular development.
6. Services:
Services in Angular are represented as Injectable. They are basically the classes that let you use data in various components as per your requirements. It reduces the risks of code duplication. All you need to do is deploy a data service that is injectable and caters to your requirements.
7. Dependency Injection:
Dependency injection refers to the process of injecting a service into the constructor of a component. Not only does it help improve the reusability of a code, but makes the codes even more efficient and modular.
8. Template:
A template defines the host view of its related component. While the display of a page can be defined by a template internally, for external display template URL is used. The view of each component is linked with a template, and an Angular template is a type of HTML tag that allows Angular to get an idea of how it needs to render the component.
Templates are a collection of HTML in Angular that helps in rendering in several areas such as the user interface, overall view, browsers, and others while facilitating specific functionalities.
9. Routing:
The Angular router helps interpret the URL of a browser to get a client-generated experience and view. This router is bound to page links so that Angular can go to the application view as soon as the user clicks on it.
Q053. What is the metadata.json file? What is the purpose of the metadata.json file?
The metadata.json file is a crucial part of the Angular build process, enabling efficient compilation, dependency injection, dynamic loading, and overall optimization of your application. It is automatically generated during the build process and is used for a variety of purposes.
The metadata.json file will be only generated if the "skipMetadataEmit" flag is false (default is false) in the angular.json file. When true, it does not produce.
The .metadata.json files contain information needed by the template compiler from a .ts file that is not included in the .d.ts file produced by the TypeScript compiler. This information includes, for example, the content of annotations, such as a component's template, which TypeScript emits to the .js file but not to the .d.ts file.
The metadata.json file can be treated as a diagram of the overall structure of a decorator's metadata, represented as an abstract syntax tree(AST). During the analysis phase, the AOT collector scans the metadata recorded in the Angular decorators and outputs metadata information in metadata.json files, one per .d.ts file.
Purposes of the metadata.json File:
Compiler Configuration: The metadata.json file contains metadata and configuration information that helps the Angular compiler understand and process your project's code. It includes details about modules, components, services, directives, pipes, and other entities in your application.
AOT Compilation: In AOT compilation mode, the metadata.json file is essential as it provides the necessary metadata required to compile templates ahead of time for higher performance and smaller bundle sizes.
Dependency Injection: The metadata.json file describes the dependencies of various components, services, and modules, enabling the DI system to instantiate and inject them automatically.
Dynamic Loading and Tree Shaking: The metadata information in the metadata.json file allows Angular to facilitate the dynamic loading of components and modules when needed. It also enables the compiler to perform tree shaking, which eliminates unused code during the production build process, resulting in smaller bundle sizes.
Component Resolution: Angular uses the metadata to resolve component selectors, directives, and pipes in templates at compile-time. This ensures that the correct components are rendered and their associated logic is executed.
Q054. What is MVVM architecture? What is the difference between MVC vs. MVVM pattern?
The MVVM stands for Model-View-ViewModel. It is an architectural pattern used in software engineering. MVVM is a variation of the traditional MVC (Model-View-Controller) software design pattern. MVVM architecture is a popular choice for modern software applications. It allows developers to create applications that are more responsive and easier to maintain. Additionally, MVVM architecture can be used to create applications that can be easily ported to different platforms.
The main difference between the two is that MVVM separates the user interface logic from the business logic, while MVC separates the data access logic from the business logic. This separation of concerns makes it easier to develop, test, and maintain software applications. MVVM architecture is often used in conjunction with other software design patterns, such as Model-View-Presenter (MVP) and Model-View-Controller (MVC). These patterns can be used together to create a complete software application.
Model: The Model layer in MVVM architecture is responsible for storing and managing the data. It can be a database, a web service, or a local data source. The model contains the structure of an entity i.e. data of an object.
View: View is the visual layer of the application. The View layer is responsible for displaying data to the user. It can be a graphical user interface (GUI), a command-line interface (CLI), or a web page. It displays the data contained inside the Model. In angular terms, this will be the HTML template of a component.
ViewModel: ViewModel is an abstract layer of the application that handles the user-interaction logic of the application. The ViewModel layer is responsible for handling user input and updating the View layer accordingly. It contains the business logic of the application. It manages the data of a model and displays it in the view.
View and ViewModel are connected with data-binding (two-way data-binding in this case). For any change in the view, the ViewModel takes a note and changes the appropriate data inside the model.
Q055. What is Angular Material? How can you use the material in the Agular app?
Angular Material is a UI library component developed by Google in 2014. Google developed Angular Material in 2014 at that time, it was tagged to AngularJS to make the applications more attractive and faster performance. Google wrote the code again from scratch and removed JS, then named it Angular Material in September 2016. UI/UX components are known as Angular Materials.
Angular Material is specially designed for Angular developers. It is a cross-platform browser and it is used to create web components. It helps to design the application in a structured manner. Its components help to construct attractive, consistent, and functional web pages and web applications. It is used to create a responsive and faster website. Angular Material has standard CSS.
Angular Material components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, more beautiful, and more responsive websites. It is inspired by the Google Material Design.
It provides a set of pre-built and customizable UI components, such as buttons, forms, navigation menus, and dialog boxes, that follow the Material Design guidelines. Angular Material simplifies the process of building consistent and visually appealing user interfaces in Angular. It offers a range of features and styles that can be easily integrated into Angular projects.
Q056. What type of DOM does Angular use? What is the difference between Regular DOM vs. Virtual DOM?
The DOM stands for Document Object Model which is used for the evaluation of the performance of each of the UI frameworks. DOM is a programming interface that organizes the HTML, XHTML, and XML documents in the form of a tree. The tree enables the scripts to interact with each other dynamically. DOM treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.
Real DOM vs Virtual DOM:
There are two types of DOM: Real DOM and Virtual DOM.
When using a Real DOM, the whole tree behind the framework gets refreshed every time a change is made. This makes the process slower, and the framework’s performance declines. This problem is solved with the help of a Virtual DOM, that tracks the changes and ensures only specific elements are updated without affecting other parts of the tree.
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. The “virtual DOM” is more of a pattern than a specific technology.
A virtual DOM is a lightweight JavaScript representation of the Document Object Model used in declarative web frameworks such as React, Vue.js, and Elm. Updating the virtual DOM is comparatively faster than updating the actual DOM.
Angular uses Real DOM (Regular DOM) for its applications. For single pages that get updated occasionally, real DOM is perfect. This updates the entire tree structure of HTML tags until it reaches the data to be updated. However, to ensure that the speed and performance are not affected, Angular implements Change Detection.
In Angular apps, a real DOM is used, which means the whole tree structure is refreshed when a single change is made. This makes the process slower. However, React uses a Virtual DOM, which allows the developers to make changes to the tree without the need to update the entire tree.
Is the Shadow DOM the same as the Virtual DOM?
No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
Q057. What is Single Page Application (SPA)? Why SPA if you can use Ajax to update the content of the page without reloading the entire page?
A single-page application is a web application implementation approach that loads only a single web document (HTML document) and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown. The SPA web application dynamically rewrites a current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.
The SPA only sends what the user needs with each click, and that browser renders that information. This is different than a traditional page load where the server rerenders a full page with every click you make and sends it to your browser. This piece-by-piece, client-side method makes load times much faster for users. It also lessens the amount of information a server has to send and makes the whole process a lot more cost-efficient a win-win scenario for users and businesses.
There are many SPA development frameworks like Angular, React, Ember, and Vue in the market. Some popular examples of single-page applications like Gmail, Google Maps, Airbnb, Netflix, Pinterest, Paypal, and many more. Companies all over the internet are using SPAs to build a fluid, scalable experience.
A SPA downloads all the required files only once in the initial page load. After that, it only loads the required HTML data. The server sends you a shell page and your browser renders the user interface (UI).
SPAs also let developers build the front end of sites faster. This is due to the decoupled architecture of SPAs, or a separation of back-end services and front-end display.
Q058. What is Bootstrap? How can you embed Bootstrap into an Angular App?
Bootstrap is the world's most popular front-end, open-source CSS framework for easily designing and customizing responsive mobile-first sites, including Sass variables and mixins, a responsive grid system, a large library of pre-built components, and powerful JavaScript plugins.
Bootstrap was originally created by a designer and a developer at Twitter named Mark Otto and Jacob Thornton in mid-2010. It was originally released on August 19, 2011. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint.
With Bootstrap 2, they added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, they rewrote the library once more to make it responsive by default with a mobile-first approach.
It has many components for building responsive web interfaces. By using this framework we can easily manipulate the styling of any web page, like font style, text color, background color, flex, grid system, etc.
Bootstrap Provides Responsive Web Design, Mobile-First Development, Cross-Browser Compatibility, Efficient Prototyping, Customizable Themes and Styling, etc.
Bootstrap Vesrion 4 & Vesrion 5 are the most popular versions. Bootstrap 5 was recently released with components written in plain JavaScript rather than jQuery, which was previously required for Bootstrap use.
Even with the rise of modern frameworks and libraries such as Angular and React, jQuery has always been a requirement but also a source of conflict because these toolkits do not play well with jQuery or do things differently than jQuery, which manipulates the DOM directly rather than through virtual DOMs. Both Angular and Bootstrap are open-source projects that are available under the permissive MIT license.
There are two ways to embed the Bootstrap library into your application:
Angular Bootstrap via CDN: Bootstrap CDN is a public Content Delivery Network. It enables you to load the CSS and JavaScript files remotely from its servers.
Angular Bootstrap via NPM: The second way to add Bootstrap to your Angular project is to install it into your project folder by using NPM.
You can install the bootstrap and bootstrap-icons libraries that contain the files with Bootstrap's styles and JavaScript code like this:
npm install bootstrap bootstrap-icons
After installation, we will configure the bootstrap and bootstrap-icons libraries. Change the angular.json file and add the bootstrap.scss, bootstrap-icons.css and bootstrap.bundle.min.js files.
Q059. What are controllers in Angular? What is the difference between ng-controller and component?
AngularJS controllers control the data of traditional AngularJS applications. They are regular JavaScript Objects. The ng-controller directive defines the application controller. In AngularJS, the ng-controller directive attaches a controller to the view. Controllers can be attached to the DOM in different ways.
<div ng-app="myApp" ng-controller="myCtrl"> </div>
AngularJS Controller (Angular 1.x), is replaced with the component class in Angular 2 because now we have ES6 classes. ES6 classes, combined with Typescript, make it very easy for stuff like dependency injection.
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: [ './movie-list.component.css' ],
})
The key difference between components and controllers is that the inner structure of components is isolated from their surroundings and can be thought of as black boxes. Components create their own scope hierarchy that is invisible from the outside world.
Q060. What is class in Angular? How do we generate a class in Angular using CLI?
JavaScript has a prototype-based, object-oriented programming model. It creates objects using other objects as blueprints and to implement inheritance it manipulates what’s called a prototype chain.
Although the prototype pattern is a valid way to implement object orientation it can be confusing for newer JavaScript developers or developers used to the classical pattern. So in ES6, we have an alternative syntax, one that closely matches the classical object-orientated pattern as is seen in other languages.
TypeScript supports the ES6 class syntax but also adds some other features like access modifiers and interfaces.
A class is a blueprint for creating objects with specific functions and properties already attached to it. We can generate a class in Angular using CLI with the ng generate class command followed by the class name we want to create:
ng generate class [name] [options]
ng generate class accepts 3 different types of options:
project: The name of the project. It is a string type.
skip-tests: Do not create "spec.ts" test files for the new class. It is a bool type which is false by default.
type: Adds a developer-defined type to the filename, in the format "name.type.ts". It is a string type.
Posts
No comments:
Post a Comment
Please do not enter any HTML. JavaScript or spam link in the comment box.