02. Core Angular Concepts

What we will learn in this post?

• 👉 Component Lifecycle
• 👉 Component Communication
• 👉 Data Binding
• 👉 Template Syntax
• 👉 Using Pipes
• 👉 Conclusion!

Angular Component Lifecycle 🌱

Angular components have a lifecycle – a series of stages they go through from creation to destruction. Understanding this lifecycle is crucial for writing efficient and well-behaved applications. Let’s explore some key lifecycle hooks.

Key Lifecycle Hooks 🎣

Angular provides several hooks, but we’ll focus on two important ones:

ngOnInit()

This hook is called after the component’s inputs are initialized, and the component’s data-binding is complete. It’s the ideal place to perform any initial setup tasks.

• Purpose: Initialize component data, subscribe to services, fetch data, etc.
• Example: Fetching data from an API.

ngOnInit() {
  this.myService.getData().subscribe(data => this.data = data);
}

ngOnDestroy()

This hook is called just before Angular destroys the component. Use it to clean up resources to prevent memory leaks.

• Purpose: Unsubscribe from Observables, clear timers, detach event listeners.
• Example: Unsubscribing from an Observable.

ngOnDestroy() {
  this.dataSubscription.unsubscribe();
}

Visualizing the Lifecycle 📊

graph LR
    classDef lifecycleStyle fill:#673AB7,stroke:#512DA8,color:#FFFFFF,font-size:14px,stroke-width:2px,rx:10px,shadow:3px;
    classDef decisionStyle fill:#4CAF50,stroke:#388E3C,color:#FFFFFF,font-size:14px,stroke-width:2px,rx:10px,shadow:3px;
    classDef destructionStyle fill:#FF5722,stroke:#E64A19,color:#FFFFFF,font-size:14px,stroke-width:2px,rx:10px,shadow:3px;

    A[⚙️ Component Creation] --> B[🔄 ngOnInit];
    B --> C{✅ Component in Use?};
    C -- Yes --> C;
    C -- No --> D[🗑️ ngOnDestroy];
    D --> E[❌ Component Destruction];

    class A lifecycleStyle;
    class B lifecycleStyle;
    class C decisionStyle;
    class D destructionStyle;
    class E destructionStyle;

Remember: Always unsubscribe from Observables in ngOnDestroy to prevent memory leaks!

Further Reading: For more detailed information on the Angular component lifecycle and other lifecycle hooks, check out the official Angular documentation: https://angular.io/guide/lifecycle-hooks

This simplified explanation hopefully provides a good overview. Remember to explore the official documentation for more comprehensive information!

Angular Component Interaction: A Friendly Guide 🎉

Angular components often need to communicate with each other. Think of it like people talking in a team! We use @Input(), @Output(), and Event Emitters to facilitate this.

Data Passing with @Input() ➡️

@Input() is like giving a component some information. The parent component provides data to the child component.

Example:

Imagine a parent component displaying a user’s name and a child component displaying the user’s details.

// Parent Component
<app-user-details [userName]="userName"></app-user-details>

// Child Component
@Component({...})
export class UserDetailsComponent {
  @Input() userName: string;
}

Here, userName is passed from the parent to the child using [userName].

Event Handling with @Output() and Event Emitters ⬅️

@Output() allows a child component to notify the parent when something happens. This is done using an EventEmitter.

Example:

Let’s say the child component has a button to save user data. Clicking it should trigger an action in the parent.

// Child Component
@Component({...})
export class UserDetailsComponent {
  @Output() userSaved = new EventEmitter<any>(); //Event emitter

  onSave(){
    this.userSaved.emit({userName: this.userName, ...otherData});
  }
}

//Parent Component
<app-user-details (userSaved)="handleUserSave($event)"></app-user-details>

handleUserSave(userData: any){
  //Handle the saved user data
}

The (userSaved) in the parent binds to the userSaved EventEmitter in the child. When userSaved.emit() is called, the handleUserSave function in the parent is triggered.

Visual Representation

graph LR
    classDef parentStyle fill:#03A9F4,stroke:#0288D1,color:#FFFFFF,font-size:14px,stroke-width:2px,rx:10px,shadow:3px;
    classDef childStyle fill:#FFC107,stroke:#FFA000,color:#FFFFFF,font-size:14px,stroke-width:2px,rx:10px,shadow:3px;
    classDef dataEventStyle fill:#4CAF50,stroke:#388E3C,color:#FFFFFF,font-size:14px,stroke-width:2px,rx:50px,shadow:3px;

    A[👨‍👩‍👧 Parent Component] --> B[👶 Child Component];
    B --> C((🔄 Data/Event));
    C --> A;

    class A parentStyle;
    class B childStyle;
    class C dataEventStyle;

This shows data flowing from parent to child (@Input()) and events flowing from child to parent (@Output()).

For more information:

• Angular Official Documentation

Remember, using these methods keeps your components modular and easy to maintain! 👍

Angular Data Binding: A Friendly Guide 🚀

Angular makes it easy to connect your component’s data with the user interface. This is done through data binding. Let’s explore the key types:

Property Binding ➡️

Property binding updates component properties from the parent component. Think of it as sending data one-way from parent to child.

Example:

<p>The current time is: </p>

In the component’s TypeScript:

currentTime = new Date()

Here, the currentTime variable’s value is displayed. If currentTime changes, the paragraph updates automatically.

Event Binding ⬅️

Event binding lets you respond to user interactions like button clicks. Data flows one-way from the child to the parent.

Example:

<button (click)="handleClick()">Click Me!</button>

In the component’s TypeScript:

handleClick() {
  alert('Button clicked!');
}

Clicking the button triggers the handleClick function.

Two-Way Binding 🔄

Two-way binding synchronizes data between the component and the template. Changes in either direction update the other. This uses the [(ngModel)] directive.

Example:

<input [(ngModel)]="userName" type="text" />
<p>Your name is: </p>

Typing in the input box immediately updates userName in the component, and vice-versa.

Key Differences Summarized:

Binding Type	Data Flow	Directive
Property	Parent to Child	[property]="expression"
Event	Child to Parent	(event)="expression"
Two-Way	Both ways	[(ngModel)]="expression"

For more in-depth information, check out the official Angular documentation: https://angular.io/guide/template-syntax

Remember, understanding data binding is fundamental to building dynamic Angular applications! ✨

Angular Template Syntax: A Friendly Guide 🎉

Angular’s template syntax lets you create dynamic HTML. It uses special directives to control what’s shown and how it looks. Let’s explore some key players!

Structural Directives 🏗️

These directives change the DOM structure.

ngIf Conditional Rendering 👀

This shows or hides elements based on a condition:

<div *ngIf="showHero; else noHero">Hero is visible!</div>
<ng-template #noHero> Hero is hidden! </ng-template>

This shows “Hero is visible!” only if the showHero variable is true. #noHero is a template reference variable that can be used to render a different view when showHero is false.

ngFor Looping Through Data 🔁

Iterates over an array to display its contents:

<ul>
  <li *ngFor="let hero of heroes"></li>
</ul>

This creates a list item (<li>) for each item in the heroes array.

Attribute Directives ✨

These change the appearance or behavior of elements.

ngClass Dynamic Styling 🎨

Applies CSS classes conditionally:

<p [ngClass]="{'highlight': isImportant, 'error': isError}">
  This text has dynamic styling!
</p>

The highlight and error classes are applied based on the values of isImportant and isError.

ngStyle Dynamic Styling 🖌️

Applies CSS styles dynamically:

<h1 [ngStyle]="{'color': myColor, 'font-size': fontSize + 'px'}">
  Dynamically styled header!
</h1>

Remember to import necessary modules in your component!

For more detailed information and further examples:

• Angular Official Documentation

This is just a taste of Angular’s powerful template syntax. Explore and build amazing things!

Angular Pipes: Data Transformation Made Easy 💫

Angular pipes are a fantastic way to format and transform data directly within your templates. This keeps your component logic clean and your templates readable. Think of them as mini-functions for your data!

Common Built-in Pipes

Angular provides several built-in pipes for common tasks:

• uppercase: Converts text to uppercase. hello outputs HELLO.
• lowercase: Converts text to lowercase. WORLD outputs world.
• date: Formats dates. `` might output 10/26/2023.
• currency: Formats numbers as currency. `` might output $19.99.
• number: Formats numbers with specified precision and notation. `` might output 19.99.

Example: Formatting a Date

<p>Today is: </p>

Creating Custom Pipes 🛠️

Creating a custom pipe lets you handle specific formatting needs not covered by built-ins. Let’s say you want to highlight certain keywords:

import { Pipe, PipeTransform } from "@angular/core"

@Pipe({
  name: "highlight",
})
export class HighlightPipe implements PipeTransform {
  transform(value: string, args: string): string {
    return value.replace(new RegExp(args, "gi"), `<mark>$&</mark>`)
  }
}

This highlight pipe wraps matches in <mark> tags. In your template:

<p></p>

This will highlight all instances of “Angular” in myText.

More on Angular Pipes

Note: Remember to declare your custom pipe in your module’s declarations array.

This simple guide showcases the power and ease of use of Angular pipes for data transformation. They significantly enhance the readability and maintainability of your Angular applications.

Conclusion

So there you have it! We hope you enjoyed this post and found it helpful 😊. We’re always looking to improve, so we’d love to hear your thoughts! What did you think? Anything you’d like to see more of? Let us know in the comments below 👇. Your feedback is super valuable to us and helps us create even better content in the future! We can’t wait to read what you have to say! 🎉