Skip to content

Commit 0d78289

Browse files
authored
update readme.md
1 parent 7c9f757 commit 0d78289

File tree

1 file changed

+26
-27
lines changed

1 file changed

+26
-27
lines changed

README.md

+26-27
Original file line numberDiff line numberDiff line change
@@ -302,10 +302,9 @@
302302
|278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually)
303303
|279| [What is hydration ?](#what-is-hydration)
304304
|280| [What are Angular Signals?](#what-are-angular-signals)
305-
|281| [What are Signals?](#what-are-signals)
306-
|282| [Explain Angular Signals with an example](#explain-angular-signals-with-an-example)
307-
|283| [What are the Route Parameters? Could you explain each of them?](#what-are-the-route-parameters-could-you-explain-each-of-them)
308-
|284| [](#)
305+
|281| [Explain Angular Signals with an example](#explain-angular-signals-with-an-example)
306+
|282| [What are the Route Parameters? Could you explain each of them?](#what-are-the-route-parameters-could-you-explain-each-of-them)
307+
|283| [](#)
309308

310309
1. ### What is Angular Framework?
311310

@@ -4619,7 +4618,7 @@
46194618
46204619
**[⬆ Back to Top](#table-of-contents)**
46214620
4622-
278. ### How to create a standalone component uing CLI command?
4621+
277. ### How to create a standalone component uing CLI command?
46234622
46244623
Generate standalone component using CLI command as shown below
46254624
```bash
@@ -4694,7 +4693,7 @@
46944693
46954694
**[⬆ Back to Top](#table-of-contents)**
46964695
4697-
278. ### What is hydration?
4696+
279. ### What is hydration?
46984697
Hydration is the process that restores the server side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes.
46994698
47004699
To enable hydration, we have to enable server side rendering or Angular Universal. Once enabled, we can add the following piece of code in the root component.
@@ -4725,22 +4724,17 @@
47254724
47264725
**[⬆ Back to Top](#table-of-contents)**
47274726
4728-
278. ### What are Angular Signals?
4727+
280. ### What are Angular Signals?
47294728
A signal is a wrapper around a value that can notify interested consumers when that value changes. Signals can contain any value, from simple primitives to complex data structures.
47304729
47314730
**[⬆ Back to Top](#table-of-contents)**
4732-
4733-
278. ### What are Signals?
4734-
A signal is a wrapper around a value that can notify interested consumers when that value changes. Signals can contain any value, from simple primitives to complex data structures.
4735-
4736-
**[⬆ Back to Top](#table-of-contents)**
4737-
4738-
279. ### Explain Angular Signals with an example.
4731+
4732+
281. ### Explain Angular Signals with an example.
47394733
In this example, we create a signal named `count` and initialize it with a value of 0. We then connect to the signal, allowing us to be notified whenever its value changes. Finally, we add a button that increments the count when clicked.
47404734
47414735
When the button is clicked, the `incrementCount()` method is called. This method sets the new value of the `count` signal to 1. Objects connected to the signal (subscribers) are then notified of the change, and the updated value is displayed in the UI.
47424736
4743-
In typescript file
4737+
In TypeScript file
47444738
47454739
```typescript
47464740
import { Component, OnInit } from '@angular/core';
@@ -4752,36 +4746,41 @@
47524746
styleUrls: ['./app.component.css']
47534747
})
47544748
export class AppComponent implements OnInit {
4749+
count = signal(0);
4750+
doubleCount = computed(() => this.count() * 2);
47554751
4756-
count = signal(0); // Initial value of count
4757-
displayedCount = computed(() => this.count()); // Computed signal for display
4758-
4759-
constructor() { }
4752+
constructor() {}
47604753
47614754
ngOnInit() {
4762-
// Subscribe to displayedCount instead of count for updates in the template
4763-
this.displayedCount.subscribe(value => {
4764-
console.log('Displayed count changed to', value); // Optional logging for debugging
4765-
});
4755+
// Optional logging for debugging displayedCount changes
4756+
// console.log('Displayed count changed to:', this.displayedCount());
47664757
}
47674758
47684759
incrementCount() {
4769-
this.count.set(this.count() + 1); // Update count using set() for immutability
4760+
this.count.set(this.count() + 1);
4761+
}
4762+
4763+
decrementCount() {
4764+
this.count.update((value) => Math.max(0, value - 1));
47704765
}
47714766
}
47724767
```
47734768
In HTML file
47744769
```html
47754770
<h1>Angular Signals Example</h1>
47764771
4777-
<button (click)="incrementCount()">Increment Count</button>
4772+
<button (click)="incrementCount()" style="margin-right: 10px;">Increment Count</button>
4773+
<button (click)="decrementCount()">Decrement Count</button>
47784774
4779-
<p>Count: {{ count }}</p>
4775+
<p>Count: {{ count() }}</p>
4776+
<p>Double Count: {{ doubleCount() }}</p>
47804777
```
47814778
4779+
[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-pirzhw?file=src%2Fmain.ts)
4780+
47824781
**[⬆ Back to Top](#table-of-contents)**
47834782
4784-
279. ### What are the Route Parameters? Could you explain each of them?.
4783+
282. ### What are the Route Parameters? Could you explain each of them?.
47854784
Route parameters are used to pass dynamic values in the URL of a route. They allow you to define variable segments in the route path, which can be accessed and used by components and services. Path parameters are represented by a colon (":") followed by the parameter name.
47864785
47874786
There are three types of route parameters in Angular:

0 commit comments

Comments
 (0)