{"id":17663958,"url":"https://github.com/tiago154/food-menu","last_synced_at":"2026-05-15T21:32:49.862Z","repository":{"id":99007710,"uuid":"345137791","full_name":"tiago154/food-menu","owner":"tiago154","description":"Projeto de estudo de Angular. A ideia é criar uma pagina que será possível cadastrar estabelecimentos, cardápios e seus respectivos pratos.","archived":false,"fork":false,"pushed_at":"2021-03-28T18:23:18.000Z","size":298,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T12:15:45.465Z","etag":null,"topics":["angular","cardapio","json-server","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/tiago154.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":"2021-03-06T16:15:59.000Z","updated_at":"2021-03-28T18:23:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"c98d81e8-5084-4e1e-bd71-a965d68cc239","html_url":"https://github.com/tiago154/food-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tiago154/food-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiago154%2Ffood-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiago154%2Ffood-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiago154%2Ffood-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiago154%2Ffood-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiago154","download_url":"https://codeload.github.com/tiago154/food-menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiago154%2Ffood-menu/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263426297,"owners_count":23464795,"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","cardapio","json-server","typescript"],"created_at":"2024-10-23T19:42:57.518Z","updated_at":"2026-05-15T21:32:44.821Z","avatar_url":"https://github.com/tiago154.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Netlify Status](https://api.netlify.com/api/v1/badges/025bcd66-207c-4432-b6f2-8c16e9c11652/deploy-status)](https://app.netlify.com/sites/food-menu-angular/deploys)\n\n# FoodMenu\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.4.\n\n## Development server\n\nRun `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. Use the `--prod` flag for a production build.\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 [Protractor](http://www.protractortest.org/).\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\n## Adicionando Angular Material\n\n`ng add @angular/material`\n\n## Criando um novo component\n\n`ng generate component components/template/header`\n\nou\n\n`ng g c components/template/header`\n\n## Conceitos Angular\n\n### Directives\n\n#### Attribute Directives\n\nAltera a **aparência** e o **comportamento** de um elemento, componente ou outra diretiva\n\n```ts\n@directive({\n  selector: '[appRed]'\n})\nexport class RedDirective {\n\n  constructor(el: ElementRef) {\n    el.nativeElement.style.color = '#E35E6B'\n  }\n}\n```\n\n```html\n\u003ci class=\"material-icons\" appRed\u003e\n  favorite\n\u003c/i\u003e\n```\n\n#### Structural Directives\n\nAltera o layout **adicionando** e **removendo** elementos da **DOM**\n\n```html\n\u003cform *ngIf=\"product\"\u003e\n\u003c/form\u003e\n```\n\n```html\n\u003cul\u003e\n  \u003cli *ngFor=\"let product of products\"\u003e\n    {{ product.name }}\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### Property Binding\n\n```html\n\u003ctable [dataSource]=\"products\"\u003e\n\u003c/table\u003e\n```\n\n```ts\n@Component({\n  selector: 'app-product-read',\n  templateUrl: './product-read.component.html',\n  styleUrls: ['./product-read.component.css']\n})\nexport class HeaderComponent implements OnInit {\n  products: Product[]\n}\n```\n\n### Event Binding\n\n```html\n\u003cbutton mat-raised-button (click)=\"createProduct()\" color=\"primary\"\u003e\n  Salvar\n\u003c/button\u003e\n```\n\n```ts\n@Component({\n  selector: 'app-product-create',\n  templateUrl: './product-create.component.html',\n  styleUrls: ['./product-create.component.css']\n})\nexport class HeaderComponent implements OnInit {\n  createProduct(): void {\n    // ....\n  }\n}\n```\n\n### One Way Data Binding\n\nComponent -\u003e HTML\n\n```ts\nnome: string;\n```\n\n```html\n\u003cinput [value]=\"nome\"\u003e\n```\n\n### Two Way Data Binding\n\nComponent \u003c- -\u003e HTML\n\n```ts\nnome: string;\n```\n\n```html\n\u003cinput [(ngModel)]=\"nome\"\u003e\n```\n\n### Schematics\n\nÉ um template que gera código para instruções complexas.\n\nhttps://angular.io/guide/schematics\n\nExemplo: Podemos criar um componente de tabela, que fica responsável de mostrar uma lista de dados, com paginação e ordenação.\n\n```sh\nng generate @angular/material:table \u003cnome do componente\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiago154%2Ffood-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiago154%2Ffood-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiago154%2Ffood-menu/lists"}