https://github.com/leolanese/angular-component-communication
Angular (19+) Observables and Signal using @Input/@Output playground and Signal Input/Output
https://github.com/leolanese/angular-component-communication
angular httpresource observable rxjs signal typescript
Last synced: 19 days ago
JSON representation
Angular (19+) Observables and Signal using @Input/@Output playground and Signal Input/Output
- Host: GitHub
- URL: https://github.com/leolanese/angular-component-communication
- Owner: leolanese
- Created: 2025-01-24T14:09:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-04-15T12:09:49.000Z (about 2 months ago)
- Last Synced: 2025-05-06T21:20:27.682Z (26 days ago)
- Topics: angular, httpresource, observable, rxjs, signal, typescript
- Language: TypeScript
- Homepage:
- Size: 267 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular (19+) Observables and Signal using @Input/@Output playground and Signal Input/Output 🔊
## Demo
```js
- /`child-contructor-input-onchanges`
Accessing passed values from contructor() (not safe), @Input() and ngOnChanges() with SoC
- /`child`
passing P <-> C @Input/@Output with SoC
- Child-observable: Passing Observable from P -> C + Reusable Generic Service
```
---
## NOTES:
> When passing values from a P -> C component using the `@Input`, `these values are not available in the constructor` = Avoids running Angular-specific logic or accessing @Input properties, as they are not yet set.
> If you need to react to changes in @Input values beyond initialization, consider using the `ngOnChanges()` lifecycle hook
### constructor()
- Called first, before any Angular lifecycle hooks.
- Used to initialise the component instance.
- Runs before Angular has fully initialized the component.
- `Not safe access @Input values`
### ngOnInit()
- called after the constructor, after the first ngOnChanges()
- `Safe for access @Input` values
- Runs after the constructor and after Angular sets up the component's bindings.
---
## @for instead *ngFor()
> The key difference is that `@for` loops over the array value directly, while `*ngFor` gives you the array element value.
Feature: Syntax
- `ngFor`: `*ngFor="let item of items"`
- `@for`: `@for="let i from X to Y"`
```js
// instead of
- {{ suggestion }}
// better do
- {{ suggestion }}
@for (let suggestion of suggestions) {
}
```
## @for with | async pipe
```js
// instead
Loading...
// better do
@for(user of users$ | async; track user){
} @empty {
Loading...
}
```
##Â @for with $index
```js
@Component({
template: `
@for(fruit of fruits; track fruit; let index = $index) {
}
`,
})
export class FruitComponent {
fruits = ['apple', 'lemon'];
}
```
##Â @for with $first and $last
```js
@Component({
template: `
@for(fruit of fruits; track fruit; let first = $first, last = $last) {
}
`,
})
export class FruitComponent {
fruits = ['apple', 'lemon'];
}
//
//
```
---
### :100: Thanks!
#### Now, don't be an stranger. Let's stay in touch!
##### :radio_button: Linkedin: LeoLanese
##### :radio_button: Twitter: @LeoLanese
##### :radio_button: DEV.to: Blog
##### :radio_button: Questions / Suggestion / Recommendation: [email protected]