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
