Angular Interview Questions and Answers - Part 03
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 common as 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 3rd 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:
Q026. What is Transpiling in Angular? How can you transcompile the TypeScript code into JavaScript code?
Q027. For what does "ng" stand for in Angular? Can you change this "ng" prefix in Angular?
Q028. How can you create a new Angular application?
Q029. Which port by default does the angular project use? How can you change the port number?
Q030. What is the project structure of Angular Application?
Q031. What is the purpose of a TypeScript configuration file in Angular? What is the use of the tsconfig.json file?
Q032. What is the use of the angular.json file?
Q033. What are the different ways to add CSS in Angular?
Q034. What is CSS Preprocessor? What are the different stylesheet formats supported by Angular?
Q035. What is SCSS in Angular?
Q036. What is SASS in Angular?
Q037. What is LESS in Angular?
Q038. What is Stylus CSS in Angular?
Angular Interview Questions and Answers: Part 03
Q026. What is Transpiling in Angular? How can you transcompile the TypeScript code into JavaScript code?
Transpiling is the process of converting the source code of one programming language into the source code of another. Typically, in Angular, this implies translating TypeScript code to JavaScript.
Since Angular applications are built using TypeScript which can not be executed by the browser directly. So TypeScript code needs to be transpiled into JavaScript before it can be executed. This is typically done using the TypeScript compiler (tsc) or build tools like Angular CLI.
The angular project contains a tsconfig.json file. The tsconfig.json file defines the TypeScript project settings, such as the compiler options and the files that should be included.
You can install typescript globally by: npm install -g typescript
You can test your install version of tsc by: tsc --version
Now in order to transcompile the "HelloWord.ts" file into "HelloWord.js" you can use the following command from the terminal:
tsc HelloWord.ts
You should now see the transpiled HelloWord.js JavaScript file in the same directory where the ts file is located.
Q027. For what does "ng" stand for in Angular? Can you change this "ng" prefix in Angular?
In Angular, the prefix "ng" stands for "Angular". It is a convention used in Angular to prefix directives, components, and other Angular-specific entities. The "ng" prefix helps to distinguish Angular-specific entities from regular HTML elements and attributes.
For example, ngFor is a built-in Angular directive used for rendering lists based on an array, and ngModel is a directive used for two-way data binding between an input element and a component property.
Q028. How can you create a new Angular application?
You can create an Angular application by running the following inside the command terminal:
ng new <angularApp-name>
You can create a standalone application as well by:
ng new <angularApp-name> --standalone
Q029. Which port by default does the angular project use? How can you change the port number?
When you run the angular application by default Angular CLI ng serve command will use port 4200 i.e. http://localhost:4200
But you can specify another port number by using the –port flag followed by the port number to ng serve command.
ng serve --port 4100
In the latest version of angular, angular asks to specify the port number if the port is already in use. In angular version 10+, you can also specify the default port number under the "serve" option of the angular.json file:
Q030. What is the project structure of Angular Application?
A project is a set of files that comprise a standalone application. The Angular CLI ng new command creates a workspace. By default, ng new creates an initial skeleton application at the root level of the workspace, along with its end-to-end tests. The root-level application has the same name as the workspace, and the source files reside in the src/ subfolder of the workspace.
Workspace Configuration Files:
All projects within a workspace share a CLI configuration context. Following are the workspace configuration files:
.editorconfig File: Contains configuration for code editors.
.gitignore File: It specifies intentionally untracked files that Git should ignore.
README.md File: It is an introductory documentation for the root application.
angular.json File: It contains CLI configuration options for the build, serve, and test tools that the CLI uses.
package.json File: It Configure npm package dependencies that are available to all projects in the workspace.
package-lock.json File: It provides version information for all packages installed into node_modules by the npm client.
tsconfig.json File: The base TypeScript configuration for projects in the workspace.
src/ Folder: It contains Source files for the root-level application project.
node_modules/ Folder: It provides npm packages to the entire workspace. Workspace-wide node_modules dependencies are visible to all projects.
Application Configuration Files:
The application-specific configuration files for the root application reside at the workspace root level. For a multi-project workspace, project-specific configuration files are in the project root, under projects/project-name/. Project-specific TypeScript configuration files inherit from the workspace-wide tsconfig.json.
tsconfig.app.json File: Application-specific TypeScript configuration, including TypeScript and Angular template compiler options.
tsconfig.spec.json File: TypeScript configuration for the application tests.
Application Project Files:
By default, the CLI command ng new tech-point-app creates a workspace folder named "my-app" and generates a new application skeleton in a src/ folder at the top level of the workspace.
app/ Folder: It contains the component files in which your application logic and data are defined.
assets/ Folder: It contains images and other asset files to be copied as-is when you build your application.
favicon.ico: An icon to use for this application in the bookmark bar.
index.html File: The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app.
main.ts File: The main entry point for your application. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser.
styles.css: It lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project.
Inside the src folder, the app folder contains your project's logic and data. Angular components, templates, and styles go here.
app/app.config.ts: Defines the application config logic that tells Angular how to assemble the application.
app/app.component.ts: Defines the logic for the application's root component, named AppComponent.
app/app.component.html: Defines the HTML template associated with the root AppComponent.
app/app.component.css: Defines the base CSS stylesheet for the root AppComponent.
app/app.component.spec.ts: Defines a unit test for the root AppComponent.
app/app.module.ts: Defines the root module, named AppModule, that tells Angular how to assemble the application.
Q031. What is the purpose of a TypeScript configuration file in Angular? What is the use of the tsconfig.json file?
TypeScript is the primary language for Angular application development. Browsers can't execute TypeScript directly. So Typescript code must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration. These configurations related to tsc (TypeScriptCompiler) are defined in the tsconfig.json file of Angular.
The root tsconfig.json file specifies the base TypeScript and Angular compiler options that all projects in the workspace inherit. TypeScript and Angular have a wide range of options that can be used to configure type-checking features and generate output.
The initial tsconfig.json for an Angular workspace typically looks like below:
Q032. What is the use of the angular.json file?
The angular.json file in an Angular app is the important configuration file for the Angular CLI. It stores information about the project's architecture, dependencies, build and test configurations, and other settings which is used by the CLI.
This file allows you to control the build and runtime settings for your Angular application, as well as manage the different environments and configuration profiles for your project.
In Angular, you can specify different environments in the angular.json file. In the “configurations” section, you can define a new environment by creating a new key with a meaningful name, such as “production” or “staging”.
The angular.json file at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults. These are used for build and development tools provided by the Angular CLI.
Q033. What are the different ways to add CSS in Angular?
The Angular CLI generates two types of style files by default:
1. Styles.css: Global CSS
It is located in the src/ directory. The CSS of this file applies to your entire application unless you specify styles at the component level. However, these styles don't affect everything on the page.
Inside the src/ folder of your project, you'll find a styles.css file. If you open it, you'll find out that it's empty. This file can be used for adding global styles and importing other style files.
All the CSS of this file will be automatically applied to the project components even without adding the reference src/styles.css to the component via an <link> element tag. Because Angular CLI makes use of an angular.json configuration file which contains a styles array that can be used for adding any global stylesheets. By default, the styles.css file is present in this array.
2. Component Styles: Component-Scoped CSS
The Angular CLI gives each component its own file for styles. The styles in this file apply only to its components. There are three ways to apply CSS to a component:
i) External CSS stylesheets via the <link> tag
ii) Internal CSS via the <style> tag
iii) Inline Styles via the style attribute
You can embed CSS styles directly into the HTML template by putting them inside <style> tags. You can also write <link> tags into the component's HTML template and provide the reference link of the component CSS.
By default in Angular, when you attach a CSS directly to a component, the scope of that CSS is exclusive to that component only. This scoping isolates it from the rest of your application.
When building with the CLI, you must configure angular.json to include all external assets, including external style files. Register global style files in the styles section which, by default, is pre-configured with the global styles.css file.
Q034. What is CSS Preprocessor? What are the different stylesheet formats supported by Angular?
A CSS preprocessor is a scripting language that generates a CSS syntax equivalent from another type of code, making it readable to web browsers. A CSS preprocessor is a program that lets you generate CSS from the preprocessor's unique syntax. CSS preprocessors are utilities that make it easier to write CSS.
They often compile code from their own custom syntax to the .css format that browsers can understand. So all the preprocessors themselves will compile and generate CSS in its final stage. There are many CSS preprocessors to choose from like Sass, SCSS, Less, and Stylus are called CSS preprocessors.
Also, the preprocessor allows you to maintain a standard code structure, presenting your stylesheets in a more readable way, so you can keep track of the styles of larger web applications. Pre-processors make it easier to read through your style sheets and figure out how everything is linked together.
Angular CLI allows you to use various preprocessor stylesheet formats:
1. Plain CSS (Cascading Style Sheets)
2. SCSS (Sassy CSS)
3. SASS (Syntactically Awesome Style Sheets)
4. LESS (Leaner Style Sheets)
5. Stylus
When creating a new Angular app using the ng new app-name command, the CLI will ask you: “Which stylesheet format would you like to use?”
Depending on whether you are using a CSS preprocessor, the extension on your CSS files can vary. Angular supports plain CSS, SCSS, Sass, Less, and Stylus
When you choose plain CSS, you are not using any CSS preprocessor. This means you are missing out on a lot of the incredibly useful features that preprocessors provide. Like Built-in functions, Variables, Nesting/Parent Selectors, Mixins, and more.
CSS preprocessors like Sass, for example, offer special features like loops, mixins, nested selectors, and if/else statements. These features make it easier to maintain your CSS code, especially in large teams. To use a CSS processor, you have to install the compiler in your local environment and/or production server.
Q035. What is SCSS in Angular?
The SCSS stands for "Sassy CSS" and it is the syntax for SASS. SCSS is a superset of CSS, which guarantees that the CSS code fundamentally works in SCSS as well. SCSS files must be translated to CSS once they are written. This process is known as ‘transpiling’, which is a mash-up of ‘translating’ and ‘compiling’. Sass is not the only CSS preprocessor, there is also LESS and Stylus, but Sass is the most popular.
Angular CLI provides built-in support to both Sass and SCSS (Sassy CSS). The difference between the two is mainly the syntax. The SASS syntax is based on proper indentation and it doesn't have semi-colons and curly braces, whereas SCSS syntax is more like CSS and therefore it is easy to convert CSS into SCSS.
SCSS is the file extension used for files created using the SASS language - a language that can be used to generate CSS files. While CSS can be coded without SASS, SASS provides conveniences that make it easier to reuse code through concepts like variables and functions (mixins).
Sass is the most mature, stable, and powerful professional-grade CSS extension language. It is completely compatible with all versions of CSS. When you choose the SCSS option when creating a new project the extension of the css file will be .scss for all the stylesheets.
ng new my-scss-app --style=scss
SCSS is a specific syntax of Sass. Originally, Sass was defined as an indented language where indentation helped determine blocks like Python and was loosely based on HAML. The original Sass was confusing for developers and lead to the creation of the modern version of Sass, SCSS. “Indented Sass” is used to refer to the original Haml-based syntax.
The Sass language is made up of both indented Sass and Sassy CSS, and both are supported today. Indented Sass files use the .sass file extension and Sassy CSS files use the .scss extension. Indented Sass has no parentheses or semicolons, whereas SCSS does.
Q036. What is SASS in Angular?
SASS stands for "Syntactically Awesome Style Sheets". The language of SASS is called SassScript. SASS is basically the same as LESS except it's used in Rails applications. The Sass language is made up of both indented Sass and Sassy CSS, and both are supported today. Indented Sass files use the .sass file extension and Sassy CSS files use the .scss extension. Indented Sass has no parentheses or semicolons, whereas SCSS does.
The preprocessor was originally built on the markup language YAML before it was introduced as its own script language. SASS is available under the MIT license and is open source. But there are also other implementations of the language that are available under proprietary licenses which are sometimes easier to handle.
The first SCSS preprocessor was written in Ruby. But this implementation has reached the end of life and has been superseded by Dart Sass. Dart Sass is a complete rewrite of Sass using the Dart language and transpiles Sass much faster than the original Ruby version. Sass is a command line tool and works like other command line compilers:
sass my-sass-file.scss [output.css]
Sass is a CSS preprocessor that adds powerful features to CSS, such as variables, mixins, and functions. Sass styles are written in a special syntax called SCSS (Sass CSS), which is a superset of CSS. SCSS files have the .scss extension and are compiled into regular CSS files that can be used in web applications.
Sass removes many of the syntax requirements from CSS, like blocks and semicolons, and adds a ton of new features for you to use. The most useful feature of using Sass is variable creation. Variables in your Sass code allow you to remove a lot of duplicated code from your style sheets.
To use Sass in your Angular project, you need to install the node-sass package:
npm install -g sass
To configure Angular to use Sass, you need to modify the angular.json file in the root of your project.
Q037. What is LESS in Angular?
LESS stands for "Leaner Style Sheets". Less was designed by Alexis Sellier in 2009. LESS is an open-source. The first version of LESS was written in Ruby; in the later versions, the use of Ruby was replaced by JavaScript. Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax.
Less is a dynamic CSS preprocessor that compiles and generates CSS during runtime on the server or client side. LESS is a CSS pre-processor that enables customizable, manageable, and reusable style sheets for websites. It is a dynamic style sheet language that extends the capability of CSS. LESS is also cross-browser friendly.
It is typically the choice for projects when you want to use JavaScript with your style sheets. Using LESS is not much different from writing regular CSS either. Like LESS, SASS is also completely backward compatible with regular CSS files. When you choose the Less option while creating the project from Angular CLI, all of your generated component style files will end with the .less extension. Less is unique from Sass in that all valid CSS code is also valid Less code. This makes writing Less very easy to pick up if you already know CSS.
You can install LESS on the server via NPM: npm install -g less
Less is a backward-compatible language extension for CSS. It uses Less.js i.e. JavaScript tool that converts your Less styles to CSS styles. Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly. Less supports Mixins. Variables, Nesting, Arithmetical operations, Functions, and much more.
Q038. What is Stylus CSS in Angular?
Stylus is a dynamic stylesheet preprocessor language that is compiled into CSS. It is an open-source pre-processor language for CSS. Its design is influenced by Sass and Less. It is regarded as the fourth most used CSS preprocessor syntax.
It was created by TJ Holowaychuk, a former programmer for Node.js and the creator of the Luna language. Browsers understand CSS code and Stylus code does not understand by the browsers directly. So Stylus code needs to compile to generate CSS at runtime during development.
Stylus is a superset of CSS with extended programming features like variables, mixins, operators, and functions. It is clean without semicolons and brackets. It provides reusable code in CSS and modularity and helps to organize the code in larger projects. It provides templates and variables, functions that can be declared once and reused in multiple places across multiple modules and applications.
To install Stylus via NPM: npm install stylus
Every Stylus CSS file ends in a .styl extension. Once you have written your Stylus CSS code, you can compile it with this command: stylus.
This should compile all the .styl files and output .css files in the current directory. The Stylus compiler also makes it possible to compile .css files into .styl with the --css flag.
To convert a .css file to the .styl format, use this command: stylus --css style.css style.styl
Recommended Articles
Thanks for visiting this page. Please follow and join us on LinkedIn, Facebook, Telegram, WhatsApp, Quora, YouTube, Twitter, Instagram, VK, Tumbler, and Pinterest for regular updates.
Posts
No comments:
Post a Comment
Please do not enter any HTML. JavaScript or spam link in the comment box.