Skip to content

Commit 079bee6

Browse files
authored
Merge pull request #88 from manthanank/master
Update README.md
2 parents cb763d3 + 0d78289 commit 079bee6

File tree

1 file changed

+96
-3
lines changed

1 file changed

+96
-3
lines changed

README.md

+96-3
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,10 @@
301301
|277| [How to create a standalone component uing CLI command?](#how-to-create-a-standalone-component-uing-cli-command)
302302
|278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually)
303303
|279| [What is hydration ?](#what-is-hydration)
304-
|279| [](#)
304+
|280| [What are Angular Signals?](#what-are-angular-signals)
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| [](#)
305308

306309
1. ### What is Angular Framework?
307310

@@ -4615,7 +4618,7 @@
46154618
46164619
**[⬆ Back to Top](#table-of-contents)**
46174620
4618-
278. ### How to create a standalone component uing CLI command?
4621+
277. ### How to create a standalone component uing CLI command?
46194622
46204623
Generate standalone component using CLI command as shown below
46214624
```bash
@@ -4689,7 +4692,8 @@
46894692
```
46904693
46914694
**[⬆ Back to Top](#table-of-contents)**
4692-
278. ### What is hydration?
4695+
4696+
279. ### What is hydration?
46934697
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.
46944698
46954699
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.
@@ -4719,3 +4723,92 @@
47194723
```
47204724
47214725
**[⬆ Back to Top](#table-of-contents)**
4726+
4727+
280. ### What are Angular Signals?
4728+
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.
4729+
4730+
**[⬆ Back to Top](#table-of-contents)**
4731+
4732+
281. ### Explain Angular Signals with an example.
4733+
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.
4734+
4735+
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.
4736+
4737+
In TypeScript file
4738+
4739+
```typescript
4740+
import { Component, OnInit } from '@angular/core';
4741+
import { signal, computed } from '@angular/core'; // Import from '@angular/core'
4742+
4743+
@Component({
4744+
selector: 'my-app',
4745+
templateUrl: './app.component.html',
4746+
styleUrls: ['./app.component.css']
4747+
})
4748+
export class AppComponent implements OnInit {
4749+
count = signal(0);
4750+
doubleCount = computed(() => this.count() * 2);
4751+
4752+
constructor() {}
4753+
4754+
ngOnInit() {
4755+
// Optional logging for debugging displayedCount changes
4756+
// console.log('Displayed count changed to:', this.displayedCount());
4757+
}
4758+
4759+
incrementCount() {
4760+
this.count.set(this.count() + 1);
4761+
}
4762+
4763+
decrementCount() {
4764+
this.count.update((value) => Math.max(0, value - 1));
4765+
}
4766+
}
4767+
```
4768+
In HTML file
4769+
```html
4770+
<h1>Angular Signals Example</h1>
4771+
4772+
<button (click)="incrementCount()" style="margin-right: 10px;">Increment Count</button>
4773+
<button (click)="decrementCount()">Decrement Count</button>
4774+
4775+
<p>Count: {{ count() }}</p>
4776+
<p>Double Count: {{ doubleCount() }}</p>
4777+
```
4778+
4779+
[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-pirzhw?file=src%2Fmain.ts)
4780+
4781+
**[⬆ Back to Top](#table-of-contents)**
4782+
4783+
282. ### What are the Route Parameters? Could you explain each of them?.
4784+
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.
4785+
4786+
There are three types of route parameters in Angular:
4787+
4788+
**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:
4789+
4790+
```typescript
4791+
{ path: 'users/:id', component: UserComponent }
4792+
```
4793+
4794+
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.
4795+
4796+
**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:
4797+
4798+
```typescript
4799+
{ path: 'search', component: SearchComponent }
4800+
```
4801+
4802+
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.
4803+
4804+
**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:
4805+
4806+
```typescript
4807+
{ path: 'products/:id/:category?', component: ProductComponent }
4808+
```
4809+
4810+
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.
4811+
4812+
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.
4813+
4814+
**[⬆ Back to Top](#table-of-contents)**

0 commit comments

Comments
 (0)