{"id":20531931,"url":"https://github.com/mohamed-ali-agourram/angular-18-tutorial","last_synced_at":"2026-04-21T04:32:57.125Z","repository":{"id":258760097,"uuid":"875372083","full_name":"mohamed-ali-agourram/angular-18-tutorial","owner":"mohamed-ali-agourram","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-20T19:05:47.000Z","size":163,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T02:46:47.544Z","etag":null,"topics":["angular"],"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/mohamed-ali-agourram.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":"2024-10-19T19:48:32.000Z","updated_at":"2024-10-20T19:05:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"4dc79936-dcad-487f-9002-8459b7b1ec25","html_url":"https://github.com/mohamed-ali-agourram/angular-18-tutorial","commit_stats":null,"previous_names":["mohamed-ali-agourram/angular-18-tutorial"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mohamed-ali-agourram/angular-18-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-ali-agourram%2Fangular-18-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-ali-agourram%2Fangular-18-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-ali-agourram%2Fangular-18-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-ali-agourram%2Fangular-18-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohamed-ali-agourram","download_url":"https://codeload.github.com/mohamed-ali-agourram/angular-18-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-ali-agourram%2Fangular-18-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32076972,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T02:38:07.213Z","status":"ssl_error","status_checked_at":"2026-04-21T02:38:06.559Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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"],"created_at":"2024-11-16T00:11:05.222Z","updated_at":"2026-04-21T04:32:57.095Z","avatar_url":"https://github.com/mohamed-ali-agourram.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 18\n\n## 1. Installation  \nTo install Angular CLI globally, use the following command:  \n\n``` Bash\nnpm install -g @angular/cli@18\n```\nVerify the installation:  \n\n``` Bash\nng version\n```\n---\n\n## 2. Creating a New Project  \nTo create a new Angular project with standalone components:  \n\n``` Bash\nng new my-angular-app --standalone\n```\nNavigate to the project directory:  \n\n``` Bash\ncd my-angular-app\n```\nServe the application locally:  \n\n``` Bash\nng serve\n```\nOpen your browser and visit `http://localhost:4200` to see your application.\n\n---\n\n## 3. Common Angular CLI Commands  \n\n### Start the Development Server  \n``` Bash\nng serve\n```\n### Generate a Component  \n``` Bash\nng generate component component-name\n# or\nng g c component-name\n# skip styles / test / html\nng generate component component-name --style none --skip-tests --inline-template\n```\n### Add a Service  \n``` Bash\nng generate service service-name\n```\n### Build the Project for Production  \n``` Bash\nng build --prod\n```\n### Update Angular Dependencies  \n``` Bash\nng update @angular/core @angular/cli\n```\n---\n\n## 4. Project Structure Overview  \n``` bash\n.\n├── node_modules/\n├── README.md\n├── angular.json                 # Angular CLI's main configuration file. Defines build options, server configs,\n│                               # asset handling, etc. Controls app behavior during dev and prod builds.\n├── src/\n│   ├── app/\n│   │   ├── app.component.css   # Component-specific CSS for the root component\n│   │   ├── app.component.html  # HTML template defining the root component's structure\n│   │   ├── app.component.spec.ts # Unit test file for the root component\n│   │   ├── app.component.ts    # Root component logic, manages app's core state and behavior\n│   │   ├── app.config.ts       # App configuration settings (feature flags, environment variables)\n│   │   └── app.routes.ts       # App routing configuration for navigation\n│   ├── index.html              # Entry HTML file that loads the Angular app\n│   ├── main.ts                 # Main entry point for bootstrapping the Angular application\n│   └── styles.css              # Global styles for the entire application\n├── tsconfig.app.json           # TypeScript configuration for the app (excluding tests)\n├── tsconfig.json               # General TypeScript configuration\n└── tsconfig.spec.json          # TypeScript configuration for unit tests\n```\n## APIS ARE USED FROM\n\n[freeapis.miniprojectideas](https://freeapi.miniprojectideas.com/index.html)\n\n### Data Binding in Angular\n\nIn Angular, the way of binding data using the NgModule system is referred to as **data binding**. It can be categorized as follows:\n\n- **Data Binding**: The general term for the communication between the component and the view (template).\n  \n- **One-Way Data Binding**: This includes both interpolation and property binding, where data flows in one direction (from the component to the view).\n  \n- **Two-Way Data Binding**: This allows for data to flow in both directions (between the component and the view).\n\n#### Types of Data Binding\n\n1. **Interpolation**: \n   - A one-way data binding technique that allows you to display component properties in the template using the syntax `{{ }}`.\n\n2. **Property Binding**: \n   - Binds a property of a DOM element to a property in the component class.\n\n3. **Event Binding**: \n   - Allows you to listen to events (like clicks) on DOM elements and execute methods in the component class in response.\n\n4. **Two-Way Data Binding**: \n   - A combination of property and event binding that allows for automatic synchronization of data between the component and the view, commonly implemented using `[(ngModel)]`.\n\n5. **Event Binding**: \n   - Allows you to listen to events (like clicks) on DOM elements and execute methods in the component class in response.\n   - **Syntax**: Uses parentheses (`( )`) around the event name.\n   - **Example**: \n     ```html\n     \u003cbutton (click)=\"onButtonClick()\"\u003eClick Me!\u003c/button\u003e\n     ```\n   - In the component:\n     ```typescript\n     onButtonClick() {\n         console.log('Button was clicked!');\n     }\n     ```\n     In Angular, `$event` represents the **event object** associated with a particular user interaction, such as a click, input, or form submission. You can access this object inside your component methods to:\n      - Inspect the event details (like target elements).\n      - Use event methods such as `preventDefault()` or `stopPropagation()`.\n      ``` typescript\n        export class RolesComponent {\n          role: string = '';\n          state: string = '';\n\n          showWelcomeAlert(e: Event) {\n            e.preventDefault();\n            alert(`Role: ${this.role}, State: ${this.state}`);\n          }\n        }\n      ```\n      ``` html\n        \u003cbutton class=\"border rounded p-2\" (click)=\"showWelcomeAlert($event)\"\u003eClick\u003c/button\u003e\n      ```\n   - **Common Use Cases**: Event binding is typically used for user interactions, such as clicks, key presses, mouse movements, and form submissions. It allows you to define what happens in response to these actions, making your application interactive and responsive to user inputs.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamed-ali-agourram%2Fangular-18-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohamed-ali-agourram%2Fangular-18-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamed-ali-agourram%2Fangular-18-tutorial/lists"}