Mastering Angular : Practical Guide
1. Mastering Angular with knowledge of Angular 17,18 new features
===============================================================
1.1 Create Component and setup simple routing
1.2 Create multiple components and setup modules
1.3 Setup lazy loading module based routing
1.4 Data Binding : Show value of variable in HTML, set image url from Variable in HTML, Show alert on button click, Give input box and show input text below input box
1.5 Show static array data in html, hide some data based on condition
1.6 Set dynamic styles, dynamically and conditionally add class to the html
1.7 Angular 18 control flow watch video and practice @if, @for etc
1.8 Create custom pipe to divide the value by two, use inbuilt pipe to format capital letters
1.9 Create Template Form : Name, Dropdown, Submit button. Include validations : Name required, Name should be string, console complete form object
1.10 Create Reactive Form : Name, Dropdown, Submit button. Include validations : Name required, Name should be string, console complete form object
1.11 Reactive Form : Use Form Arry and Form Control Create nested form and console whole object (Check reference 3)
1.12 Create api call to public api using HTTP Client (Check reference 4)
1.13 Create POST API using HTTP Client (Check reference 4)
1.14 Call PUT, Delete API using HTTP Client (Check reference 4)
1.15 Setup input file and Send FormData through post request in payload
1.16 Setup HTTP Intercepter to add automatic token in all api requests
1.17 Create service and return data through service doing api call from it
1.18 Lifecycle Hooks : Practicals on OnInit, OnChanges, AfterViewInit, and OnDestroy (Check reference 6)
1.19 Create Child Component for Navbar and show navbar throughout all the components
1.20 Create guard to prevent access for certain pages
1.21 Using subject and behaviour subject change tax in the navbar
1.22 Based on navbar text change, trigger change detection in one of the component to show alert (Check reference 7)
1.23 Learn signals (Reference 8)
1.24 Redirect to another page on button click
1.25 Using textbox, show textbox input value to the navbar with @input @output
1.26 Emit Event from navbar button to console log from one of the other components
1.27 Create Common Form Error wrapper for input fields
1.28 Implement common error popup to be used in all components
1.29 Watch Rxjs tutorial and practice along side (Reference 9)
1.30 Project : Create Amazon Clone
— Login Page
— Signup Page
— Navbar
— Homepage : Show offers
— Navbar Search and Sidebar with filters
— Cart Implementation
1.31 Read five websites interview questions for angular and add more points in learning angular
References :
1. https://www.youtube.com/playlist?list=PL7JmcZV0UQtUxsHS8dF3EINHdoIvRS6Ft
2. https://v17.angular.io/guide/forms (Template Driven Form)
3. { name : “”, hobbies : [ { name : “” }]} and { name : “”, hobbies : [ { name : “”, locations : [ addresspoint : “” ] }]}
4. Call this apis : https://restful-api.dev/
5. Life Cycle Hooks : https://v17.angular.io/guide/lifecycle-hooks
6. Life Cycle Practicals : https://chatgpt.com/share/091b58e2-d600-447e-9634-d6d499f717ba
7. Change Detection : https://youtu.be/IZgQgSaaoHY?si=Tf3XazM2h7pgEjQe
8. Signal : https://youtu.be/itp9dH_qLkw?si=tB_uiKY3Hb8LxKqp
9. RxJs : https://www.youtube.com/playlist?list=PL55RiY5tL51pHpagYcrN9ubNLVXF8rGVi