Angular version is - 17
, node.js version is 19.7.0
what is angular ?
angular is an one of the front end framework its
has to help to build the interactive and web site and its an single page
application and its used for an client side application angular will be
contains the components its an javascript framework writen in typescript
what is TypeScript ?
typescript is an superset of javascript and it
maintain the reliability its work very fine in any environment
Features of Angular ?
support type script
support web work
interactive UI
SPA
Advantage Of Angular ?
SPA
flexible and structure application,cross
platform,reusable code and testability
what is node.js ?
node js is an back end frame work
what is NPM ?
NPM- Node Package Manager its an online
repository its used to install and maintain the packages its provides
features and functionalities for angular application we can see the libraries
in node_modules in angular application
what is CLI?
CLI - Command Line Interface its used to develop
and initialize the angular application with the help of CLI we can work with
terminal create the component,class,service etc..
what is the Command of creating the Component?
ng g c componentname
what is ng serve command ?
used to build the server locally to execute the
application
how to create the class in angular ?
ng g class classname
how to create the service in angular ?
ng g service servicename
which is used to convert the typescript file to
javascript file ?
TS compiler convert the typescript to javascript
the browser will understand only the javascript fromate only
Angular Data Binding ?
Its an Two way data binding its happen in both
ways send and receiver end if your are changing anything in component it
refeclts in view vice versa if you are changing anything in view it will be
automatically refeclt in component
ngModel -directives make this two way data
binding posible
Output date using String interpolation and
Property binding
Input data using Event Binding
for both ways Two way Binding
Types of Data Binding in angular ?
There two types of data binding in angular
1.one way binding - one way binding its
used in single way like if you are modifying in model it will be refelect in
the view page but if your view you are modifying anything it wont be refeclt in
the model
Example of One way binding is : Angular
interpolation / string interpolation , property binding,Event binding
Angular interpolation / string interpolation :
its an one way binding property and its shows output to model to view we can
use this with in the syntax of {{}} its only work with string not with
number,boolean,etc..
Ex: <li>Name:{{firstName}}</li>
Property Binding : its an one way binding
property and here we are creating the property in dom file its an non-string
data value like boolean
Ex: <input type="email"
[value]="user.email">
Event Binding : its an one way binding and here
the event we are giving like mouse over, onclick,mouse out etc
2.two way binding : here we can interact with
both way sender and receiver end like if you are modifying anything in
component it will be refeclt in view similarly if you are modifying anything in
view it will be refectl in component.its like [(ngModel)] this syntax
ngModel its makes the two way binding
3.Attribute Binding : Attribute binding in
Angular helps you set values for attributes directly,With attribute binding,
you can improve accessibility, style your application dynamically, and manage
multiple CSS classes or styles simultaneously.
Ex:<!-- create and set an aria attribute for
assistive technology -->
<button type="button"
[attr.aria-label]="actionName">{{actionName}} with
Aria</button>
4.Class And Style Binding
Directives in Angular :
Directives are used to change and modify the
appreance of the DOM layout there are 3 types of directive in Angular
1.Component Directive : NgComponentOutlet and
NgTemplateOutlet
2.Structural Directive : there are refers as *
symbol these are use to change and modify the DOM elements
Ex: *ngIf Directive - its simlar to the the if
statement, *ngSwitch Directive - similar to the switch statement
*ngFor Directive - its used to iterating the
purpose
3.Attribute Directive : Its used to change the
look and behaviour of the DOM elements Ngclass,Ngmodel,Ngstyle
Ex: ngClass Directive : its used to add or
remove the CSS elements in HTML
<div
[ngClass]="className">Hello</div>
with this className we can provides the styles
in css file
ngStyle Directive : its used to the styles in
your HTML page
compare to normal html NgStyle its provides an
dynamic style
<div
style="background-color:red">Happy</div>
<div [ngStyle]="{'background-color':'red'}">Hello</div>
What are The Types of Form in Angular ?
Reactive Forms and Template Driven Forms
These both forms are used to get the input from
the view and it should be validate in that
The Reactive forms are more reliable,and its
more scalable,these form are more preferable to use while forms are the key
part of your application we can use that reactive forms
The Template Driven forms are simple forms,its
very easy to use but not scalable like reactive forms,if they need any basic
form we can go for this form
What is SPA ?
SPA - Single page Application Its an new feature
of an angular it's does not load the new HTML page to display the new page
content insted of generate dynamically its works faster
Diffrence Between Angular and Angular JS ?
Angular Js :
language support only Javascript , support
model-view-controller,not supported by mobile browser,difficult to manage in
bigger application,
Not contains CLI tool,its not uses the
dependancy injection
Angular :
language support Javascript and TypeScript,
support component and directives, supports all the mobile browser,easy to
manage in bigger application,it contains CLI tool,its uses the dependancy
injection
Decorators in Angular ?
Decorators are used to store the meta data about
class,method,property
inside the component contains like
selectors,templateUrl,StyleUrl also an meta data
undert the @NgModule also its contains the meta
data like imports,providers,declarions,bootstrap
all decorators are represents with @ symbol
meta data - provides the information about the
other data
There are 4 Types of Decoraters
1.class decorators - @NgModule,@Component
2.property decorators - @Input,@Output
3.method decoraters - @HostListner
4.parameter decorators - @Inject,@Self
What is Component ?
Components are the basic building blocks of the
user interface in angular application
every component associate with template or
directives its contains the root component which means AppComponent
app.component.ts its an base file(important)
What is Module In Angular and What is
app.module.ts file?
Modules is a place we can add
components,directives,pipes,services and related to the application
@NgModule its an decorater its contains the
declaration,imports,bootstrap,providers
How can angular App gets Loaded and sstarted?
what are Index.html,app-root,selector and main.ts file?
index.html->main.ts->app.module.ts->app
component
<app-root> its an root selector and its
only loads first when the application starts
main.ts - is an entry point of web app and its
bootstrap the appmodule
app.module.ts its bootstrap the appcomponent
app-component(or) app-route-component is the
html which you will see finally
what is Bootstraped Module and Bootstraped
Component ?
when the angular application start then the
first module is launched is bootstrap module and bootstrap component
What is Pipes in Angular ?
Pipes are simple functions which accepts an
input values and return a transformed values
There are two types of pipes 1.Build in pipes
and 2.Custom pipes
Build in Pipes :
Uppercase,lowercase,date,percentage,currency,decimal,slice,json
Ex: <h1>{{title | lowercase}}</h1>
<h2>{{title | uppercase}}</h2>
<h2>{{123.87 | currency}}</h2> -
currency pipes (its in dollar)
<h2>{{1234.57 | currency:'INR' }} -
converting as an indian ruppes
Chaining Pipes : its used with multiple pipes
{{dob | date | uppercase}}
Some key features include:
Pipes are defined using the pipe “|” symbol.
Pipes can be chained with other pipes.
Pipes can be provided with arguments by using
the colon (:) sign.
ngModule in Angular ?
Its an module file its has contains the
declarations,imports,providers,and the bootstrap
What is ParentComponet?
A parent component can pass data to its child by
binding the values to the child's component property //AppComponent
Angular Hook Life Cycle ?
A component from creation to destruction goes
through the several stages and these stages are the life cycle hooks
Constructor - its not an part of the hooks life
cycle its always execute before the angular hooks
OnInit its an inteface implemented by the
Component
ngOnChanges() - called when the input property
changes(@Input) we can call multiple times
ngOnInit() - called when the component is
created and its perfroms some initialization tasks
ngDoCheck() - Detect and act upon changes that
Angular can't or won't detect on its own. these contaisn 4 child component
i.ngAfterContentInit() - Responds after Angular
projects external content into the component's view.
ii.ngAfterContentChecked() - Respond after
Angular checks the content projected into the component.
iii.ngAfterViewInit() - Respond after Angular
initializes the component's views and child views.
iv.ngAfterViewChecked() - Respond after Angular
checks the component's views and child views.
ngOnDestroy - Call when the component is
destroyed
What is ngOnInit in angular life cycle hook ?
singlas the activation of component,its an 2
life cycle hooks in angular,its called only once in life cycle hooks,by default
present in the component
Angular 17 New Featurs is ?
Declarative Control mechanisum
Where the Project Exceution will be start in
Angular ?
From main.ts file its starts the execution of
the Programme
When You Create the Component there are 4 files
automatically deploys like html,css,spec.ts,ts
what is Sweet Alert ?
Sweet Alert is a custom dialog library that
replaces JavaScript's "alert" and "prompt" features.
there are 4 tytpes of sweet alerts is there
warning,error,info,sucessfull
What is onInit in angular ?
Its an lifecycle hook deployed after the angular
has initialized all data-bound properties and directives
ngOnInit - its used to add the additional
initialization tasks bussiness logic,invoked only once
ngInit - we can evaluate the expression in the
current scope
constrctor - invoked first before the life cycle
hooks
Types of Dependancy Injection :
1.constructor based injection,2.setter based
injection,3.interface injection
NgModule : its contains the group of
component,directives and pipes so while we are using the ngModule its refers
with @NgModule its has contains the imports,bootstrap,declarations,providers
NgModel : basically it will used in the two way
data binding ngModel is typically used with form controls, such as input
fields, text areas, and select elements. Here's an example of how to use
ngModel with an input field:
<input [(ngModel)]="name"
type="text">
In this example, the ngModel directive is used
to bind the value of the input field to the name property in the component. The
[(ngModel)] syntax is called "banana in a box" syntax and it provides
two-way data binding.
When the user types into the input field, the
name property in the component is updated automatically. Similarly, when the
name property in the component is updated, the value of the input field is
updated automatically.
Diffrence Between FormGroup and Form Controll?
In Angular, FormGroup and FormControl are two
important classes used to create reactive forms.
A FormControl is a single form control element,
such as an input, select, or textarea. It is used to create forms that collect
a single piece of data, such as a user's name, email address, or password.
A FormGroup, on the other hand, is a collection
of FormControls. It is used to create forms that collect multiple pieces of
data, such as a user's name, email address, and password.
To get the validity of a FormGroup, you can use
the valid property. The valid property returns a boolean value indicating
whether the FormGroup is valid. A FormGroup is valid if all of the FormControls
in the FormGroup are valid.
FormGroups and FormControls are powerful tools
that can be used to create complex and dynamic forms in Angular.
Flow Of Angular
Its starts with an main.ts from here to its goes
to the app.module.ts and its goes to the bootstrap has contains the
Observable is used to handle the asynchronus
events and Subscribe
Observable able to handle the multiple data
without subscribe it wont work like Observable its an lazy one it would be an
need of an subscribe
Asynchronous is a non-blocking architecture, so
the execution of one task isn't dependent on another. Tasks can run
simultaneously.
Synchronous is a blocking architecture, so the
execution of each operation depends on completing the one before it.
Subscribe its used to display the message
AOT stands for Ahead-of-Time compilation. It is
a process in Angular where the templates and components of an application are
compiled during the build phase, rather than at runtime. This improves the
performance of the application by reducing the size of the bundle and
optimizing the code.
JIT - Just In Time Compiler its an component of
JVM its convert the Its works on the Runtime and JIT compiler converts byte
code into native machine code
npm install bootstrap and its should added the
CDN in html file
<app root> - The app root in Angular is
the root component of an Angular application. It is the first component that is
called when the application starts. The app root component is responsible for
rendering the entire application, including all of its child components.
Diffrence Between Let,Var,Const
let - its used create the variable which are all
used to access within the block its have an block of scope let variable can be
reassigned
const - Used to create variables that can only
be accessed within a block and remain unchanged. const variables have a block
scope. const variables are constant and cannot be reassigned after
initialization.
var - Used to create variables that can be
accessed throughout a function. var has a functional or global scope.
What is Service ?
A service is an typescript class and reusable
code which can be used in multiple components
service can be implemented with the help of
dependancy injection
create the service use the command like:ng g service
servicename
How to use Dependancy Injector with service in
Angular ?
there are 3 ways
1.we need create the providers(service file) in
@Component
2.pass the parameter inside the
constructor(private logginService:LoginService)
3.using this property to access the service
this.logginService.LogError();
Dependancy Injectors
@Injectable in service.ts
@Injectable({
provideIn:'root'
})
@Injectable decoratpr one service can be used by
another service
we can use this with the help of this our
service will be available in the throught out the application and all the
components
Providers are deployed in first @NgModule
providers and We can use inside the @Injectable here if you are using we can
access throught the application in every component and third one in using
inside the @Component
What is Constructor in Angular?
its an method in typescript class its called
automatically when class in instanatied
constructor run before the angular hook and its
not part of the life cycle hook
used to inject dependencies(service) in
component class
Diffrence Between ngOnInit and Constructor ?
Constructor :
Its not an part of the life cycle hook its
created automatically when the class is being instained
its called before the lifecycle
its injecting the depedencies(service)
ngOnInit :
Its an part of the angular life cycle hook its
called after the ngOnChanges in life cycle hook its signal about the creation
of the component
used to perform in business logics
What is Asynchronous Operations ?
Observable are used to perform the asynchronous
operations and handle the asychronous data
Synchronous - tasks are happen one by one if one
completed its go for the another one task
Asnchronous - tasks are happend simultaneosuly
Diffrence between PROMISES AND OBSERVABLES ?
Promises - once all the data get from the server
its send the data to the client its takes more time in that
Observables - its an streaming the data like
continuous process it not going to wait for the whole data to receive and
Observable aree lazy untill we use the subscribe() method we can cancellable
using the unsubscribe() method
RxJS - its an father of an Observable
What is the Role Of HttpClient in Angular?
its an built in service class available in
angular
@angular/common/http package
performs the Http Requests
What is TypeScript and Advantage ?
Typescript contains types streams,custom
types,enum,interfaces etc but browser can't understand the typescript it only
understand the javascript so the typescript has converted into javascript using
ts compiler
typescript detects the error at the compile time
TypeAnnotation in TS ?
it is used to assign the type to the variable
like
let i :number insted of number if i am giving
anything it will show the compile time error
Data Types in TS ?
Build In Types :
string,number,boolean,void,null,undefined
User Defined Types :
array,enum,classes,interfaces
What is any?
If we declare as any we can assign the any kind
of value to the variable the typechecking has done by the compiler
What is assertion?
its informs the compiler about the type of a
variable
NgForm in Angular ?
NgForm is the directive provided by Angular's
FormsModule that tracks the form and its controls. It can be used in
template-driven forms to get a reference to the form and its controls
Reactive forms, on the other hand, are a way to
programmatically create forms in Angular. They use the FormControl, FormGroup,
and FormBuilder classes to create and manage form controls.
Comparable and Comparator ?
Comparable used for single sorting
its an interafce and its used the method as
compareTo()
Collections.sort(List)
Comparator used for diffrent ways of sorting
its an interface and its used the method as
compare()
Collections.sort(List,comparator)
@ComponentScan its used to scan the package
which are provided and its used register the beans in the spring container
Design patterns its provided the proved
soloutions its have 3 types of design patterns
1.singleton - for every request only one object
is created
2.dependancy injection
3.factors pattern - used for creation of objects
Write SQL Query To Select 2 Highest Salary ?
select *from employee
group by salary
order by salary desc limit 1,1;
scope of bean ?
singleton(stateless) - creates the only one
instances when if you called that one instance will be retured
prototype(stateful) - create the new instances
when its called each times
request - the instances will be created the HTTP
request
session - the instances will be cretaed
the HTTP session
global session - The bean instance will be
created per HTTP global session
JSP is a server-side technology, whereas Servlet
is a small Java class program that runs on the server.
Interceptors is an class that is used to handle
between Http request and the responce from the backend its used for logging and
authentication purpose
Design Pattern - its provides the proved
solution for that problem
singleton,dependancy injection,factory pattern
Singleton type its provide single object
bean scope - singleton,prototype,session,global
session
class loader - bootstrap,extension,system
#ridestartson=ngModel: This creates a template
reference variable called ridestartson that is bound to the ngModel two way
binding.
form-group,form-label,form-controls - bootstrap
css class
What is HAVING In SQL ?
Having its comes with aggregate function with folows of an group by and its like an similar to the where
view in SQL- its like an virtual table its contains
data from one or more table view name its should be unique in database the view
is a result of sql query
@RunWith - @RunWith is a JUnit annotation.
It is used to tell JUnit to run the test using a specific "runner"
class instead of its default runner
<router-outlet></router-outlet> is a
placeholder in Angular that is dynamically filled based on the current router
state It is a directive that is available from the router library
<div class="container
mt-4"> - bootstrap class and the mt means margin top 4 units
REST TEMPLATE - used to make API calls and its
used to make a restful web services basically rest template has contains HTTP
request like get,put,post,delete,update
JSP - Java Server Page its used to create the
dynamic web pages
servelet - its an java programme its works with the
web server actually its handle the request and its processed the request and
its returns the responce to the web server
Spring IOC - Invertion of Controll its provides
the responsibility to create the Object for bean to container and its manages
the lifecycle of the bean there are two types of IOC bean factory and
application context
Beanfactory,application context these both are
interface acts as an spring ioc container the application context built in top
of the bean factory
Two ways we can inject dependancy in spring
1.constructor and 2.setter
diffrence between setter injection vs constrctor
injection ?
Constrctor Injection - used for many
properties,not over rides the setter injection ,create the new instances if any
modification has done means
setter Injection - used for few properties,over
rides the constrctor injection , not create the new instances if any
modificaton done means
Spring AOP is an Aspect-oriented programming
(AOP) framework that is part of the Spring Framework. AOP is a programming
paradigm that allows developers to modularize cross-cutting concerns, such as
logging, security, and transaction management
Routerlink active - lets you add a CSS class to
an element when the link's route becomes active
nav-link and routerLink - these are used for
navigation and styling purpose
app-navbar: This class is likely a custom class
that is used to customize the navbar further.
router-outlet - basically used for routing
purpose if the component its matches with the routing rules its will be help to
to navigate when the user selects specific route
@Input and @Output - @Input decortaor used to
share the data to the Parent to child and @Output decorator used to share the data
to child to parent