From 20555f1b01557be432013926e9cc8eaa6e8dcfaa Mon Sep 17 00:00:00 2001 From: Manthan Ankolekar Date: Tue, 14 May 2024 19:08:35 +0530 Subject: [PATCH 1/4] Update README.md --- README.md | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 95 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 77d93a9..5f56cbe 100644 --- a/README.md +++ b/README.md @@ -301,7 +301,11 @@ |277| [How to create a standalone component uing CLI command?](#how-to-create-a-standalone-component-uing-cli-command) |278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually) |279| [What is hydration ?](#what-is-hydration) -|279| [](#) +|280| [What is Angular Signals ?](#what-is-angular-signals) +|281| [What is Signals ?](#what-is-signals) +|282| [Explain Angular Signals with example](#explain-angular-signals-with-example) +|283| [What are the Route Parameters? Explain each of them.](#what-are-the-route-parameters-explain-each-of-them) +|284| []() 1. ### What is Angular Framework? @@ -4689,6 +4693,7 @@ ``` **[⬆ Back to Top](#table-of-contents)** + 278. ### What is hydration? 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. @@ -4719,3 +4724,92 @@ ``` **[⬆ Back to Top](#table-of-contents)** + +278. ### What are Angular Signals? + 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. + + **[⬆ Back to Top](#table-of-contents)** + +278. ### What are Signals? + 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. + + **[⬆ Back to Top](#table-of-contents)** + +279. ### Explain Angular Signals with example. + 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. + + 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. + + In typescript file + + ```typescript + import { Component, OnInit } from '@angular/core'; + import { signal, computed } from '@angular/core'; // Import from '@angular/core' + + @Component({ + selector: 'my-app', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + export class AppComponent implements OnInit { + + count = signal(0); // Initial value of count + displayedCount = computed(() => this.count()); // Computed signal for display + + constructor() { } + + ngOnInit() { + // Subscribe to displayedCount instead of count for updates in the template + this.displayedCount.subscribe(value => { + console.log('Displayed count changed to', value); // Optional logging for debugging + }); + } + + incrementCount() { + this.count.set(this.count() + 1); // Update count using set() for immutability + } + } + ``` + In HTML file + ```html +

Angular Signals Example

+ + + +

Count: {{ count }}

+ ``` + + **[⬆ Back to Top](#table-of-contents)** + +279. ### What are the Route Parameters? Explain each of them. + 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. + + There are three types of route parameters in Angular: + + **Path parameters:** Path parameters are used to define dynamic segments in the URL path. They are specified as part of the route's path and are extracted from the actual URL when navigating to that route. Path parameters are represented by a colon (":") followed by the parameter name. For example: + + ```typescript + { path: 'users/:id', component: UserComponent } + ``` + + In this example, ":id" is the path parameter. When navigating to a URL like "/users/123", the value "123" will be extracted and can be accessed in the UserComponent. + + **Query parameters:** Query parameters are used to pass additional information in the URL as key-value pairs. They are appended to the URL after a question mark ("?") and can be accessed by components and services. Query parameters are not part of the route path, but they provide additional data to the route. For example: + + ```typescript + { path: 'search', component: SearchComponent } + ``` + + In this example, a URL like "/search?query=angular" contains a query parameter "query" with the value "angular". The SearchComponent can retrieve the value of the query parameter and use it for searching. + + **Optional parameters:** Optional parameters are used when you want to make a route parameter optional. They are represented by placing a question mark ("?") after the parameter name. Optional parameters can be useful when you have routes with varying parameters. For example: + + ```typescript + { path: 'products/:id/:category?', component: ProductComponent } + ``` + + In this example, the ":category" parameter is optional. The ProductComponent can be accessed with URLs like "/products/123" or "/products/123/electronics". If the ":category" parameter is present in the URL, it will be available in the component, otherwise, it will be undefined. + + Route parameters provide a flexible way to handle dynamic data in your Angular application. They allow you to create routes that can be easily customized and provide a seamless user experience by reflecting the current state of the application in the URL. + + **[⬆ Back to Top](#table-of-contents)** From 7082111ffdcfdcb36a48743d5b86150e061cdd98 Mon Sep 17 00:00:00 2001 From: Manthan Ankolekar Date: Tue, 14 May 2024 19:13:55 +0530 Subject: [PATCH 2/4] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5f56cbe..c0eb0fe 100644 --- a/README.md +++ b/README.md @@ -301,11 +301,11 @@ |277| [How to create a standalone component uing CLI command?](#how-to-create-a-standalone-component-uing-cli-command) |278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually) |279| [What is hydration ?](#what-is-hydration) -|280| [What is Angular Signals ?](#what-is-angular-signals) -|281| [What is Signals ?](#what-is-signals) +|280| [What is Angular Signals ?](#what-are-angular-signals) +|281| [What is Signals ?](#what-are-signals) |282| [Explain Angular Signals with example](#explain-angular-signals-with-example) |283| [What are the Route Parameters? Explain each of them.](#what-are-the-route-parameters-explain-each-of-them) -|284| []() +|284| [](#) 1. ### What is Angular Framework? From 7c9f7576c2075aebe843aee2f22edff4e61a9076 Mon Sep 17 00:00:00 2001 From: Manthan Ankolekar Date: Tue, 14 May 2024 19:20:11 +0530 Subject: [PATCH 3/4] Update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c0eb0fe..9fa1714 100644 --- a/README.md +++ b/README.md @@ -301,10 +301,10 @@ |277| [How to create a standalone component uing CLI command?](#how-to-create-a-standalone-component-uing-cli-command) |278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually) |279| [What is hydration ?](#what-is-hydration) -|280| [What is Angular Signals ?](#what-are-angular-signals) -|281| [What is Signals ?](#what-are-signals) -|282| [Explain Angular Signals with example](#explain-angular-signals-with-example) -|283| [What are the Route Parameters? Explain each of them.](#what-are-the-route-parameters-explain-each-of-them) +|280| [What are Angular Signals?](#what-are-angular-signals) +|281| [What are Signals?](#what-are-signals) +|282| [Explain Angular Signals with an example](#explain-angular-signals-with-an-example) +|283| [What are the Route Parameters? Could you explain each of them?](#what-are-the-route-parameters-could-you-explain-each-of-them) |284| [](#) 1. ### What is Angular Framework? @@ -4735,7 +4735,7 @@ **[⬆ Back to Top](#table-of-contents)** -279. ### Explain Angular Signals with example. +279. ### Explain Angular Signals with an example. 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. 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. @@ -4781,7 +4781,7 @@ **[⬆ Back to Top](#table-of-contents)** -279. ### What are the Route Parameters? Explain each of them. +279. ### What are the Route Parameters? Could you explain each of them?. 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. There are three types of route parameters in Angular: From 0d78289805fad0b92e8a0f8f01de1e4c239207a3 Mon Sep 17 00:00:00 2001 From: Manthan Ankolekar Date: Tue, 28 May 2024 13:57:40 +0530 Subject: [PATCH 4/4] update readme.md --- README.md | 53 ++++++++++++++++++++++++++--------------------------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 9fa1714..88858ca 100644 --- a/README.md +++ b/README.md @@ -302,10 +302,9 @@ |278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually) |279| [What is hydration ?](#what-is-hydration) |280| [What are Angular Signals?](#what-are-angular-signals) -|281| [What are Signals?](#what-are-signals) -|282| [Explain Angular Signals with an example](#explain-angular-signals-with-an-example) -|283| [What are the Route Parameters? Could you explain each of them?](#what-are-the-route-parameters-could-you-explain-each-of-them) -|284| [](#) +|281| [Explain Angular Signals with an example](#explain-angular-signals-with-an-example) +|282| [What are the Route Parameters? Could you explain each of them?](#what-are-the-route-parameters-could-you-explain-each-of-them) +|283| [](#) 1. ### What is Angular Framework? @@ -4619,7 +4618,7 @@ **[⬆ Back to Top](#table-of-contents)** -278. ### How to create a standalone component uing CLI command? +277. ### How to create a standalone component uing CLI command? Generate standalone component using CLI command as shown below ```bash @@ -4694,7 +4693,7 @@ **[⬆ Back to Top](#table-of-contents)** -278. ### What is hydration? +279. ### What is hydration? 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. 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 @@ **[⬆ Back to Top](#table-of-contents)** -278. ### What are Angular Signals? +280. ### What are Angular Signals? 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. **[⬆ Back to Top](#table-of-contents)** - -278. ### What are Signals? - 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. - - **[⬆ Back to Top](#table-of-contents)** - -279. ### Explain Angular Signals with an example. + +281. ### Explain Angular Signals with an example. 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. 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. - In typescript file + In TypeScript file ```typescript import { Component, OnInit } from '@angular/core'; @@ -4752,21 +4746,22 @@ styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { + count = signal(0); + doubleCount = computed(() => this.count() * 2); - count = signal(0); // Initial value of count - displayedCount = computed(() => this.count()); // Computed signal for display - - constructor() { } + constructor() {} ngOnInit() { - // Subscribe to displayedCount instead of count for updates in the template - this.displayedCount.subscribe(value => { - console.log('Displayed count changed to', value); // Optional logging for debugging - }); + // Optional logging for debugging displayedCount changes + // console.log('Displayed count changed to:', this.displayedCount()); } incrementCount() { - this.count.set(this.count() + 1); // Update count using set() for immutability + this.count.set(this.count() + 1); + } + + decrementCount() { + this.count.update((value) => Math.max(0, value - 1)); } } ``` @@ -4774,14 +4769,18 @@ ```html

Angular Signals Example

- + + -

Count: {{ count }}

+

Count: {{ count() }}

+

Double Count: {{ doubleCount() }}

``` + [Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-pirzhw?file=src%2Fmain.ts) + **[⬆ Back to Top](#table-of-contents)** -279. ### What are the Route Parameters? Could you explain each of them?. +282. ### What are the Route Parameters? Could you explain each of them?. 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. There are three types of route parameters in Angular: