Angular 14.pptx

gf hdgf

1. NIHIRA TECHIEES Angular 14 Complete Tutorial

2. 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 (2 nd June 2022) Initially start’s from Angular Js .Angular 2 onwards they changed name in to framework

3. 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

4. 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

5. 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

6. 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

7. 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

8. Bindings Interpolation(data binding) – {{}} Event Binding - () Property Binding [] Two Way binding – [()] Style Binding

9. 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

10. Topics Configuration Installation Create First application Folder Structure CLI Commands Modal Components Routing Lazy Loading Interpolation Pipes

11. Topics Two way binding Property & Style Binding Event Handling Directives Services Data transfer b/w components Angular / Route Guard Consume External API Interceptor

12. Topics Forms in Angular Material UI Template Driven forms Reactive forms RXjs State management Notifications using alertify js Unit Testing

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. NIHIRA TECHIEES THANKS FOR WATCHING