https://www.simplilearn.

com/tutorials/angular-tutorial/angular-interview-questions
https://intellipaat.com/blog/interview-question/angular-interview-questions/
https://github.com/sudheerj/angular-interview-questions

What is Angular ?
1. Angular is a TypeScript-based open-source front-end framework and also component based framework that
makes it easy to build web, mobile and desktop single page application [SPA] for client side

2. TypeScript is a super set of javaScript , which enables  us to use write code on Properly Object oriented
manner. Ultimately Angular compiler converts the TS into Js for browser to manipulate DOM[Document Object
Model]

3.Angular =Google[Module]+Microsoft[TypeScript]
 Note : The first versuion of angular was AngularJS .
 From the 2nd version onwards , Google has introduce TypeScript
 as a primary language of Angular , since then it was known as only Angular.
 Latest version  of Angular was Angular 15.

4.Angular is Node.Js based frontend application .

Mention some advantages of Angular.

Some of the common advantages of Angular are - 

1. MVC architecture - Angular is a full-fledged MVC framework. It provides a firm opinion on how the application
should be structured. It also offers bi-directional data flow and updates the real DOM. 

2. Modules: Angular consists of different design patterns like components, directives, pipes, and services, which help
in the smooth creation of applications.

3. Dependency injection: Components dependent on other components can be easily worked around using this
feature. 

4. Other generic advantages include clean and maintainable code, unit testing, reusable components, data binding,
and excellent responsive experience.

What are Single Page Applications (SPA)?

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then
updates the body content of that single document

A single-page application is a website that loads only a single page. then rewrites the page with new
content fetched from a web server instead of loading a new page for every interaction. It ensures that
no page reloads when the user navigates the website.

What is TypeScript?
TypeScript is a strongly typed superset of JavaScript created by Microsoft that adds optional types, classes,
async/await and many other features, and compiles to plain JavaScript. Angular is written entirely in TypeScript as a
primary language.
  TypeScript is a strongly typed language
 TypeScript is a superset of JavaScript
 It has object oriented features
 Detect error at compile time

difference between AngularJS and Angular

AngularJS Angular
It is based on MVC (Model-View-Controller It is a component based archtecture
design.) architecture
Written in JavaScript. Uses TypeScript to build the application,
only support js support both js and ts
Based on controllers concept This is a component based UI approach
It does not support mobile browsers.  Fully supports mobile platforms
Dependency Injection is not supported Dependency Injection is supported
It does not have CLI tool. It has CLI tool
It is not very fast It is a very fast

What is Angular CLI?

Ans. The Angular CLI is a command-line interface tool that is used to create , initialize, develop Angular
applications directly from a command shell.

What are the features of Angular CLI?

Ans. Angular CLI is a powerful command-line tool by which we can Build and deployment our Angular application,
create new files, update the file and build the angular application ,
Through Angular CLI we can create Component, Module, Class, Pipes, Services, Enums, and many with just single-
line commands.
And using angular CLI we can Testing Angular app, Bootstrapping Angular app

How to change default port number other than 4200?

URL localhost:4200, but we can change it using additional flag along with ng serve which is –port.
ng serve --port 4300

What is a Bootstrapping module?

Bootstrapping is a technique of initializing or starting the Angular application. Angular support automatic and manual
bootstrapping . This application launches by bootstrapping the root AppModule, Every application has at least one
Angular module that is root module .it is commonly know as app.module

What is NPM?
Npm stands for Node Package Manager which makes easy to installation of Javascript framework easily.it is a online
repository from where we can get thousand of free libary which can be used in our angular project
Node_module is the folder where save all the installed package

What is component?
Components are the main building block for Angular applications which hold sub view of
webpage. Components are defined using the @component decorator. A component has a
selector, template, style and other properties. An Angular application typically consists of a root
component, which is the AppComponent, that then branches out into other components
creating a hierarchy. It is used to represent the data visually

Each component consists of:

 An HTML file for the component template.
 A CSS file for the component styles.
 A TypeScript file with a component class that defines behaviour
 A test file for unit testing purpose

(we can paste the component selector name where we want to run. (it can be placed in app.component.html.) we
can placed component tag in multiple time. The whole application is built by using different components.

When we create multiple component under the app component then we have to organise those component only in
app.component.html.(only app-root which is a selector of app component , directly hits only in index.html , others

newly created component only hits the app.component.html )

Component generate:--
ng generate component [name]
OR
ng g c [name]

What is a Selector in Angular?

A selector is used to identify each component uniquely into the component tree, and it also defines how the current
component is represented in the HTML DOM

How many ways we can use component selector ?

1.HTML tag selector :

We can use a selector like an HTML TAG.
@Component({
selector: 'app-element',
template: './element.component.html',
styleUrls: ['./element.component.css']
})

This type of selector can access directly by typing the selector name inside the <> brackets as:

<app-element></app-element>

2.Attribute selector :
 For this we put the selector into square brackets []

@Component({
selector: '[app-element]',
template: './element.component.html',
styleUrls: ['./element.component.css']
})
To access this type of attribute selector we have to put this selector as an attribute inside a div
or any other element as

<div app-element></div>
3.Class selector :
Here we put dot ( . ) at the beginning of the selector.
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css']
})
We can access this type of selector like a normal class access

<div class="app-element"></div>

Practical name :-- COMPONENT-SELECTOR

lifecycle hooks
8 lifecycle hooks:---

i. ngOnChanges: When the value of a data bound property changes, then this method is called.
This method returns the SimpleChanges object, which holds the current and previous data
properties. Called whenever an input value changes. It called the 1 st time before ngOnInit().

ii. ngOnInit: This is called at once at the time of component initialization.

iii. ngDoCheck: it is used instead of a ngOnChanges hook, especially when Angular fails to recognize the changes.
iv. ngAfterContentInit: it is initialized after the Angular finishes the initialization of all content in a directive. This
hook is called only once immediately after the first ngDoCheck hook is called
v. ngAfterContentChecked: This is called after Angular checks the content projected into the component.
vi. ngAfterViewInit: This is called after Angular initializes the component's views and child views
vii. ngAfterViewChecked: This is called after Angular checks the component's views and child views.
viii. ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.
What is the Template Expression
A template expression in Angular is an expression that is represented in double curly braces ‘{{ }}’ and produces a
value. The template expression is executed by Angular and is assigned to a property of a binding target.

App.component.html
<p>Addition : {{ 1 + 1 }}</p>
<p>Subtraction : {{ 25 - 50 }}</p>
<p>Multiplication : {{ 25 * 50 }}</p>
<p>Division : {{ 25 / 50 }}</p>

What are Templates in Angular?

A template is a form of HTML that tells Angular how to render the
component. Angular Templates are written with HTML that contains
Angular-specific elements and attributes. In combination with the model
and controller's information, these templates are further rendered to
provide a dynamic view to the user.

What is decorator?
Angular decorator store metadata about a class , method or property.
Metadata is a data that provides information about other data
And also we can say that Decorators are a design pattern that is used
to separate modification of a class without modifying the original
source code.
All decorator are starting with @ symbol,

Real life example:-- suppose i have a book in there book name,

title,authore name all are metadata but it is not a main content of the
book, similarly . in component decorator selector, templateURl and
styleURL are metadata and @ngmodule decorator
delcalataion ,import,provider,bootstrap all ae metadata

Eviroment Setup:
     1.Node.js
      ->npm[Node Package Manager]
     https://nodejs.org/download/release/v16.14.2/win-x64/node.exe
      Verify installation :
      open CMD
      node --version
      npm  --version
    2.Angualr CLI : Angular command line interface , by which we can create
      project , running angular development server build angular application .
     npm install --save -g @angular/cli
     -g Golably
     verify installation :
     ng v
    3. Creating a new Project in Angular :
      ng new projectName
      ? Would you like to add Angular routing? (y/N)
       chose N then enter
       ? Which stylesheet format would you like to use? (Use arrow keys)
       css
       then enter
      ✔ Packages installed successfully.
      'git' is not recognized as an internal or external command,
      operable program or batch file.
  
    4.Then cd [changedirectory] project name

   
    5.Running this project :
      ng serve
What is ‘package.json’?:--
This is npm configuration file .All thing in our project is stored in package.json file.like project
name,version,script, libraries etc.. Initially, this package. json includes a starter set of packages, Package JSON
contains all your dependencies, meaning all the libraries that you download and use for your project to make your
coding take less time and less effort. this package.json includes a starter set of packages, some of which are required
by Angular and others that support common application
NODE MODULE:-

All package are installed in modules. NPM is the node package manager, which installs packages locally
into a project, specifically, into the node_modules folder.

src folder: This is the folder which contains the main code files related to your angular application.
app folder: The app folder contains the files, you have created for app components.
app.component.css: This file contains the cascading style sheets code for your app component.
app.component.html: This file contains the html file related to app component. This is the template file which is
used by angular to do the data binding.
app.component.spec.ts: This file is a unit testing file related to app component. This file is used along with other unit
tests. It is run from Angular CLI by the command ng test.
app.component.ts: This is the most important typescript file which includes the view logic behind the component.
app.module.ts: This is also a typescript file which includes all the dependencies for the website. This file is used to
define the needed modules to be imported, the components to be declared and the main component to be
bootstrapped.
 ...........................SOME OTHER ADVANCE FOLDER IN ANGULAR.............................

package.json: This is npm configuration file. It includes details about your website's package dependencies along
with details about your own website being a package itself.
package-lock.json : This is an auto-generated and modified file that gets updated whenever npm does an operation
related to node_modules or package.json
angular.json: It is very important configuration file related to your angular application. It defines the structure of
your app and includes any settings associated with your application. Here, you can specify environments on this file
(development, production). This is the file where we add Bootstrap file to work with Angular 7.
.gitignore: This file is related to the source control git.
.editorconfig: This is a simple file which is used to maintain consistency in code editors to organize some basics such
as indentation and whitespaces.
assets folder: This folder is a placeholder for resource files which are used in the application such as images, locales,
translations etc.
environments folder: The environments folder is used to hold the environment configuration constants that help
when building the angular application. The constants are defined in 2 separate .ts files (environment.ts and
environment.prod.ts), where these constants are used within the angular.json file by the Angular CLI. For example, if
you run the ng build command, it will build the application using the development environment settings, whereas
the command ng build ?prod will build the project using the production environment settings.
browserlist: This file is used by autoprefixer that adjusts the CSS to support a list of defined browsers.
favicon.ico: This file specifies a small icon that appears next to the browser tab of a website.
index.html: This is the entry file which holds the high level container for the angular application.
karma.config.js: This file specifies the config file for the Karma Test Runner, Karma has been developed by the
AngularJS team which can run tests for both AngularJS and Angular 2+
main.ts: As defined in angular.json file, this is the main ts file that will first run. This file bootstraps (starts) the
AppModule from app.module.ts , and it can be used to define global configurations.
polyfills.ts: This file is a set of code that can be used to provide compatibility support for older browsers. Angular 7
code is written mainly in ES6+ language specifications which is getting more adopted in front-end development, so
since not all browsers support the full ES6+ specifications, pollyfills can be used to cover whatever feature missing
from a given browser.
styles.css:/ This is a global css file which is used by the angular application.
tests.ts: This is the main test file that the Angular CLI command ng test will use to traverse all the unit tests within
the application and run them.
tsconfig.json: This is a typescript compiler configuration file.
tsconfig.app.json: This is used to override the tsconfig.json file with app specific configurations.
tsconfig.spec.json: This overrides the tsconfig.json file with app specific unit test configurations.

SN JavaScript TypeScript
1. It doesn't support strongly It supports strongly typed or static typing feature.
typed or static typing.
3. JavaScript source file is in ".js" TypeScript source file is in ".ts" extension.
extension.
4. It is directly run on the It is not directly run on the browser.
browser.
5. It is just a scripting language. It supports object-oriented programming concept like classes,
 interfaces, inheritance, generics, etc.
6. It doesn't support optional It supports optional parameters.
parameters.
7. it highlighted the errors at It highlighted errors during the development time.
runtime.
8. JavaScript doesn't support TypeScript gives support for modules.
modules.