{"id":18850505,"url":"https://github.com/manthanank/angular-signals","last_synced_at":"2026-02-03T09:30:18.148Z","repository":{"id":234877149,"uuid":"789671434","full_name":"manthanank/angular-signals","owner":"manthanank","description":"Angular Signals Examples","archived":false,"fork":false,"pushed_at":"2024-10-21T17:11:08.000Z","size":219,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T03:33:48.377Z","etag":null,"topics":["angular","signals"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manthanank.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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},"funding":{"github":["manthanank"],"open_collective":"manthanank","buy_me_a_coffee":"manthanank","patreon":"manthanank"}},"created_at":"2024-04-21T08:16:32.000Z","updated_at":"2024-10-21T17:11:12.000Z","dependencies_parsed_at":"2024-08-05T14:56:13.891Z","dependency_job_id":null,"html_url":"https://github.com/manthanank/angular-signals","commit_stats":null,"previous_names":["manthanank/angular-signals"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fangular-signals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fangular-signals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fangular-signals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Fangular-signals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manthanank","download_url":"https://codeload.github.com/manthanank/angular-signals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239786311,"owners_count":19696786,"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","signals"],"created_at":"2024-11-08T03:29:43.120Z","updated_at":"2026-02-03T09:30:18.061Z","avatar_url":"https://github.com/manthanank.png","language":null,"readme":"# Angular Signals\n\nAngular Signals is a powerful system that provides detailed monitoring of state usage within an application, enabling the framework to efficiently optimize rendering updates.\n\n## Table of Contents\n\n- [Simple Example of Angular Signals in Action](#simple-example-of-angular-signals-in-action)\n  - [In Standalone Components](#in-standalone-components)\n  - [In Non Standalone Components](#in-non-standalone-components)\n\n## Simple Example of Angular Signals in Action\n\nHere are two examples of Angular Signals in action. The first example uses Angular Signals, while the second example does not. Both examples have a counter that increments and decrements, and a log that displays the actions taken. The difference between the two examples is that the first example uses Angular Signals to manage the state, while the second example uses the default Angular change detection.\n\nExample is created in two ways:\n\n1. [In Standalone Components](#in-standalone-components)\n2. [In Non Standalone Components](#in-non-standalone-components)\n\n## In Standalone Components\n\nCode for the examples below can be found in the branch `with-standalone-components`.\n\nDemo: [Angular Signals](https://amazing-gecko-07a618.netlify.app)\n\nProject Structure:\n\n```text\n├── public/\n│   |── favicon.ico\n├── src/\n│   ├── app/\n│   │   ├── home/\n│   │   │   ├── home.component.html\n|   |   |   ├── home.component.spec.ts\n│   │   │   ├── home.component.ts\n│   │   │   └── home.component.scss\n│   │   ├── navbar/\n│   │   │   ├── navbar.component.html\n|   |   |   ├── navbar.component.spec.ts\n│   │   │   ├── navbar.component.ts\n│   │   │   └── navbar.component.scss\n│   │   ├── with-signals/\n│   │   │   ├── with-signals.component.html\n|   |   |   ├── with-signals.component.spec.ts\n│   │   │   ├── with-signals.component.ts\n│   │   │   └── with-signals.component.scss\n│   │   ├── without-signals/\n│   │   │   ├── without-signals.component.html\n|   |   |   ├── without-signals.component.spec.ts\n│   │   │   ├── without-signals.component.ts\n│   │   │   └── without-signals.component.scss\n│   │   ├── app.component.html\n│   │   └── app.component.ts\n|   |   └── app.component.spec.ts\n|   |   └── app.component.scss\n|   |   └── app.config.ts\n|   |   └── app.routes.ts\n│   ├── index.html\n│   ├── main.ts\n│   └── styles.scss\n├── .editorconfig\n├── .gitignore\n├── angular.json\n├── package.json\n├── package-lock.json\n├── tsconfig.json\n├── tsconfig.app.json\n├── tsconfig.spec.json\n└── README.md\n```\n\nHere is the code for the above project structure:\n\nIn `app.component.ts`:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { NavbarComponent } from './navbar/navbar.component';\nimport { HomeComponent } from './home/home.component';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [RouterOutlet, NavbarComponent, HomeComponent],\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.scss',\n})\nexport class AppComponent {}\n```\n\nIn `app.component.html`:\n\n```html\n\u003capp-navbar\u003e\u003c/app-navbar\u003e\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\nIn `app.config.ts`:\n\n```typescript\nimport { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { provideRouter } from '@angular/router';\n\nimport { routes } from './app.routes';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    provideRouter(routes),\n  ],\n};\n```\n\nIn `app.routes.ts`:\n\n```typescript\nimport { Routes } from '@angular/router';\n\nexport const routes: Routes = [\n  { path: '', redirectTo: '/home', pathMatch: 'full' },\n  {\n    path: 'home',\n    loadComponent: () =\u003e\n      import('./home/home.component').then((m) =\u003e m.HomeComponent),\n  },\n  {\n    path: 'with-signal',\n    loadComponent: () =\u003e\n      import('./with-signals/with-signals.component').then(\n        (m) =\u003e m.WithSignalsComponent\n      ),\n  },\n  {\n    path: 'without-signal',\n    loadComponent: () =\u003e\n      import('./without-signals/without-signals.component').then(\n        (m) =\u003e m.WithoutSignalsComponent\n      ),\n  },\n];\n```\n\nIn `navbar.component.ts`:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\n@Component({\n  selector: 'app-navbar',\n  standalone: true,\n  imports: [RouterLink, RouterLinkActive],\n  templateUrl: './navbar.component.html',\n  styleUrl: './navbar.component.scss',\n})\nexport class NavbarComponent {}\n```\n\nIn `navbar.component.html`:\n\n```html\n\u003cnav\u003e\n    \u003ca routerLink=\"/home\" class=\"link\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\"\u003eHome\u003c/a\u003e\n    \u003ca routerLink=\"/with-signal\" class=\"link\" routerLinkActive=\"active\"\u003eWith Signal Example\u003c/a\u003e\n    \u003ca routerLink=\"/without-signal\" class=\"link\" routerLinkActive=\"active\"\u003eWithout Signal Example\u003c/a\u003e\n\u003c/nav\u003e\n```\n\nIn `navbar.component.scss`:\n\n```scss\nnav {\n    display: flex;\n    justify-content: center;\n    margin-top: 20px;\n    gap: 20px;\n\n    a {\n        color: #fff;\n        text-decoration: none;\n        padding: 10px 15px;\n        border-radius: 5px;\n        // background-color: #333;\n        transition: background-color 0.3s;\n\n        \u0026:hover {\n            background-color: #555;\n        }\n    }\n\n    .active {\n        background-color: #555;\n    }\n}\n```\n\nIn `home.component.html`:\n\n```html\n\u003cdiv class=\"container\"\u003e\n    \u003ch1\u003e\n        Welcome to the Angular Signals Examples!\n    \u003c/h1\u003e\n    \u003cp\u003e\n        This is a collection of examples that demonstrate how to use Angular Signals.\n    \u003c/p\u003e\n    \u003cp\u003e\n        To get started, click on one of the examples in the navigation bar.\n    \u003c/p\u003e\n    \u003cp\u003e\n        If you have any questions or feedback, please feel free to reach out to me on Twitter at \u003ca\n            href=\"https://twitter.com/manthan_ank\"\u003e\u0026#64;manthan_ank\u003c/a\u003e.\n    \u003c/p\u003e\n    \u003cp\u003e\n        Enjoy!\n    \u003c/p\u003e\n\u003c/div\u003e\n```\n\nIn `home.component.scss`:\n\n```scss\n.container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-top: 5rem;\n\n    h1 {\n        color: #f0eef5;\n        text-align: center;\n    }\n\n    p {\n        color: #f0eef5;\n        text-align: center;\n    }\n\n    img {\n        display: block;\n        margin: 0 auto;\n    }\n\n    a {\n        color: #f0eef5;\n        text-decoration: underline;\n    }\n}\n```\n\nIn `home.component.ts`:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-home',\n  standalone: true,\n  imports: [],\n  templateUrl: './home.component.html',\n  styleUrl: './home.component.scss',\n})\nexport class HomeComponent {}\n```\n\nIn `with-signals.component.ts`:\n\n```typescript\nimport { Component, computed, effect, signal } from '@angular/core';\n\n@Component({\n  selector: 'app-with-signals',\n  standalone: true,\n  imports: [],\n  templateUrl: './with-signals.component.html',\n  styleUrl: './with-signals.component.scss',\n})\nexport class WithSignalsComponent {\n  actions = signal\u003cstring[]\u003e([]);\n  counter = signal(0);\n  doubleCounter = computed(() =\u003e this.counter() * 2);\n\n  constructor() {\n    effect(() =\u003e console.log(this.counter()));\n  }\n\n  increment() {\n    // this.counter.update((oldCounter) =\u003e oldCounter + 1);\n    this.counter.set(this.counter() + 1);\n    // this.actions.mutate((oldActions) =\u003e oldActions.push('INCREMENT'));\n    this.actions.set([...this.actions(), 'INCREMENT']);\n  }\n\n  decrement() {\n    this.counter.update((oldCounter) =\u003e oldCounter - 1);\n    this.actions.update((oldActions) =\u003e [...oldActions, 'DECREMENT']);\n  }\n}\n```\n\nIn `with-signals.component.html`:\n\n```html\n\u003ch1\u003eSignals\u003c/h1\u003e\n\n\u003cdiv id=\"counter\"\u003e\n  \u003cp id=\"counter-output\"\u003eCounter: {{ doubleCounter() }}\u003c/p\u003e\n  \u003cdiv id=\"counter-btns\"\u003e\n    \u003cbutton (click)=\"decrement()\"\u003eDecrement\u003c/button\u003e\n    \u003cbutton (click)=\"increment()\"\u003eIncrement\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2\u003eAction Log\u003c/h2\u003e\n\u003col id=\"log\"\u003e\n  @for (action of actions(); track $index) {\n  \u003cli\u003e{{ action }}\u003c/li\u003e\n  }\n\u003c/ol\u003e\n```\n\nIn `without-signals.component.ts`:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-without-signals',\n  standalone: true,\n  imports: [],\n  templateUrl: './without-signals.component.html',\n  styleUrl: './without-signals.component.scss',\n})\nexport class WithoutSignalsComponent {\n  actions: string[] = [];\n  counter = 0;\n\n  increment() {\n    this.counter++;\n    this.actions.push('INCREMENT');\n  }\n\n  decrement() {\n    this.counter--;\n    this.actions.push('DECREMENT');\n  }\n}\n```\n\nIn `without-signals.component.html`:\n\n```html\n\u003ch1\u003eDefault (Automatic Change Detection)\u003c/h1\u003e\n\n\u003cdiv id=\"counter\"\u003e\n    \u003cp id=\"counter-output\"\u003eCounter: {{ counter }}\u003c/p\u003e\n    \u003cdiv id=\"counter-btns\"\u003e\n        \u003cbutton (click)=\"decrement()\"\u003eDecrement\u003c/button\u003e\n        \u003cbutton (click)=\"increment()\"\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2\u003eAction Log\u003c/h2\u003e\n\u003col id=\"log\"\u003e\n    @for (action of actions; track $index) {\n    \u003cli\u003e{{ action }}\u003c/li\u003e\n    }\n\u003c/ol\u003e\n```\n\nIn `styles.scss`:\n\n```scss\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\nbody {\n  margin: 0;\n  background-color: #131216;\n  color: #f0eef5;\n}\n\nh1,\nh2 {\n  text-align: center;\n}\n\n#counter {\n  margin: 3rem auto;\n  max-width: 40rem;\n  text-align: center;\n}\n\n#counter-output {\n  font-size: 2rem;\n  padding: 0.5rem 1.5rem;\n  color: #a292d0;\n}\n\n#counter-btns {\n  display: flex;\n  justify-content: center;\n  gap: 2rem;\n}\n\nbutton {\n  padding: 0.5rem 1.5rem;\n  border: none;\n  border-radius: 4px;\n  background-color: #a688ff;\n  color: #070312;\n  font-size: 1.2rem;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background-color: #8e8eff;\n}\n\n#log {\n  text-align: center;\n  list-style: none;\n  margin: 3rem 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n```\n\n## In Non Standalone Components\n\nCode for the examples below can be found in the branch `without-standalone-components`.\n\nDemo: [Angular Signals](https://vocal-valkyrie-2b9d38.netlify.app)\n\nProject Structure:\n\n```text\n├── public/\n│   |── favicon.ico\n├── src/\n│   ├── app/\n│   │   ├── home/\n│   │   │   ├── home.component.html\n|   |   |   ├── home.component.spec.ts\n│   │   │   ├── home.component.ts\n│   │   │   └── home.component.scss\n│   │   ├── navbar/\n│   │   │   ├── navbar.component.html\n|   |   |   ├── navbar.component.spec.ts\n│   │   │   ├── navbar.component.ts\n│   │   │   └── navbar.component.scss\n│   │   ├── with-signals/\n│   │   │   ├── with-signals.component.html\n|   |   |   ├── with-signals.component.spec.ts\n│   │   │   ├── with-signals.component.ts\n│   │   │   └── with-signals.component.scss\n│   │   ├── without-signals/\n│   │   │   ├── without-signals.component.html\n|   |   |   ├── without-signals.component.spec.ts\n│   │   │   ├── without-signals.component.ts\n│   │   │   └── without-signals.component.scss\n│   │   ├── app.component.html\n│   │   └── app.component.ts\n|   |   └── app.component.scss\n|   |   └── app.component.spec.ts\n|   |   └── app.module.ts\n|   |   └── app.routing.module.ts\n│   ├── index.html\n│   ├── main.ts\n│   └── styles.scss\n├── .editorconfig\n├── .gitignore\n├── angular.json\n├── package.json\n├── package-lock.json\n├── tsconfig.json\n├── tsconfig.app.json\n├── tsconfig.spec.json\n└── README.md\n```\n\nHere is the code for the above project structure:\n\nIn `app.component.ts`:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.scss',\n})\nexport class AppComponent {}\n```\n\nIn `app.component.html`:\n\n```html\n\u003capp-navbar\u003e\u003c/app-navbar\u003e\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\nIn `app.module.ts`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { NavbarComponent } from './navbar/navbar.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    NavbarComponent,\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nIn `app.routing.module.ts`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\n\nconst routes: Routes = [\n  { path: '', redirectTo: '/home', pathMatch: 'full' },\n  {\n    path: 'home',\n    loadChildren: () =\u003e import('./home/home.module').then((m) =\u003e m.HomeModule),\n  },\n  {\n    path: 'with-signal',\n    loadChildren: () =\u003e\n      import('./with-signals/with-signals.module').then(\n        (m) =\u003e m.WithSignalsModule\n      ),\n  },\n  {\n    path: 'without-signal',\n    loadChildren: () =\u003e\n      import('./without-signals/without-signals.module').then(\n        (m) =\u003e m.WithoutSignalsModule\n      ),\n  },\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n```\n\nIn `navbar.component.ts`:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-navbar',\n  templateUrl: './navbar.component.html',\n  styleUrl: './navbar.component.scss',\n})\nexport class NavbarComponent {}\n```\n\nIn `navbar.component.html`:\n\n```html\n\u003cnav\u003e\n    \u003ca routerLink=\"/home\" class=\"link\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\"\u003eHome\u003c/a\u003e\n    \u003ca routerLink=\"/with-signal\" class=\"link\" routerLinkActive=\"active\"\u003eWith Signal Example\u003c/a\u003e\n    \u003ca routerLink=\"/without-signal\" class=\"link\" routerLinkActive=\"active\"\u003eWithout Signal Example\u003c/a\u003e\n\u003c/nav\u003e\n```\n\nIn `navbar.component.scss`:\n\n```scss\nnav {\n    display: flex;\n    justify-content: center;\n    margin-top: 20px;\n    gap: 20px;\n\n    a {\n        color: #fff;\n        text-decoration: none;\n        padding: 10px 15px;\n        border-radius: 5px;\n        // background-color: #333;\n        transition: background-color 0.3s;\n\n        \u0026:hover {\n            background-color: #555;\n        }\n    }\n\n    .active {\n        background-color: #555;\n    }\n}\n```\n\nIn `home-routing.module.ts`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { HomeComponent } from './home.component';\n\nconst routes: Routes = [{ path: '', component: HomeComponent }];\n\n@NgModule({\n  imports: [RouterModule.forChild(routes)],\n  exports: [RouterModule],\n})\nexport class HomeRoutingModule {}\n```\n\nIn `home.component.html`:\n\n```html\n\u003cdiv class=\"container\"\u003e\n    \u003ch1\u003e\n        Welcome to the Angular Signals Examples!\n    \u003c/h1\u003e\n    \u003cp\u003e\n        This is a collection of examples that demonstrate how to use Angular Signals.\n    \u003c/p\u003e\n    \u003cp\u003e\n        To get started, click on one of the examples in the navigation bar.\n    \u003c/p\u003e\n    \u003cp\u003e\n        If you have any questions or feedback, please feel free to reach out to me on Twitter at \u003ca\n            href=\"https://twitter.com/manthan_ank\"\u003e\u0026#64;manthan_ank\u003c/a\u003e.\n    \u003c/p\u003e\n    \u003cp\u003e\n        Enjoy!\n    \u003c/p\u003e\n\u003c/div\u003e\n```\n\nIn `home.component.scss`:\n\n```scss\n.container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-top: 5rem;\n\n    h1 {\n        color: #f0eef5;\n        text-align: center;\n    }\n\n    p {\n        color: #f0eef5;\n        text-align: center;\n    }\n\n    img {\n        display: block;\n        margin: 0 auto;\n    }\n\n    a {\n        color: #f0eef5;\n        text-decoration: underline;\n    }\n}\n```\n\nIn `home.component.ts`:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: './home.component.html',\n  styleUrl: './home.component.scss',\n})\nexport class HomeComponent {}\n```\n\nIn `home.module.ts`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { HomeComponent } from './home.component';\nimport { HomeRoutingModule } from './home-routing.module';\n\n@NgModule({\n  declarations: [HomeComponent],\n  imports: [CommonModule, HomeRoutingModule]\n})\nexport class HomeModule { }\n```\n\nIn `with-signals-routing.module.ts`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { WithSignalsComponent } from './with-signals.component';\n\nconst routes: Routes = [{ path: '', component: WithSignalsComponent }];\n\n@NgModule({\n  imports: [RouterModule.forChild(routes)],\n  exports: [RouterModule],\n})\nexport class WithSignalsRoutingModule {}\n```\n\nIn `with-signals.module.ts`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { WithSignalsComponent } from './with-signals.component';\nimport { WithSignalsRoutingModule } from './with-signals-routing.module';\n\n@NgModule({\n  declarations: [WithSignalsComponent],\n  imports: [CommonModule, WithSignalsRoutingModule],\n})\nexport class WithSignalsModule {}\n```\n\nIn `with-signals.component.ts`:\n\n```typescript\nimport { Component, computed, effect, signal } from '@angular/core';\n\n@Component({\n  selector: 'app-with-signals',\n  templateUrl: './with-signals.component.html',\n  styleUrl: './with-signals.component.scss',\n})\nexport class WithSignalsComponent {\n  actions = signal\u003cstring[]\u003e([]);\n  counter = signal(0);\n  doubleCounter = computed(() =\u003e this.counter() * 2);\n\n  constructor() {\n    effect(() =\u003e console.log(this.counter()));\n  }\n\n  increment() {\n    // this.counter.update((oldCounter) =\u003e oldCounter + 1);\n    this.counter.set(this.counter() + 1);\n    // this.actions.mutate((oldActions) =\u003e oldActions.push('INCREMENT'));\n    this.actions.set([...this.actions(), 'INCREMENT']);\n  }\n\n  decrement() {\n    this.counter.update((oldCounter) =\u003e oldCounter - 1);\n    this.actions.update((oldActions) =\u003e [...oldActions, 'DECREMENT']);\n  }\n}\n```\n\nIn `with-signals.component.html`:\n\n```html\n\u003ch1\u003eSignals\u003c/h1\u003e\n\n\u003cdiv id=\"counter\"\u003e\n  \u003cp id=\"counter-output\"\u003eCounter: {{ doubleCounter() }}\u003c/p\u003e\n  \u003cdiv id=\"counter-btns\"\u003e\n    \u003cbutton (click)=\"decrement()\"\u003eDecrement\u003c/button\u003e\n    \u003cbutton (click)=\"increment()\"\u003eIncrement\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2\u003eAction Log\u003c/h2\u003e\n\u003col id=\"log\"\u003e\n  @for (action of actions(); track $index) {\n  \u003cli\u003e{{ action }}\u003c/li\u003e\n  }\n\u003c/ol\u003e\n```\n\nIn `without-signals-routing.module.ts`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { WithoutSignalsComponent } from './without-signals.component';\n\nconst routes: Routes = [\n  { path: '', component: WithoutSignalsComponent },\n];\n\n@NgModule({\n  imports: [RouterModule.forChild(routes)],\n  exports: [RouterModule]\n})\nexport class WithoutSignalsRoutingModule { }\n```\n\nIn `without-signals.module.ts`:\n\n```typescript\n// without-signals.module.ts\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { WithoutSignalsComponent } from './without-signals.component';\nimport { WithoutSignalsRoutingModule } from './without-signals-routing.module';\n\n@NgModule({\n  declarations: [WithoutSignalsComponent],\n  imports: [CommonModule, WithoutSignalsRoutingModule],\n})\nexport class WithoutSignalsModule {}\n```\n\nIn `without-signals.component.ts`:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-without-signals',\n  templateUrl: './without-signals.component.html',\n  styleUrl: './without-signals.component.scss',\n})\nexport class WithoutSignalsComponent {\n  actions: string[] = [];\n  counter = 0;\n\n  increment() {\n    this.counter++;\n    this.actions.push('INCREMENT');\n  }\n\n  decrement() {\n    this.counter--;\n    this.actions.push('DECREMENT');\n  }\n}\n```\n\nIn `without-signals.component.html`:\n\n```html\n\u003ch1\u003eDefault (Automatic Change Detection)\u003c/h1\u003e\n\n\u003cdiv id=\"counter\"\u003e\n  \u003cp id=\"counter-output\"\u003eCounter: {{ counter }}\u003c/p\u003e\n  \u003cdiv id=\"counter-btns\"\u003e\n    \u003cbutton (click)=\"decrement()\"\u003eDecrement\u003c/button\u003e\n    \u003cbutton (click)=\"increment()\"\u003eIncrement\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2\u003eAction Log\u003c/h2\u003e\n\u003col id=\"log\"\u003e\n  @for (action of actions; track $index) {\n  \u003cli\u003e{{ action }}\u003c/li\u003e\n  }\n\u003c/ol\u003e\n```\n\nIn `styles.scss`:\n\n```scss\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\nbody {\n  margin: 0;\n  background-color: #131216;\n  color: #f0eef5;\n}\n\nh1,\nh2 {\n  text-align: center;\n}\n\n#counter {\n  margin: 3rem auto;\n  max-width: 40rem;\n  text-align: center;\n}\n\n#counter-output {\n  font-size: 2rem;\n  padding: 0.5rem 1.5rem;\n  color: #a292d0;\n}\n\n#counter-btns {\n  display: flex;\n  justify-content: center;\n  gap: 2rem;\n}\n\nbutton {\n  padding: 0.5rem 1.5rem;\n  border: none;\n  border-radius: 4px;\n  background-color: #a688ff;\n  color: #070312;\n  font-size: 1.2rem;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background-color: #8e8eff;\n}\n\n#log {\n  text-align: center;\n  list-style: none;\n  margin: 3rem 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n```\n\n## Conclusion\n\nAngular Signals is a powerful system that provides detailed monitoring of state usage within an application, enabling the framework to efficiently optimize rendering updates. By using Angular Signals, developers can create more efficient and performant applications that are easier to maintain and scale.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgements\n\n- [Angular](https://angular.io/)\n- [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/)\n- [Udemy](https://www.udemy.com/)\n- [Netlify](https://www.netlify.com/)\n- [Angular - The Complete Guide (2024 Edition)](https://www.udemy.com/course-dashboard-redirect/?course_id=756150)\n\nThis projects were created as part of the Angular - The Complete Guide (2024 Edition) course by Maximilian Schwarzmüller on Udemy.\n","funding_links":["https://github.com/sponsors/manthanank","https://opencollective.com/manthanank","https://buymeacoffee.com/manthanank","https://patreon.com/manthanank"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Fangular-signals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanthanank%2Fangular-signals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Fangular-signals/lists"}