{"id":18738217,"url":"https://github.com/enginooby-practice/angular","last_synced_at":"2026-04-14T00:03:16.083Z","repository":{"id":216465917,"uuid":"279645308","full_name":"enginooby-practice/angular","owner":"enginooby-practice","description":null,"archived":false,"fork":false,"pushed_at":"2020-07-27T16:30:54.000Z","size":147,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-28T17:32:09.748Z","etag":null,"topics":["angular","bootstrap","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/enginooby-practice.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":"2020-07-14T17:03:39.000Z","updated_at":"2020-07-27T16:30:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"c35b7c55-aebc-4b4a-9a32-851e864eafd2","html_url":"https://github.com/enginooby-practice/angular","commit_stats":null,"previous_names":["enginooby-practice/angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enginooby-practice%2Fangular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enginooby-practice%2Fangular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enginooby-practice%2Fangular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enginooby-practice%2Fangular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enginooby-practice","download_url":"https://codeload.github.com/enginooby-practice/angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239612216,"owners_count":19668342,"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","bootstrap","typescript"],"created_at":"2024-11-07T15:28:42.856Z","updated_at":"2025-11-18T00:30:16.130Z","avatar_url":"https://github.com/enginooby-practice.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# List of practiced topics\n\n### Project Structure\n- ```src/app/app.module.ts```: main application module\n- ```src/app/app.component.html```: main template HTML page for content placeholder\n- ```src/assets``` used to store resources: images, JS, CSS, etc.\n- ```node_modules``` directory and ```package.json``` contain all the dependencies.\n- ```angular.json``` is the main configuration file of the project.\n- ```src/style.css``` is the global CSS style\n\n\n### New Component\n1. Create new project by CLI\n   - No routing\n   - CSS style\n2. Build and run the app\n3. Update main template page \n[[app.component.html]()]\n4. Create new Component by CLI, files generated:\n   - ```\u003ccomponent_name\u003e.component.ts```: the component class\n   - ```\u003ccomponent_name\u003e.component.html```: the component template HTML\n   - ```\u003ccomponent_name\u003e.component.css```: the component private CSS\n   - ```\u003ccomponent_name\u003e.component.spec.ts```: the unit test specifications\n   - Automatically update main app module: include new Component into the module\n5. Add new component selector to app template page to include its template to the main app template (web page)\n6. Create new class (optional)\n[[student.ts]()]\n7. Create sample data in the Component \n[[student-list.component.ts]()]\n8. Update template HTML page of the component to display sample data \n[[student-list.component.html]()]\n\n### Integrating Bootstrap\n1. Get links for remote Bootstrap files: required meta and link tags \n[[URL](https://getbootstrap.com/docs/4.5/getting-started/introduction/#starter-template)]\n2. Add the reference links to \n[index.html]()\n3. Apply Bootstrap style in the templates\n[[app.component.html]()] [[student-list-bootstrap.component.html]()]\n   - Wrap the content inside ```\u003cdiv class=\"container\"\u003e```\n4. Update new template URL for the Component if necessary (change template)\n[[student-list.component.ts]()]\n\n### Notes - Tips\n- ```{{ }}``` reads the property of the related component in template (string interpolation)\n- Modifier ```public``` is commonly used for properties in Angular -\u003e no need for getter/setter accessor\n\n### @angular/common API\n [[student-list.component.html]()]\n - ```*ngFor=\"let \u003cvar\u003e of \u003cvar_array\u003e``` loops through the array (used for ```\u003ctr\u003e```) \n - ```*ngIf=\"\u003cboolean expression\u003e; else \u003celse_block\u003e\"``` and ```\u003cng-template #\u003celse_block\u003e\u003e``` displays the content based on boolean expression result\n- ```[ngClass]=\"{'\u003cclass\u003e': \u003cboolean expression\u003e}\"\u003e``` assigns the class to the element based on boolean expression result\n\n### Angular CLI Commands\n- ```ng help```: list on commands with the infomation\n- ```ng new \u003cproject_name\u003e```: create new project\n- ```ng serve```: build the app and start the server with hot reload (```--open``` automatically open app in browser)\n- ```ng generate component \u003ccomponent_name\u003e```: create new Component\n- ```ng generate class \u003ccomponent_name\u003e/\u003cclass_name\u003e``` (no ```.ts```): create new TypeScript class inside folder contanning the component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenginooby-practice%2Fangular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenginooby-practice%2Fangular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenginooby-practice%2Fangular/lists"}