{"id":21587703,"url":"https://github.com/remylavergne/ngxs-workshop","last_synced_at":"2026-05-19T15:43:00.939Z","repository":{"id":183773528,"uuid":"285217729","full_name":"remylavergne/ngxs-workshop","owner":"remylavergne","description":"👨‍🎓 WorkShop très simple pour comprendre le mécanisme des Store via la librairie Ngxs.","archived":false,"fork":false,"pushed_at":"2020-08-05T10:19:46.000Z","size":310,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-24T15:43:33.859Z","etag":null,"topics":["angular","ngxs","store","workshop"],"latest_commit_sha":null,"homepage":"https://www.ngxs.io/","language":"TypeScript","has_issues":false,"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/remylavergne.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}},"created_at":"2020-08-05T07:45:20.000Z","updated_at":"2020-09-15T08:17:10.000Z","dependencies_parsed_at":"2023-07-25T20:08:59.780Z","dependency_job_id":null,"html_url":"https://github.com/remylavergne/ngxs-workshop","commit_stats":null,"previous_names":["remylavergne/ngxs-workshop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remylavergne%2Fngxs-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remylavergne%2Fngxs-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remylavergne%2Fngxs-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remylavergne%2Fngxs-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remylavergne","download_url":"https://codeload.github.com/remylavergne/ngxs-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244190347,"owners_count":20413099,"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","ngxs","store","workshop"],"created_at":"2024-11-24T15:17:27.055Z","updated_at":"2026-05-19T15:43:00.895Z","avatar_url":"https://github.com/remylavergne.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxsWorkshop\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.4.\n\n## Pré-requis\n\n- Avoir des connaissances en Angular\n- Lire la documentation [ngxs](https://www.ngxs.io/)\n\n## Lancement du projet\n\n```text\n1. Installation des packages NPM\nnpm install\n2. Lancement de l'application\nnpm start\n```\n\nOuvrir l'adresse dans le navigateur : \u003chttp://localhost:4200/\u003e\n\n## Exercices\n\nAu démarrage de l'application, il n'y a aucun utilisateur enregistré dans le *State* initial.\n\n⚠️ Toutes les modifications / solutions sont ici, pour commencer le tutorial, vous devez vous placer sur la branche \u003chttps://github.com/remylavergne/ngxs-workshop/tree/add-user\u003e\n\n### Créer un utilisateur (Branche : \u003chttps://github.com/remylavergne/ngxs-workshop/tree/add-user\u003e)\n\n- Créer une action pour ajouter une utilisateur `src/home/actions/user/add-user.action.ts` :\n\n```typescript\nexport class AddUser {\n    static readonly type = '[User] Add';\n    constructor(public payload: IUser) { }\n}\n```\n\nCette action prend un utilisateur en paramètre. C'est cette information que nous allons garder dans le *State*.\n\n- *Dispatch* du nouvel utilisateur dans le *Store* `src/home/home.component.html` :\n\n```typescript\n@Component({\n    selector: 'app-add-user',\n    templateUrl: './add-user.component.html'\n})\nexport class AddUserComponent implements OnInit {\n\n    public form: FormGroup;\n\n    constructor(private fb: FormBuilder, private store: Store) {\n        this.createForm();\n    }\n\n    ngOnInit() {\n    }\n\n   // ... Logique de formulaire pour récupérer les informations\n\n    private addUser(user: IUser) {\n        this.store.dispatch(new AddUser({ ...user })).subscribe(() =\u003e this.form.reset());\n    }\n}\n```\n\n### Afficher un utilisateur\n\n- Récupérer l'état du Store pour afficher la liste des utilisateurs enregistrés `src/home/containers/users/users.component.ts` :\n\n```typescript\n@Component({\n    selector: 'app-users',\n    templateUrl: './users.component.html'\n})\nexport class UsersComponent implements OnInit {\n\n    // Ajout d'un @Select pour écouter les changements du Store\n    @Select(state =\u003e state.users) users$: Observable\u003cUserStateModel\u003e;\n\n    constructor(private store: Store) { }\n\n    ngOnInit() {\n    }\n\n    public delete(user: IUser) {\n       this.store.dispatch(new DeleteUser({...user})).subscribe(() =\u003e console.log(`${user.email} supprimé`));\n    }\n}\n```\n\n- Editer la partie HMTL pour afficher la liste reçue aux changements `src/home/containers/users/users.component.html` :\n\n```html\n\u003ctable class=\"table table-striped\"\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eName\u003c/th\u003e\n            \u003cth\u003eEmail\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr *ngFor=\"let user of (users$ | async).users\" (click)=\"delete(user)\"\u003e\n            \u003ctd\u003e{{ user.name }}\u003c/td\u003e\n            \u003ctd\u003e{{ user.email }}\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n### Supprimer un utilisateur (Branche : \u003chttps://github.com/remylavergne/ngxs-workshop/tree/delete-user\u003e)\n\n- Créer la classe permettant de définir l'action `src/home/actions/user/delete-user.action.ts` :\n\n```typescript\nexport class DeleteUser {\n    static readonly type = '[User] Delete';\n    constructor(public payload: IUser) { }\n}\n```\n\n- Créer une action pour supprimer un utilisateur `src/home/states/user.state.ts` :\n\n```typescript\n@State\u003cUserStateModel\u003e({\n    name: 'users',\n    defaults: {\n        users: []\n    }\n})\nexport class UserState {\n\n   // ...\n\n    @Action(DeleteUser)\n    public delete(ctx: StateContext\u003cUserStateModel\u003e, user: DeleteUser): void {\n        // State actuel\n        const state = ctx.getState();\n        // Modification du State actuel en supprimant l'utilisateur cliqué \n        ctx.patchState({\n            users: [...state.users.filter(u =\u003e u.email !== user.payload.email)]\n        });\n    }\n}\n```\n\n## Ressources\n\n- [ngxs.io](https://www.ngxs.io/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremylavergne%2Fngxs-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremylavergne%2Fngxs-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremylavergne%2Fngxs-workshop/lists"}