Angular 14

NIHIRA TECHIEES
Angular 14
Complete Tutorial
Introduction
• Angular is a typescript based framework used to

create single page web application
• Angular is open source no cost involved
• It’s maintained by Google also having long term
support
• Latest Version 14 (2nd June 2022)
• Initially start’s from Angular Js .Angular 2 onwards
they changed name in to framework
Advantage
• Cross platform support

• Improved speed & performance
• Faster Development process
• Supports for unit testing
• Light weight application
• We can use bootstrap & Material UI for better UI
System requirements
• Operating system we can use Windows , MAC or

LINUX
• Node.js latest version 16.15
• Install angular CLI
npm install -g @angular/cli
• UnInstall angular CLI
npm uninstall -g @angular/cli
• Installing specific version of angular CLI
npm install -g @angular/cli@12
Angular CLI
• The Angular CLI is a command-line interface tool that

you use to initialize, develop, scaffold, and maintain
Angular applications directly from a command shell.
• Create First app
ng new <application name>
• Get all available commands
ng help
Components
• Basic Components
ng g c name
• Components Inline style
ng g c name –inline-style
• Components Inline Template
ng g c name –inline-template
• Stand Alone Component
ng g c name –standalone
Routing
• Basic Routing
1, Routes – this is the place for mapping path & component
2, routerLink – this is directive for navigate different routes
3, router-outlet– this is place for display the matched route
• Child routing (Group Routing)
• Module Routing
• Lazy Loading
• Redirect 404 page if route not found
• Get Route Values
Bindings
• Interpolation(data binding) – {{}}

• Event Binding - ()
• Property Binding []
• Two Way binding – [()]
• Style Binding
Directive
Directives are classes that add additional behavior to

elements in your Angular applications
• Components
• Attribute Directive
1, NgClass
2, NgStyle
3, NgModel
• Structural Directive
ngIf ,ngFor,ngSwitch
Topics
• Configuration Installation
• Create First application
• Folder Structure
• CLI Commands
• Modal
• Components
• Routing
• Lazy Loading
• Interpolation
• Pipes
Topics
• Two way binding

• Property & Style Binding
• Event Handling
• Directives
• Services
• Data transfer b/w components
• Angular / Route Guard
• Consume External API
• Interceptor
Topics
• Forms in Angular
• Material UI
• Template Driven forms
• Reactive forms
• RXjs
• State management
• Notifications using alertify js
• Unit Testing
Implement Authentication
• Create Login & Signup screen with functions

• Activate/Deactivate user by admin user
• User CRUD Operations
• Implement role based authentication & dynamic
menu generations
• Implement Refresh Token Logic
• New Features in Angular 14
• Interview Questions
New Features in Angular 14
• Standalone component
• Typed Forms
• Streamlined page title accessibility (TitleStrategy)
• Extended developer diagnostics (ng completion)
• Bind to protected component members
• Optional injectors in Embedded Views
• NgModel OnPush
Standalone component
• Standalone component has the flag “standalone” we

need to set value true
• Not required to included in ngModule
• We can import required modules in the component it
self
• Create component using below command
ng g c <component name> --standalone
Typed Forms
• This feature is only for Reactive forms

• For using this feature tsconfig.js should be strict mode
• Typed forms ensure that the values inside of form
controls, groups, and arrays are type safe across the
entire API surface.
• This enables safer forms,
• especially for deeply nested complex cases.
• If you want use older version you can use untyped one
Topic Links
• Angular Authentication – Playlist https://

www.youtube.com/playlist?list=PLfyWdpsiUiPD7kYHujLg3Vl6GV69yQPgD
• RXJS – Playlist
https://www.youtube.com/playlist?list=PLfyWdpsiUiPDuxyDGqAoq0l_T6NlRZq6C
• .NET Core API – Video

https://www.youtube.com/watch?v=uWhbcR06VcA
• Angular Data Transfer b/w components

https://www.youtube.com/watch?v=03FqsZ_XJEc
Topic Links
• Angular Unit testing
https://www.youtube.com/watch?v=dH8BSEGpaOY
• Angular State Management

https://www.youtube.com/watch?v=gjXjKS7KZ4c
https://www.youtube.com/watch?v=x36cNpk7Vjw
• Angular Complete tutorial – Playlist

https://www.youtube.com/playlist?list=PLfyWdpsiUiPAcHftMr_R0HwSyAVHCW5cR
• .NET Core 6.0 playlist

https://www.youtube.com/playlist?list=PLfyWdpsiUiPAuKWtjHUIyi-3K_NUW3MM4
QA
https://www.youtube.com/watch?v=8HaLNtAWB6M
NIHIRA TECHIEES
THANKS FOR WATCHING

Angular 14

Uploaded by

Copyright:

Available Formats

Angular 14

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular 14

Uploaded by

Copyright:

Available Formats

NIHIRA TECHIEES

• Angular is a typescript based framework used to

• Cross platform support

• Operating system we can use Windows , MAC or

• The Angular CLI is a command-line interface tool that

• Interpolation(data binding) – {{}}

Directives are classes that add additional behavior to

• Two way binding

• Create Login & Signup screen with functions

• Standalone component has the flag “standalone” we

• This feature is only for Reactive forms

• Angular Authentication – Playlist https://

• .NET Core API – Video

• Angular Data Transfer b/w components

• Angular State Management

• Angular Complete tutorial – Playlist

• .NET Core 6.0 playlist

You might also like