{"id":21585612,"url":"https://github.com/iamkanishka/angular-featuers-exploration-part2","last_synced_at":"2026-04-19T14:32:28.759Z","repository":{"id":50657804,"uuid":"479472035","full_name":"iamkanishka/Angular-Featuers-Exploration-Part2","owner":"iamkanishka","description":"Angular-Routing-Featuers","archived":false,"fork":false,"pushed_at":"2022-08-17T18:00:45.000Z","size":337,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-04T10:07:24.024Z","etag":null,"topics":["angular","javascript","rxjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamkanishka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-08T16:56:50.000Z","updated_at":"2022-08-17T17:55:14.000Z","dependencies_parsed_at":"2022-08-12T22:00:30.026Z","dependency_job_id":null,"html_url":"https://github.com/iamkanishka/Angular-Featuers-Exploration-Part2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/iamkanishka/Angular-Featuers-Exploration-Part2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-Featuers-Exploration-Part2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-Featuers-Exploration-Part2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-Featuers-Exploration-Part2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-Featuers-Exploration-Part2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamkanishka","download_url":"https://codeload.github.com/iamkanishka/Angular-Featuers-Exploration-Part2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-Featuers-Exploration-Part2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32009845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","javascript","rxjs","typescript"],"created_at":"2024-11-24T15:11:19.097Z","updated_at":"2026-04-19T14:32:28.742Z","avatar_url":"https://github.com/iamkanishka.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angularfeatures\n\n\u003cp align=\"center\"\u003e\n\u003ca  target=\"blank\"\u003e\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/2048px-Angular_full_color_logo.svg.png\" width=\"320\" alt=\"Coder Logo\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAngular is a development platform, built on TypeScript. As a platform, Angular includes:\n\nA component-based framework for building scalable web applications\nA collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more\nA suite of developer tools to help you develop, build, test, and update your code\n\nNote: AngularJS is the verion 1 of Angular, Angular with Above Version 1 is Just Angular\n\nThe Angular Features can be Categorized : - CROSS PLATFORM, SPEED AND PERFORMANCE, PRODUCTIVITY, FULL DEVELOPMENT STORY \n\n1. Progressive Web Apps\nUse modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation.\n\n2. Native\nBuild native mobile apps with strategies from Cordova, Ionic, or NativeScript.\n\n3. Desktop\nCreate desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.\n \n\n4. Code Generation\nAngular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.\n\n5. Universal\nServe the first view of your application on Node.js®, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.\n\n6. Code Splitting\nAngular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.\n\n\n7. Templates\nQuickly create UI views with simple and powerful template syntax.\n\n8. Angular CLI\nCommand line tools: start building fast, add components and tests, then instantly deploy.\n    1.  `ng g c \u003ccomponent_name\u003e` Command for Creating Component\n    2.  `ng g d \u003cdirective_name\u003e` Command for Creating Directive\n    3.  `ng g s \u003cservice_name\u003e` Command for Creating Service\n    4.  `ng g g \u003cguard_name\u003e` Command for Creating Guard\n    5.  `ng g r \u003cresolver_name\u003e` Command for Creating Resolver\n    6.  `ng g p \u003cPipe_name\u003e` Command for Creating Pipe\n\n\n9. IDEs\nGet intelligent code completion, instant errors, and other feedback in popular editors and IDEs.\n\n\n10. Testing\nWith Karma for unit tests, you can know if you've broken things every time you save.\n\n11. Animation\nCreate high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.\n\n12. Accessibility\nCreate accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.\n\nSo We will be Looking These Angular-Routing  features and Learn as we go on.\n\n1. Introduction to Angular Routing Setup and Load routes with Router Module in Angular.\n2. Navigating Links in the Page using  RouterLink in the angular.   \n3. navigate Between Pages using router programmatically in Typescript. \n4. Passing and Fetching Parameter to Routes using ActivatedRoute snapshot in Angular.\n5. Fetch Route Parameters Reactively using Params Subscrible with Activated Route in Angular.\n6. Passing Query Parameters and Fragments to the URL Route with the template and Program in Angular.\n7. Retrieving Query Parameters and Fragments from the URL through typescript code in Angular.\n8. Setting up the Child Or Nested Roues using Childeren Key in routing module in the Angular.\n9. Preserve or merge the query Parameter by forwording with querypramshandling in Angular.\n10. Implement Custom 404 Page adding WildCard Route, redirect to option in the angular routing Module.\n11. Separate all the Routing Configuration Code into the another file app-routing.module in the Angular.\n12. Introduction to Routing Guards. Implementation of canActivate Route Guard in the angular.\n13. Implementation canActictivate Route Guard for the Nested Child Routes in the Angular.\n14. Controlling Naviagtion with CanDeactivate Route Guard in the angular.\n15. Implementing canDeactivate Route Guard in the real-time scenario for the component.\n16. Passsing Static Data to teh Route and Also Access the Static Data in the TypeScript.\n17. Get Dynamic Data Before entering inti the component using the resolve Guard in the Angular.\n18. How to Use Hash URLs as Fragments in the URL for the internal pages in the Angular routing.\n\n\nContinuing with Angular RXJS Observables\n1. Understand the core of the Observable in rxjs, Need to subscribe and Unsubscribe in the angular.\n2. Catch Errors and Complete in rxjs custom Observable using observer.error and complete in angular.\n3. Understand rxjs Operators in the observalbes before sending to the subscribe data in angular.\n4. Apply multiple operators in teh rxjs Observables, know more about the operators in rxjs angular.  \n5. UnderStand the subjects in th erxjs angular. Implement the Subject for cross-componenet communication.\n\n\nContinuing with Angular Forms(Template Driven and Reactive ) \n\nTemplate Driven Form\n1. Template Driven Forms in Angular, get NgForm Object from the template to code in Angular.\n2. Advantages of Using ViewChild in the Template Driven Form to get Form Object in angular.\n3. Explore the Form Object in the Template driven Forms in teh Angular.\n4. Validations for the Template Droven Forms. Show Validation Messages for the From in Angular.\n5. Using ngModel for Two Way and one way Binding to Populate Data in template Driven Forms.\n6. NgModelGroup - Grouping the From Controls in template Driven Forms using ngModelGroup in angular.\n7. setValue and patch Value for Populating Form Elements in the Template Driven form in Angular.\n8. Get and Reset the form Data Controlls in the template Driven Forms in the Angular.\n\nReactive Form\n1. Introduction to reactive Forms Approach. Create FormGroup and FormContreol with code in Angular.\n2. Attach the HTML File using the FormGroup with FormControlName using Reactive Forms in Angular.\n3. Apply Validations for Reactive Forms and Also show messages in teh HTML Template.\n4. Grouping the contrls in the Reactive Forms using FormGroupName.\n\n\nPipes\n1. Pipes in Angular, Chaining Multiple Pipes, parameterized Pipes in the Angular.\n2. Create a Custom Pipe and pass Parameters to the Pipe in Angular using Transaform method.\n3. Creating  Filter Pipe in teh Angular, Filter the list of Data with Search String in Angular.\n4. Pure and Impure Pipes, Differences Betwen the pure pipe and impure pipe in the Angular.\n\nHTTP Request\n1. Introduction to Http Requests, Make a Http Post Request Call through HttpClientModule -  Angular..\n2. Make Get Requests and use RXjs Operators to transform the respiosne in the Angular.\n3. Define the Tyoes of HttpClient Requests data using in the interface and Generic Tyoes in the Angular.\n4. Using Service for the Http request with HttpClient. Communicates Services and Componenets in Angular.\n5. Implement HTTP Delete rtequest with HttpClient in Angular.\n6. Error Handling in teh Http Request Calls with HTTPClinet - Angular.\n7. Sending HTTP Headers in the API Request Call with HTTPClinet in The Angular.\n8. Adding Query Params for the URl using HttpParams Object in HttpClient - Angular.\n9. Observe different types of response in HttpClinet and Chnaging the response Body Type.\n10. Introducing HTTP Interceptors using HTTP_INTERCEPTORS in Angular.\n11. Manipulating Request Objects, headers with Interceptors in the angular.\n12. Accessing Http Response Event Object with Response Interceptor in the Angular.\n13. Adding Multiple Interceptors for the Http Request. interceptors executing order in Angular.\n14. Authentication - Design the auth (Login) page in te angular.\n15. Apply reactiveForm and implememnt validation for the Authentication.\n16. Authentication - Perform Signup Request and get the token and expires as Response -  Angular.\n17. Authentication - Add Loading Spinner and error Message in the Signup Request Form - Angular.\n18. Authentication -  Improve Error Messages with catchError and throwErro rxjs operators.\n19. Authentication - Send the login request and use Observable for the HTTP in the angular.\n20. Authetication - Improve Error handling for the Login Form in the Angular.\n21. Authentication - Create and Store the User Token Data in the angular.\n22. Authentication - Update the UI with Auth Token Data using the Subject in the Angular.\n22. Authentication - Send Auth Token to the outgoing HTTP Requests with behavior Subject - Angular.\n23. Authentication - Add the Auth Token as paramerter using interceptors - Angular\n24. Authentication - Adding the Logout functionality by removing the authtoken in angular.\n25. Authentication - Saving Token in LocalStorage for the autologin feature - Angular.\n26. Authentication - Auto Logout the user when the token expired - Angular.\n27. Authentication - Proetcting the routes with canActivate Guard using UrlTree\n\nExtra Features\n1. Create Alert Modal Components to show the Errors om the Angular\n2. Create Component Dynamically usinh ComponentFactory resolver and ViewContainerRef in Angular\n3. Create Component using ViewContainerRef and Deprecation of entry components from angular 9\n4. Access the component Properties and methods with ComponentRef instance in Angular\n5. What are Modules. Module Introduction. Analyzing the AppModule in Angular.\n6. Creating the Feature Module by Splitting the components in the angular.\n7. Difference Between the Common Module and BrowserModule along with Feature Module in the Angular. \n8. Adding Routes to the Feature Module. forChild, forRoot differrnces in Router Module.\n9. Add More Feature modules for the Project in the angular.\n10. Create Shared Modules. Difference Between Deature Module and Shared Module in angular.\n11. Understand Core Module, Move all Services, interceptors from appModule to CoreModule -  Angular.\n12. Implement lazy-Loading for Modules in the Angular to increase the performance of the project.\n13. Loading Service Differently for instances in the lazy Loaded Modules and app Modules - Angular.\n14. Just In Time Compiler(JIT) and Ahead of Time Compiler(AOT) for Production in Angular.\n\nCompleting basic and Slightly Advanced Angular Concepts. continuing with More Advanced Features. \n\n\n# Follow the Below Steps\n\nNote:- Before Starting with this Project, Please make sure you have installed latest stabled version of [Nodejs](https://nodejs.org/en/) Application in your System \n\nFor Installation of Angular CLI and Running the Angular Application Please run the below Commands in you System \n## Installing Angular CLI\n\n\nInstall the CLI using the npm package manager:  `npm install -g @angular/cli`\n\n## Create Angular Project\nTo create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands: `ng new my-first-project`\n\n## Development server\n\nTo Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamkanishka%2Fangular-featuers-exploration-part2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamkanishka%2Fangular-featuers-exploration-part2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamkanishka%2Fangular-featuers-exploration-part2/lists"}