{"id":15151780,"url":"https://github.com/shabdkumar/angular-thecompleteguide_2023-edition","last_synced_at":"2026-01-19T09:04:24.774Z","repository":{"id":177524454,"uuid":"660288684","full_name":"ShabdKumar/Angular-TheCompleteGuide_2023-Edition","owner":"ShabdKumar","description":"Master Angular (formerly \"Angular 2\") and build awesome, reactive web apps with the successor of Angular.js","archived":false,"fork":false,"pushed_at":"2024-06-20T10:40:56.000Z","size":487,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T13:18:29.368Z","etag":null,"topics":["angular","angular-material","angular2","angularcomponent","bootstrap","bootstrap3","css","css3","html","html-css","html5","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/ShabdKumar.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-29T16:58:34.000Z","updated_at":"2024-06-20T10:40:59.000Z","dependencies_parsed_at":"2024-06-21T00:24:04.943Z","dependency_job_id":null,"html_url":"https://github.com/ShabdKumar/Angular-TheCompleteGuide_2023-Edition","commit_stats":{"total_commits":57,"total_committers":1,"mean_commits":57.0,"dds":0.0,"last_synced_commit":"8b3d64d426b4fcdb5195888f57901f3ac0e1a043"},"previous_names":["shabdkumar/angular-thecompleteguide_2023-edition"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShabdKumar%2FAngular-TheCompleteGuide_2023-Edition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShabdKumar%2FAngular-TheCompleteGuide_2023-Edition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShabdKumar%2FAngular-TheCompleteGuide_2023-Edition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShabdKumar%2FAngular-TheCompleteGuide_2023-Edition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShabdKumar","download_url":"https://codeload.github.com/ShabdKumar/Angular-TheCompleteGuide_2023-Edition/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247639456,"owners_count":20971541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","angular-material","angular2","angularcomponent","bootstrap","bootstrap3","css","css3","html","html-css","html5","typescript"],"created_at":"2024-09-26T15:21:42.901Z","updated_at":"2026-01-19T09:04:24.747Z","avatar_url":"https://github.com/ShabdKumar.png","language":"TypeScript","readme":"# Angular-TheCompleteGuide_2023-Edition\n\nMaster Angular (formerly \"Angular 2\") and build awesome, reactive web apps with the successor of Angular.js\n\n## Angular Setup:\n\n- Go to https://nodejs.org/en and download the latest version, make sure that you have the LTS version of NodeJS installed, NOT the latest version.\n\n- Run `[sudo] npm install -g npm` (sudo is only required on Mac/ Linux).\n\n* `[sudo] npm install -g @angular/cli`\n\n## Creation of New Project:\n\n- `ng new project_name --no-strict`\n\n* Go inside your repository: `cd project_name`\n\n* For continous running your project in background: `ng serve`\n\n**_Here are some common issues \u0026 solutions:_**\n\n- Creation of a new project takes forever (longer than 3 minutes). That happens on Windows from time to time =\u003e Try running the command line as administrator.\n- You get an EADDR error (Address already in use). You might already have another ng serve process running - make sure to quit that or use `ng serve --port ANOTHERPORT` to serve your project on a new port.\n- My changes are not reflected in the browser (App is not compiling). Check if the window running `ng serve` displays an error. If that's not the case, make sure you're using the latest CLI version and try restarting your CLI.\n\n### Bootstrap styling in project:\n\n`npm install --save bootstrap@3`\n\nUpdate style in angular.json file:\n\n```json\n\"styles\": [\n    \"node_modules/bootstrap/dist/css/bootstrap.min.css\",\n    \"src/styles.css\"\n],\n```\n\n## Component Creation:\n\n`ng generate component component_name` --skip-tests\n\nor `ng g c component_name` --skip-tests\n\n**Note:** `--skip-tests` will not generate test file i.e. spec.ts file.\n\n### Two-Way-Databinding:\n\nFor Two-Way-Binding to work, you need to enable the `ngModel` directive. This is done by adding the `FormsModule` to the `imports[]` array in the AppModule.\n\nYou then also need to add the import from `@angular/forms` in the `app.module.ts` file:\n\n```ts\nimport { FormsModule } from '@angular/forms';\n```\n\n## Directive Creation:\n\n`ng generate directive directive_name` --skip-tests\n\nor `ng g d directive_name` --skip-tests\n\n### Dropdown Directives:\n\nIf you want that a dropdown can also be closed by a click anywhere outside (which also means that a click on one dropdown closes any other one, btw.), replace the code of `dropdown.directive.ts`\n\n```ts\nimport {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';\n@Directive({\n  selector: '[appDropdown]'\n})\nexport class DropdownDirective {\n  @HostBinding('class.open') isOpen = false;\n  @HostListener('document:click', ['$event']) toggleOpen(event: Event) {\n    this.isOpen = this.elRef.nativeElement.contains(event.target) ? !this.isOpen : false;\n  }\n  constructor(private elRef: ElementRef) {}\n}\n```\n\n## Services in Angular 6+\n\nIf you're using Angular 6+, you can provide application-wide services in a different way.\n\nInstead of adding a service class to the `providers[]` array in `AppModule` , you can set the following config in `@Injectable()` :\n\n```ts\n@Injectable({providedIn: 'root'})\nexport class MyService { ... }\n```\n\nThis is exactly the same as:\n\n```ts\nexport class MyService { ... }\n```\n```ts\nimport { MyService } from './path/to/my.service';\n@NgModule({\n    ...\n    providers: [MyService]\n})\nexport class AppModule { ... }\n```\nUsing this new syntax is **completely optional**, the traditional syntax (using `providers[]` ) will still work. The \"new syntax\" does offer one advantage though: Services **can be loaded lazily** by Angular (behind the scenes) and redundant code can be removed automatically. This can lead to a better performance and loading speed - though this really only kicks in for bigger services and apps in general.\n\n## Redirection Path Matching\n\nBy default, Angular matches paths by prefix. That means, that the following route will match both `/recipes` and just `/`\n\n```ts\n{ path: '', redirectTo: '/somewhere-else' }\n```\n\nActually, Angular will give you an error here, because that's a common gotcha: This route will now **ALWAYS** redirect you! Why?\n\nSince the default matching strategy is `\"prefix\"` , Angular checks if the path you entered in the URL does **start with the path** specified in the route. Of course every path starts with `''` (Important: That's no whitespace, it's simply \"nothing\").\n\nTo fix this behavior, you need to change the matching strategy to `\"full\"` :\n\n```ts\n{ path: '', redirectTo: '/somewhere-else', pathMatch: 'full' }\n```\nNow, you only get redirected, if the full path is `''` .\n\n## Observables: Install RxJS\n\nIn order to follow along smoothly with the course examples, make sure you install RxJS by running\n\n`npm install --save rxjs@latest`\n\nOfficial Docs: https://rxjs-dev.firebaseapp.com/\n\nRxJS Series: https://academind.com/learn/javascript/understanding-rxjs/\n\nUpdating to RxJS 6: https://academind.com/learn/javascript/rxjs-6-what-changed/\n\n## Built-in Validators \u0026 Using HTML5 Validation:\n\nWhich Validators do ship with Angular? \n\nCheck out the Validators class: https://angular.io/api/forms/Validators - these are all built-in validators, though that are the methods which actually get executed (and which you later can add when using the reactive approach).\n\nFor the template-driven approach, you need the directives. You can find out their names, by searching for \"validator\" in the official docs: https://angular.io/api?type=directive - everything marked with \"D\" is a directive and can be added to your template.\n\nAdditionally, you might also want to enable HTML5 validation (by default, Angular disables it). You can do so by adding the `ngNativeValidate`  to a control in your template.\n\n## HTTP Requests:\n\n**Building a restAPI:**- https://academind.com/tutorials/building-a-restful-api-with-nodejs\n\n**Securing JS Code:**- https://academind.com/tutorials/hide-javascript-code","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshabdkumar%2Fangular-thecompleteguide_2023-edition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshabdkumar%2Fangular-thecompleteguide_2023-edition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshabdkumar%2Fangular-thecompleteguide_2023-edition/lists"}