Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frantallukas10/angular-v18-user-task-management
Angular fundamental v18 simple user task management
https://github.com/frantallukas10/angular-v18-user-task-management
Last synced: about 1 month ago
JSON representation
Angular fundamental v18 simple user task management
- Host: GitHub
- URL: https://github.com/frantallukas10/angular-v18-user-task-management
- Owner: frantallukas10
- License: mit
- Created: 2024-12-08T20:05:23.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-08T20:23:38.000Z (about 2 months ago)
- Last Synced: 2024-12-08T21:26:23.917Z (about 2 months ago)
- Language: TypeScript
- Size: 1.46 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular fundamentals V18
[Demo](https://angular-v18-user-task-management.vercel.app/)
- generate angular component
```bash
ng g c nameOfYourComponent
```
- String interpolation - double curly braces is one of the key features offered by Angular, when it comes to outputting content in your template.
```html
{{name}}
```
- another way property binding, here is example with dynamic path
```html
![]()
```
nice angular js feature from [zone.js](https://github.com/angular/angular/tree/main/packages/zone.js)
- cleaner way and prefer way don't use it inside html template is use getter inside ts file
```ts
get imagePath() {
return 'assets/users/' + this.selectedUser.avatar;
}
```
and use it inside html template
```html
![]()
```
- if we want to handle click event let say event biding in angular and update state here is one example
```ts
onSelectUser() {
const randomIndex = Math.floor(Math.random() * DUMMY_USERS.length);
this.selectedUser = DUMMY_USERS[randomIndex];
}
```
```html
![]()
{{ selectedUser.name }}
```
- another way and new is signal here is example for updating state by signal
(signal is stable from Angular v17)
```js
selectedUser = signal(DUMMY_USERS[randomIndex]);
// imagePath will calculate if this.selectedUser.avatar will change
imagePath = computed(() => 'assets/users/' + this.selectedUser.avatar);
onSelectUser() {
const randomIndex = Math.floor(Math.random() * DUMMY_USERS.length);
this.selectedUser.set(DUMMY_USERS[randomIndex]);
}
```
```html
![]()
{{ selectedUser().name }}
```
## angular `@Input decorator`
In Angular, components are the building blocks of the application. Communication between these components is essential for creating dynamic and interactive applications. The @Input decorator is a fundamental feature that allows a child component to receive data from its parent component.
Benefits of Using:
- Encapsulation: Keeps components independent and reusable.
- Clear Data Flow: Establishes a clear parent-to-child data flow.
- Ease of Maintenance: Simplifies debugging and updating code
Usage Steps
1. Import the Input Decorator
First, import the Input decorator from @angular/core in your child component:
2. Declare an Input Property
In the child component class, decorate the property you want to receive data with @Input:
```ts
import { Component, Input } from "@angular/core";
@Component({
selector: "app-child",
template: `
Received data: {{ data }}
`,
})
export class ChildComponent {
// required means that data has to be define where the component is used
@Input({ required: true }) data: string;
}
```
3. Bind to the Child Component in the Parent Template
In the parent component's template, bind to the child component's input property using property binding syntax:
```html
```
4. Define the Data in the Parent Component
In the parent component class, define the property that holds the data you want to pass:
```ts
@Component({
selector: "app-parent",
template: ``,
})
export class ParentComponent {
parentData: string = "Hello from Parent Component!";
}
```
- angular `input special function` same way as signal function
`input` signal function provides a new way to handle parent-to-child communication. it is more effective but The immutable and cannot be directly modified in the child.
```ts
import { Component, input } from "@angular/core";
@Component({
selector: "app-user",
imports: [],
templateUrl: "./user.component.html",
styleUrl: "./user.component.css",
})
export class UserComponent {
// inside input function you can specify default value if you need
data = input.required();
}
```
- angular `@Output decorator`
Is used to define an output property in a child component, allowing the component to emit custom events to its parent component. It plays a vital role in enabling communication from the child component to the parent component, typically through event binding.
- input 2 way binding
don't forget define import inside component ts file `imports: [FormsModule]`
regarding submit event we can simply handle it by ngSubmit which is disable browser to make auto http request...
```html
Title
Summary
Due Date
Cancel
Create
```
- @if example in html template v17
```html
@if (yourCondition) {
visible text if yourCondition is true
} @else {
visible text if yourCondition is false
}
```
or for older version we have tu use directive `*ngIf`
```html
visible text if yourCondition is true
visible text if yourCondition is false
```
- @for example in html template v17
```html
@for (task of selectedUserTasks; track task.id) {
}
```
or for older version we have tu use directive `*ngFor`
```html
```
- Content Projection
is mechanism for creating component as parent and wrap another component as children
this is parent html template
```html
```
this component is children and inside html template you can wrap it by parent
```html
```
- [Pipes](https://angular.dev/api/common/DatePipe)
Formats a date value according to locale rules
```html
```
- services decorator @Injectable({ providedIn: 'root' })
```ts
@Injectable({ providedIn: "root" })
export class TaskService {}
```
- how to use service with sharing logic and data
```ts
constructor(
private taskService: TaskService
) {}
```
or better way
```ts
private taskService = inject(TaskService);
```
## Angular modules old way
-it's a feature that mostly exists for historic reasons, though you can absolutely still use it today, if you, for example, prefer it over Standalone Components, or if you are working on some project that simply uses modules because it may be always used modules, or because it's using an older version of Angular.
```ts
@NgModule({
declarations: [
AppComponent,
// We should define all components that interact and communicate with each other here.
],
bootstrap: [AppComponent]
imports: [BrowserModule, FormsModule]
})
export class AppModule {}
```