Tips

1. Separate words within a file name with hyphens (-). For example, a component named UserProfile has a file name user-profile.ts.




2. For unit tests, end file names with .spec.ts. For example, the unit test file for the UserProfile component has the file name user-profile.spec.ts.




3. All of your Angular UI code (TypeScript, HTML, and styles) should live inside a directory named src.
   
   Code that's not related to UI, such as configuration files or scripts, should live outside the src directory.




4. The code to start up, or bootstrap, an Angular application should always live in a file named main.ts.
   
   This represents the primary entry point to the application.




5. Angular components consist of a TypeScript file and, optionally, a template and one or more style files. You should group these together in the same directory.




6. Avoid creating subdirectories based on the type of code that lives in those directories.
   
   For example, avoid creating directories like components/, directives/, and services/.




7. Prefer the inject() function over constructor parameter injection.




8. Use protected on class members that are only used by a component's template.



@Component({
    ...,
    template: `
{{ fullName() }}
`,
})
export class UserProfile {
    firstName = input();
    lastName  = input();
    // `fullName` is not part of the component's public API, but is used in the template.
    protected fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
}





9. Use readonly for properties that shouldn't change.



@Component({/* ... */})
export class UserProfile {
    readonly userId    = input();
    readonly userSaved = output();
    readonly userName  = model();
}

Basics about Signals

1. What is a signal?
   
   A signal is a reactive value container that automatically notifies Angular when its content changes.
   
   Unlike normal class properties, signals are tracked by Angular's change detection system — any component using them updates automatically.
   
   Example:

   import { signal, Component } from '@angular/core';
   
   @Component({
       selector: 'counter-example',
       template: `
           <h3>Count: {{ count() }}</h3>
           <button (click)="increment()">+</button>
       `,
       standalone: true,
   })
   export class CounterExample {
       count = signal(0);
       increment() {
           this.count.update(v => v + 1);
       }
   }
   

   
   Signals are functions — you read them by calling like count(), not count.




2. Writable signals
   
   A writable signal is a normal signal created with signal(). It can be changed with:
   
   
   • .set(newValue) – replace the value directly
   
   
   • .update(fn) – change it based on its current value
   
   Example:

   const counter = signal(0);
   
   counter.set(10);          // sets value to 10
   counter.update(v => v+1); // now 11
   console.log(counter());   // prints 11
   





3. Computed signals
   
   Computed signals are read-only values derived from one or more other signals. They automatically recalculate when any of their dependencies change.
   
   Example:

   import { signal, computed } from '@angular/core';
   
   const first = signal('Hwang');
   const last  = signal('Fu');
   
   const fullName = computed(() => `${first()} ${last()}`);
   
   console.log(fullName());   // "Hwang Fu"
   
   last.set('Fucius');
   console.log(fullName());   // "Hwang Fucius" – updated automatically
   





4. Effects
   
   An effect() runs a piece of code automatically whenever the signals it reads change. Useful for logging, animations, or syncing values.
   
   Example:

   import { signal, effect } from '@angular/core';
   
   const count = signal(0);
   
   effect(() => {
       console.log('Count changed:', count());
   });
   
   count.set(1);  // console logs: Count changed: 1
   count.set(2);  // console logs: Count changed: 2
   

   
   Angular automatically cleans up effects when their owner component is destroyed.




5. Inputs and signals
   
   You can also create component inputs that behave like signals using input().
   
   Example:

   @Component({
       selector: 'user-card',
       template: `<p>Hello, {{ name() }}!</p>`,
   })
   export class UserCard {
       name = input('Anonymous');   // signal-style input with default
   }
   

   
   
   • input() → for reading input signals
   • output() → for emitting events
   • model() → for two-way binding (v18+)




6. Readonly vs writable signals
   
   A computed signal is readonly by design, meaning you cannot call .set() or .update() on it.
   
   Writable signals (signal()) can both be read and updated.




7. Accessing signals from the template
   
   In templates, signals behave like functions — you must call them:

   <h2>{{ count() }}</h2>   <!-- ✅ correct -->
   <h2>{{ count }}</h2>     <!-- ❌ won't update -->
   

   
   Angular automatically re-renders that part of the template when the signal changes.




8. When to use signals?
   
   
   • For local component state (form inputs, toggles, UI flags)
   
   
   • For derived/computed data
   
   
   • For lightweight reactivity without external stores
   
   
   • Instead of RxJS BehaviorSubject for simple cases

Linked Signals

1. What is a linked signal?
   
   A linkedSignal() is a special kind of signal that stays connected to another signal.
   
   When the source signal changes, the linked one also updates automatically.
   
   Think of it as a "live copy" or a "mirror" of another signal — but one that can also transform or filter the value.
   
   Example:

   import { signal, linkedSignal } from '@angular/core';
   
   const name = signal('Hwangfu');
   
   // Linked signal that always follows `name`
   const upperName = linkedSignal(() => name().toUpperCase());
   
   console.log(upperName()); // "HWANGFU"
   
   name.set('Fucius');
   console.log(upperName()); // "FUCIUS" – updated automatically
   





2. Why not just use computed()?
   
   computed() and linkedSignal() look similar, but there's one key difference:
   
   
   • computed() → read-only, you can't change its value directly
   
   
   • linkedSignal() → can also be written to (you can modify it)
   
   Example:

   const count = signal(0);
   
   // Computed: only reads from count
   const double = computed(() => count() * 2);
   
   // Linked: can read and write
   const mirror = linkedSignal(() => count(), {
       // define how writing back should work
       set: (newVal) => count.set(newVal),
   });
   
   mirror.set(5);
   console.log(count()); // 5
   





3. When to use linked signals?
   
   Linked signals are useful when two parts of your code need to share the same data, but maybe in a slightly different form.
   
   For example, if you want to edit a copy of a user object without losing the original right away:

   const activeUser = signal({ id: 1, name: 'Alice' });
   
   // Create a linked version for editing
   const editUser = linkedSignal(() => activeUser(), {
       // treat users with the same id as the same object
       equal: (a, b) => a.id === b.id,
   });
   
   console.log(editUser());  // { id: 1, name: 'Alice' }
   
   editUser.update(u => ({ ...u, name: 'Alicia' }));
   console.log(editUser().name);  // "Alicia"
   
   // if `activeUser` changes, `editUser` also updates
   activeUser.set({ id: 1, name: 'Alina' });
   console.log(editUser().name);  // "Alina"
   





4. Basic syntax patterns
   
   You can define a linked signal in two common ways:
   
   1. Simple form

   const copy = linkedSignal(() => source());
   

   2. Detailed form

   const copy = linkedSignal({
       source: source,
       computation: (value) => value,
       equal: (a, b) => a.id === b.id,
   });
   

   
   The detailed form gives you more control: you can define how values are compared, or how they're computed.

What does a CSS selector component do?

1. When you write @Component({ selector: 'button[type="reset"]' }), Angular matches all elements in the DOM that fit this CSS selector.



2. If an element matches, Angular creates your component and attaches it to that element.



3. The element is NOT replaced. It stays the original tag. Angular just uses it as the host.



4. Example:

   @Component({
       selector: 'button[type="reset"]',
       template: '',
   })
   export class ResetButton {}
   

   
   Any <button type="reset"> becomes a ResetButton component host.

Extend the example: make the reset button actually do things

1. Below is a ResetButton component that:
   
   
   • adds classes (for styling)
   
   
   • supports variants (primary / ghost)
   
   
   • supports a loading state (shows a spinner, disables clicks)
   
   
   • sets accessibility attributes (aria-disabled, aria-busy)
   
   
   • keeps the original button text via <ng-content>



2. TypeScript (component):

   import { Component, HostBinding, HostListener, Input } from '@angular/core';
   
   @Component({
       selector: 'button[type="reset"]',
       // The host element IS the <button>. We only render inside it.
       template: `
           <span class="content" [class.hidden]="loading">
               <ng-content></ng-content>
           </span>
           <span class="spinner" *ngIf="loading" aria-hidden="true">⏳</span>
       `,
       styles: [`
           :host {
               /* base look */
               font: inherit;
               border-radius: 6px;
               padding: .5rem .9rem;
               cursor: pointer;
               border: 1px solid transparent;
               display: inline-flex;
               align-items: center;
               gap: .5rem;
               transition: background-color .15s ease, border-color .15s ease, color .15s ease;
           }
   
           /* variants via classes on :host */
           :host(.primary) {
               background: #0d6efd;
               color: white;
           }
           :host(.primary:hover) { background: #0b5ed7; }
   
           :host(.ghost) {
               background: transparent;
               color: #0d6efd;
               border-color: #0d6efd;
           }
           :host(.ghost:hover) { background: rgba(13,110,253,.08); }
   
           /* disabled look */
           :host(.disabled) {
               opacity: .55;
               cursor: not-allowed;
               pointer-events: none;
           }
   
           .spinner { display: inline-flex; }
           .content.hidden { visibility: hidden; } /* reserve space so width doesn't jump */
       `],
       standalone: true,
   })
   export class ResetButton {
       /** Visual variant */
       @Input() variant: 'primary' | 'ghost' = 'primary';
   
       /** Loading state: blocks clicks, shows spinner, updates aria */
       @Input() loading = false;
   
       /** Disable state (useful if you want to disable the reset button) */
       @Input() disabled = false;
   
       /** Reflect variant and states as CSS classes on the host <button> */
       @HostBinding('class')
       get hostClasses(): string {
           const v = this.variant ?? 'primary';
           return [v, this.disabled || this.loading ? 'disabled' : ''].filter(Boolean).join(' ');
       }
   
       /** Keep native semantics but add A11y hints */
       @HostBinding('attr.aria-disabled') get ariaDisabled() { return String(this.disabled); }
       @HostBinding('attr.aria-busy')     get ariaBusy()     { return String(this.loading); }
   
       /** Optional: ensure the host has type="reset" (safety if HTML missed it) */
       @HostBinding('attr.type') readonly type = 'reset';
   
       /** Block clicks when disabled/loading */
       @HostListener('click', ['$event'])
       onClick(ev: MouseEvent) {
           if (this.disabled || this.loading) {
               ev.preventDefault();
               ev.stopImmediatePropagation();
           }
       }
   }
   




3. Usage examples:

   <!-- Matches selector because it's a button[type="reset"] -->
   <button type="reset" variant="primary">Reset form</button>
   
   <!-- Switch variant -->
   <button type="reset" variant="ghost">Clear</button>
   
   <!-- Loading state -->
   <button type="reset" variant="primary" [loading]="true">Resetting…</button>
   
   <!-- Disabled state -->
   <button type="reset" [disabled]="true">Disabled reset</button>
   
   <!-- With projected rich content -->
   <button type="reset" variant="primary">
       <span class="hl-grey-fg">↺</span>
       Reset filters
   </button>
   




4. What changed compared to the minimal skeleton:
   
   
   • @Input() values (variant, loading, disabled) so templates can control the button.
   
   
   • @HostBinding adds/removes CSS classes on the host <button>.
   
   
   • @HostListener('click') prevents clicks when disabled/loading.
   
   
   • type="reset" is enforced, so even if HTML forgot it, it behaves as a reset button.
   
   
   • Simple styles are scoped to this component only.

What does selector: 'drop-zone, [dropzone]' mean?

1. This selector matches two things:
   
   
   • <drop-zone></drop-zone>
   
   
   • Any element with a dropzone attribute, like <div dropzone>




2. Both become hosts for the DropZone component.



3. Example:

   @Component({
       selector: 'drop-zone, [dropzone]',
       template: '',
   })
   export class DropZone {}
   




4. The host element is NOT replaced, the component renders inside it.

How to define a custom attribute (Angular Input)?

1. You define a custom attribute using @Input().



2. This does not create a real DOM attribute unless you bind it.



3. Example:

   @Component({
       selector: 'drop-zone',
       template: '',
   })
   export class DropZone {
       @Input() mode: 'files' | 'links' | 'images' = 'files';
   }
   

   Usage:

   <drop-zone></drop-zone>                (uses default: mode = "files")
   <drop-zone mode="links"></drop-zone>   (sets mode = "links")
   

How to show the custom Input as a real HTML attribute?

1. Use @HostBinding('attr.<attribute-name>').



2. This makes the Input appear in the DOM inspector.



3. Example:

   @Directive({
       selector: '[dropzone]',
   })
   export class DropzoneDirective {
       @Input() dropzone: string = 'files';
   
       @HostBinding('attr.dropzone')
       get attrValue() {
           return this.dropzone;
       }
   }
   

   Resulting DOM:

   <div dropzone="files"></div>

Default boolean attribute with true/false behavior

1. Use booleanAttribute transform.



2. This makes appResizable behave like a proper boolean.



3. Example:

   @Directive({
       selector: '[appResizable]',
   })
   export class ResizableDirective {
       @Input({ alias: 'appResizable', transform: booleanAttribute })
       resizable = true;
   
       @HostBinding('attr.data-resizable')
       get data() {
           return String(this.resizable);
       }
   }
   

   Usage:

   <div appResizable></div>            (true by default)
   <div appResizable="true"></div>     (true)
   <div [appResizable]="false"></div>  (false)
   

Setting a default DOM attribute directly

1. If you just want an element to always have an attribute, bind it with HostBinding.



2. Example: default type="reset" for any button with a directive.

   @Directive({
       selector: 'button[appResetDefault]',
   })
   export class ResetDefaultDirective {
       @HostBinding('attr.type') type = 'reset';
   }
   




3. Usage:

   <button appResetDefault>Clear</button>

   This becomes:

   <button type="reset">Clear</button>

Can multiple components be applied to one element?

1. No — only one component can attach to a single element.



2. Directives can stack, but components cannot.

Component Selectors

1. What is a component selector?


• The selector tells Angular where to place a component in the DOM.


• It lives in the @Component({ ... }) metadata:

@Component({
    selector: 'app-user-card',
    template: `<p>User card works</p>`,
})
export class UserCard {}



• Every time Angular sees <app-user-card> in a template, it creates a UserCard component there.


• The element itself becomes the host of the component. It is not replaced.



2. Element selectors


• This is the most common style.


• The selector looks like a custom HTML tag name:

@Component({
    selector: 'app-profile',
    template: `<h2>Profile</h2>`,
})
export class ProfileComponent {}

<!-- Usage in another template -->
<app-profile></app-profile>



• Use kebab-case (lowercase with dashes): app-profile, user-card, etc.


• Start with a prefix like app- (you can customize your own) to avoid conflicts with future HTML tags.



3. Attribute selectors


• An attribute selector matches normal HTML elements that have a certain attribute.


• Example:

@Component({
    selector: '[appPanel]',
    template: `<ng-content></ng-content>`,
})
export class PanelComponent {}

<!-- Usage -->
<section appPanel>
    Panel content
</section>



• Here, the host is the existing <section> element.


• Use attribute selectors when you want to "enhance" an existing element, not introduce a new tag.



4. Multiple selectors


• You can combine selectors with commas.


• Example (similar to your drop zone example):

@Component({
    selector: 'drop-zone, [dropzone]',
    template: '<ng-content></ng-content>',
})
export class DropZoneComponent {}

<!-- Both usages match the same component -->
<drop-zone>Drop files here</drop-zone>

<div dropzone>Drop files here</div>



• Both an element <drop-zone> and any element with the dropzone attribute become hosts for the same component.



5. Using CSS selectors


• The selector field accepts valid CSS selectors.


• For example, matching all reset buttons:

@Component({
    selector: 'button[type="reset"]',
    template: '<ng-content></ng-content>',
})
export class ResetButtonComponent {}

<button type="reset">Reset form</button>



• Every <button type="reset"> now becomes a ResetButtonComponent host.


• Be careful with very broad selectors like div or button, they can match too many elements and make templates confusing.



6. One component per element


• Only one component can attach to a single element.


• Directives (like attribute directives) can stack, but components cannot.


• If two component selectors both match the same element, Angular will throw an error.



7. Naming and best practices


• Use a clear prefix (e.g. app-, admin-, shared-).


• Element selectors for main UI blocks:

  
  app-header, app-footer, app-user-card
  



• Attribute selectors for behavior-like components or directive-style helpers:

  
  [appPanel], [appResetDefault], [dropzone]
  



• Keep selectors specific enough so it is obvious where a component is used.


• Do not reuse the same selector name for different components.



8. How Angular uses the selector


• During compilation, Angular scans your templates.


• When it finds something that matches a component's selector, it:
  • Creates an instance of that component,
  • Attaches it to the matching DOM element (host),
  • Renders the component's template inside that host.


• The host element is kept. Angular only controls what is rendered inside it and its attributes / classes.

Basics on Styling Components

1. Where do component styles live?


• You can write styles directly in the component, or in a separate file.


• Inline styles (small components):

@Component({
    selector: 'app-user-card',
    template: `<div class="card">User card</div>`,
    styles: [`
        .card {
            padding: 1rem;
            border-radius: .5rem;
            border: 1px solid #ddd;
        }
    `],
})
export class UserCard {}



• Separate CSS/SCSS file (bigger components):

@Component({
    selector: 'app-user-card',
    templateUrl: './user-card.component.html',
    styleUrls: ['./user-card.component.css'],
})
export class UserCard {}



• Use inline styles for quick examples or tiny components.


• Use styleUrls with a .css or .scss file for anything non-trivial.



2. Component styles are local


• By default, styles in a component only apply to that component's template.


• This means:
  • They do not "leak" into other components.
  • You can reuse simple class names like .title in many components without conflicts.

@Component({
    selector: 'app-a',
    template: `<h2 class="title">A</h2>`,
    styles: [`.title { color: red; }`],
})
export class AComponent {}

@Component({
    selector: 'app-b',
    template: `<h2 class="title">B</h2>`,
    styles: [`.title { color: blue; }`],
})
export class BComponent {}

<app-a></app-a>
<app-b></app-b>



• Here, A is red and B is blue, even though both use the same class name.



3. Styling the host element with :host


• The :host selector targets the outer element that holds your component.


• Example (similar to your reset button):

@Component({
    selector: 'app-pill-badge',
    template: `<ng-content></ng-content>`,
    styles: [`
        :host {
            display: inline-block;
            padding: .2rem .6rem;
            border-radius: 999px;
            background: #f0f4ff;
            color: #1f3b8f;
            font-size: .8rem;
        }
    `],
    standalone: true,
})
export class PillBadge {}

<app-pill-badge>New</app-pill-badge>



• :host styles the <app-pill-badge> element itself.


• Use :host for width, padding, display, border, etc. of the component's root element.



4. Styling based on host classes: :host(.some-class)


• You can change styles depending on classes applied to the host element.


• Example:

@Component({
    selector: 'app-alert',
    template: `<ng-content></ng-content>`,
    styles: [`
        :host {
            display: block;
            padding: .75rem 1rem;
            border-radius: 4px;
        }

        :host(.info) {
            background: #e7f1ff;
            color: #0b4f9c;
        }

        :host(.error) {
            background: #ffe5e5;
            color: #a30000;
        }
    `],
    standalone: true,
})
export class AlertComponent {}

<app-alert class="info">Information</app-alert>
<app-alert class="error">Something went wrong</app-alert>



• The same component can look different based on classes you add.


• This pattern is nice for variants like primary, ghost, warning, etc.



5. Binding classes and styles from TypeScript


• You can toggle CSS classes using property bindings.


• Simple class binding:

<button
    class="btn"
    [class.btn-primary]="primary"
    [class.btn-disabled]="disabled"
>
    Save
</button>

@Component({
    selector: 'app-save-button',
    templateUrl: './save-button.component.html',
})
export class SaveButtonComponent {
    primary = true;
    disabled = false;
}



• Style binding works similarly:

<div [style.opacity]="disabled ? 0.5 : 1">Content</div>



• Use these bindings when styles depend on component state (loading, error, active, etc.).



6. Component styles vs global styles


• Global styles live in files like styles.css at the root of your app.


• Use global styles for:
  • Page background, base font, body margin, etc.
  • Theme variables (colors, spacing, typography).
  • Reset/normalize styles.

/* styles.css */
html, body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #fafafa;
}



• Use component styles for:
  • Buttons, cards, forms, and layout that belong to one component.
  • Anything that should not affect the whole app.



7. Light introduction to :host-context()


• :host-context() lets you style a component differently depending on something outside of it.


• Example: dark mode class on a parent element:

@Component({
    selector: 'app-box',
    template: `<ng-content></ng-content>`,
    styles: [`
        :host {
            display: block;
            padding: 1rem;
            background: white;
            color: black;
        }

        :host-context(.dark-mode) {
            background: #1f2933;
            color: #f9fafb;
        }
    `],
})
export class BoxComponent {}

<div class="dark-mode">
    <app-box>This box appears in dark mode</app-box>
</div>



• This is helpful if you have a global "theme" class but still want components to react to it.

Basics on Input Properties

1. What are input properties?


• @Input() lets a parent component send data down to a child component.


• It works just like passing arguments into a function, but through HTML attributes.


• Example:

@Component({
    selector: 'app-greeting',
    template: `<h3>Hello, {{ name }}!</h3>`,
})
export class GreetingComponent {
    @Input() name = 'Guest';   // receives value from parent
}

<!-- Parent template -->
<app-greeting name="Alice"></app-greeting>
<app-greeting name="Bob"></app-greeting>



• The parent sets name just like a normal HTML attribute.


• Angular automatically passes that value into the child component's @Input() field.



2. Binding expressions to inputs


• You can also bind dynamic data using square brackets [].


• This lets you send variables, not just strings.

@Component({
    selector: 'app-parent',
    template: `
        <app-greeting [name]="userName"></app-greeting>
    `,
})
export class ParentComponent {
    userName = 'Hwangfucius';
}




3. Setting default values


• If the parent does not pass a value, the default value in the child is used.


• Example:

@Component({
    selector: 'app-user-card',
    template: `<p>User: {{ name }} ({{ role }})</p>`,
})
export class UserCardComponent {
    @Input() name = 'Anonymous';
    @Input() role = 'Viewer';
}

<app-user-card></app-user-card>
<app-user-card name="Alice" role="Admin"></app-user-card>



• The first card uses defaults. The second one overrides both values.



4. Renaming an input


• Sometimes, you want to expose a different name in HTML than in your class.


• You can do this by giving @Input() a string argument:

@Component({
    selector: 'app-book',
    template: `<p>Title: {{ title }}</p>`,
})
export class BookComponent {
    @Input('bookTitle') title = '';
}

<app-book bookTitle="The Hobbit"></app-book>



• Here, the HTML uses bookTitle, but inside the component, the field name is title.



5. Input type conversion (transforms)


• Starting from Angular 16+, you can add simple type transformations directly in the @Input() decorator.


• Example — converting attribute values into booleans:

import { Component, Input, booleanAttribute } from '@angular/core';

@Component({
    selector: 'app-toggle',
    template: `<button>Enabled: {{ enabled }}</button>`,
})
export class ToggleComponent {
    @Input({ transform: booleanAttribute }) enabled = false;
}

<app-toggle enabled></app-toggle>
<app-toggle enabled="false"></app-toggle>
<app-toggle></app-toggle>



• The booleanAttribute helper makes enabled behave like a real HTML boolean attribute.


• The first one is true, the others are false.



6. Signal-style inputs (Angular 17+)


• You can also define inputs as reactive signals using input().


• This makes them automatically re-render when updated, no need for change detection tricks.

import { Component, input } from '@angular/core';

@Component({
    selector: 'app-profile',
    template: `<p>Welcome, {{ name() }}!</p>`,
})
export class ProfileComponent {
    name = input('Guest');
}

<app-profile name="Hwangfucius"></app-profile>



• It behaves like @Input(), but integrates perfectly with the Angular signals system.


• In templates, signal inputs must be called like functions ({{ name() }}).



7. Validating and reacting to input changes


• Sometimes, you want to run logic whenever an input changes.


• Two simple ways:

// 1. Use a setter
@Input()
set count(value: number) {
    console.log('Count changed to', value);
}

// 2. Use ngOnChanges (classic lifecycle hook)
ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
}



• Setters are simpler for one property, ngOnChanges works if you have many inputs.

Basics on Output Properties

1. What are output properties?


• @Output() lets a child component send data back to its parent.


• They are used for custom events — things that happen inside the child component that the parent wants to know about.


• For example: a button click, a form submission, or a value change.

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-like-button',
    template: `<button (click)="like()">Like</button>`,
})
export class LikeButtonComponent {
    @Output() liked = new EventEmitter<void>();

    like() {
        console.log('Button clicked!');
        this.liked.emit();
    }
}

<!-- Parent component -->
<app-like-button (liked)="onLiked()"></app-like-button>



• The child emits an event, and the parent listens with parentheses (liked).


• This is the exact reverse of how @Input() works.



2. Sending data with the event


• You can include data when you emit an event, not just a signal that something happened.


• Example: passing the current like count.

@Component({
    selector: 'app-like-counter',
    template: `<button (click)="addLike()">{{ count }}</button>`,
})
export class LikeCounterComponent {
    count = 0;
    @Output() countChange = new EventEmitter<number>();

    addLike() {
        this.count++;
        this.countChange.emit(this.count);
    }
}

<!-- Parent component -->
<app-like-counter (countChange)="onCountUpdated($event)"></app-like-counter>

// Parent component
onCountUpdated(newCount: number) {
    console.log('New like count:', newCount);
}



• The special variable $event contains whatever data was emitted.


• Here, it's the number sent from this.countChange.emit(this.count).



3. Renaming an output event


• You can rename the event name seen in HTML by passing a string to @Output().


• Example:

@Component({
    selector: 'app-toggle',
    template: `
        <button (click)="toggle()">Toggle</button>
    `,
})
export class ToggleComponent {
    private on = false;

    @Output('toggled') stateChanged = new EventEmitter<boolean>();

    toggle() {
        this.on = !this.on;
        this.stateChanged.emit(this.on);
    }
}

<!-- Parent uses the alias name -->
<app-toggle (toggled)="onToggled($event)"></app-toggle>



• In TypeScript it's called stateChanged, but in the template it appears as (toggled).



4. Combining inputs and outputs


• It is very common to have both — one for incoming data, one for outgoing events.


• Example: a simple custom checkbox component.

@Component({
    selector: 'app-checkbox',
    template: `
        <label>
            <input type="checkbox" [checked]="checked" (change)="onChange($event)" />
            <ng-content></ng-content>
        </label>
    `,
})
export class CheckboxComponent {
    @Input()  checked = false;
    @Output() checkedChange = new EventEmitter<boolean>();

    onChange(event: Event) {
        const input = event.target as HTMLInputElement;
        this.checkedChange.emit(input.checked);
    }
}

<!-- Parent component -->
<app-checkbox [(checked)]="subscribed">Subscribe</app-checkbox>



• The [(checked)] syntax is shorthand for combining [checked] and (checkedChange).


• This two-way binding works automatically because the names follow the pattern value / valueChange.



5. Signal-style outputs (Angular 17+)


• With the new signal system, you can define outputs using output() instead of @Output().


• This keeps your code consistent with signal-style inputs.

import { Component, output } from '@angular/core';

@Component({
    selector: 'app-delete-button',
    template: `<button (click)="onDelete()">Delete</button>`,
})
export class DeleteButtonComponent {
    deleted = output<string>();

    onDelete() {
        this.deleted.emit('item-42');
    }
}

<app-delete-button (deleted)="handleDelete($event)"></app-delete-button>



• output() works almost the same as @Output(), but is simpler to read alongside input().


• Use it when writing modern Angular components that already use signals.

Content projection with <ng-content>

1. What is content projection?


• Content projection means letting the parent component insert its own HTML into the child component's template.


• Think of it like a "placeholder" where outside content will appear.


• Angular uses the special tag <ng-content> for this purpose.

@Component({
    selector: 'app-card',
    template: `
        <div class="card">
            <h3>Header</h3>
            <ng-content></ng-content>   <!-- projected content here -->
        </div>
    `,
    styles: [`
        .card {
            border: 1px solid #ddd;
            border-radius: .5rem;
            padding: 1rem;
            margin: .5rem 0;
        }
    `],
})
export class CardComponent {}

<!-- Parent component -->
<app-card>
    <p>This paragraph comes from the parent.</p>
</app-card>



• The paragraph inside <app-card> replaces <ng-content> in the child template.


• This lets you make reusable "container" components that still display custom content.



2. Projecting multiple content sections


• You can have more than one <ng-content> in a component, each with a CSS selector.


• This is called selective content projection.

@Component({
    selector: 'app-dialog',
    template: `
        <div class="dialog">
            <header>
                <ng-content select="[dialog-title]"></ng-content>
            </header>

            <section>
                <ng-content></ng-content>   <!-- default slot -->
            </section>

            <footer>
                <ng-content select="[dialog-actions]"></ng-content>
            </footer>
        </div>
    `,
})
export class DialogComponent {}

<app-dialog>
    <h2 dialog-title>Delete file?</h2>

    <p>This action cannot be undone.</p>

    <div dialog-actions>
        <button>Cancel</button>
        <button>Confirm</button>
    </div>
</app-dialog>



• Each <ng-content> selects the elements that match its selector.


• Anything not matching any selector goes into the "default" <ng-content>.



3. Using ngProjectAs for flexibility


• Sometimes, an element's tag can't be changed to match the selector — for example, it's a shared component or library element.


• You can use the attribute ngProjectAs to "pretend" it matches a selector.

<app-dialog>
    <app-title ngProjectAs="[dialog-title]">Edit profile</app-title>

    <p>Form fields go here...</p>

    <app-footer ngProjectAs="[dialog-actions]">
        <button>Close</button>
    </app-footer>
</app-dialog>



• Even though the elements are <app-title> and <app-footer>, Angular projects them into the right slots.



4. Projecting multiple components


• You can project any combination of text, HTML, or components.


• This makes powerful layouts easy to build.

<app-card>
    <app-user-info [user]="user"></app-user-info>
    <app-user-stats [user]="user"></app-user-stats>
</app-card>



• Both <app-user-info> and <app-user-stats> are rendered inside the card's <ng-content>.

Component Host Elements

1. What is a host element?


• Every Angular component is attached to a real DOM element, this is called its host element.


• The host element is the HTML tag where Angular creates your component instance.


• Example:

@Component({
    selector: 'app-user-card',
    template: `<p>User: {{ name }}</p>`,
})
export class UserCardComponent {
    name = 'Hwangfucius';
}

<!-- Parent template -->
<app-user-card></app-user-card>



• Here, the <app-user-card> tag is the host element for the UserCardComponent.


• Angular attaches your component's rendered template (<p>User: ...</p>) inside this element.



2. Host element vs child elements


• The host element is the outer shell of your component.


• Everything you write inside the component's template becomes its child elements.

<!-- In the browser -->
<app-user-card>                     <!-- 👈 host element -->
    <p>User: Hwangfucius</p>        <!-- 👈 child content -->
</app-user-card>




3. Styling the host element


• You can style your host element directly from inside the component using the :host selector.


• Example:

@Component({
    selector: 'app-alert',
    template: `<ng-content></ng-content>`,
    styles: [`
        :host {
            display: block;
            padding: 1rem;
            border-radius: .5rem;
            background: #f9f9f9;
        }

        :host(.warning) {
            background: #fff3cd;
            color: #856404;
        }

        :host(.error) {
            background: #f8d7da;
            color: #842029;
        }
    `],
})
export class AlertComponent {}

<app-alert class="warning">Low battery</app-alert>
<app-alert class="error">System failure</app-alert>



• The :host selector targets the component's own tag — its host element.


• Each app-alert element gets styled according to its class.



4. Binding attributes and classes to the host element


• Inside your component class, you can bind properties and attributes directly to the host element using @HostBinding().


• This allows your code to dynamically update how the host element looks or behaves.

import { Component, HostBinding, Input } from '@angular/core';

@Component({
    selector: 'app-status-indicator',
    template: `<ng-content></ng-content>`,
})
export class StatusIndicatorComponent {
    @Input() status: 'online' | 'offline' = 'offline';

    @HostBinding('class')
    get hostClass(): string {
        return this.status;
    }

    @HostBinding('attr.role') role = 'status';
}

<app-status-indicator status="online">Connected</app-status-indicator>
<app-status-indicator status="offline">Disconnected</app-status-indicator>



• @HostBinding('class') dynamically sets classes on the host element.
• @HostBinding('attr.role') adds an accessibility attribute directly to the host.



5. Listening to events on the host


• You can also listen for host element events (like click) using @HostListener().


• Example:

import { Component, HostListener } from '@angular/core';

@Component({
    selector: 'app-clickable',
    template: `<ng-content></ng-content>`,
})
export class ClickableComponent {
    @HostListener('click', ['$event'])
    handleClick(event: MouseEvent) {
        console.log('Host element clicked!', event);
    }
}

<app-clickable>Click me!</app-clickable>



• Clicking anywhere on the component's host element triggers the listener inside the class.


• This is often used for buttons, custom inputs, or clickable cards.



6. Accessing the host element in code


• Sometimes you may need to interact with the real DOM element that hosts your component.


• You can inject an ElementRef to access it directly.

import { Component, ElementRef } from '@angular/core';

@Component({
    selector: 'app-box',
    template: `<ng-content></ng-content>`,
})
export class BoxComponent {
    constructor(private host: ElementRef<HTMLElement>) {}

    ngAfterViewInit() {
        this.host.nativeElement.style.border = '2px solid blue';
    }
}

<app-box>Styled from code</app-box>



• ElementRef gives you direct access to the DOM node — useful for low-level manipulations.



7. Difference between host and parent elements


• The host element belongs to the parent template, but it's controlled by the component.


• The parent element is the one that wraps the component in the DOM, not the same thing as the host.

<div class="wrapper">         <!-- parent element -->
    <app-card></app-card>     <!-- host element -->
</div>



• Inside app-card, :host styles apply to <app-card> — not to the outer <div class="wrapper">.


• If you want to react to a parent's class (e.g. a theme), use :host-context(.dark-mode).

Component Lifecycle

1. What is a component lifecycle?


• Every Angular component goes through a series of steps from creation to destruction.


• Angular lets you run your own code at specific moments, like when the component is created, updated, or removed.


• These moments are called lifecycle hooks.

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-timer',
    template: `<p>Seconds: {{ seconds }}</p>`,
})
export class TimerComponent implements OnInit, OnDestroy {
    seconds = 0;
    private intervalId: any;

    ngOnInit() {
        console.log('Timer created');
        this.intervalId = setInterval(() => this.seconds++, 1000);
    }

    ngOnDestroy() {
        console.log('Timer destroyed');
        clearInterval(this.intervalId);
    }
}

<!-- When  is created, ngOnInit runs. When it's removed, ngOnDestroy runs. -->
<app-timer *ngIf="showTimer"></app-timer>
<button (click)="showTimer = !showTimer">Toggle Timer</button>



• ngOnInit() runs once when the component is first displayed.


• ngOnDestroy() runs right before the component is removed from the DOM.


• Perfect for starting or cleaning up resources like timers, event listeners, or subscriptions.



2. The full lifecycle order


• Angular calls hooks in this order when a component is created, updated, and destroyed:

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. ngOnDestroy()



• You don't have to implement all of them (just the ones you need).


• Each one has a clear purpose in the component's lifecycle.



3. ngOnChanges()


• Runs whenever an @Input() property changes.


• It also runs once right before ngOnInit().

@Component({
    selector: 'app-counter',
    template: `<p>Count: {{ count }}</p>`,
})
export class CounterComponent implements OnChanges {
    @Input() count = 0;

    ngOnChanges(changes: SimpleChanges) {
        console.log('Changes:', changes);
    }
}

<app-counter [count]="num"></app-counter>
<button (click)="num++">Increment</button>



• SimpleChanges tells you what changed, its previous value, and new value.


• Useful when reacting to updated inputs from a parent component.



4. ngOnInit()


• Called once, after Angular initializes all @Input() values.


• Use it to set up data, start fetching from APIs, or initialize variables.

ngOnInit() {
    console.log('Component ready to use!');
    this.loadData();
}



• Think of it as your component's "startup" moment.



5. ngDoCheck()


• Called during every change detection cycle.


• Most apps don't need it, because Angular's normal data binding handles most updates automatically.

ngDoCheck() {
    console.log('Change detection running...');
}




6. ngAfterContentInit() and ngAfterContentChecked()


• These run when projected content (via <ng-content>) is first inserted, and after every subsequent check.


• Use them when your component needs to interact with projected child content.

ngAfterContentInit() {
    console.log('Projected content has been initialized.');
}

ngAfterContentChecked() {
    console.log('Projected content checked again.');
}



• "Content" means anything that was passed between your component tags in the parent template.



7. ngAfterViewInit() and ngAfterViewChecked()


• These run when the component's own view (its template) is initialized and rechecked.


• Good for code that needs to access the rendered DOM using @ViewChild().

@ViewChild('box') box!: ElementRef;

ngAfterViewInit() {
    console.log('Template view ready:', this.box.nativeElement);
}

<div #box>Hello box</div>



• Don't try to access DOM elements in ngOnInit() — they're not ready yet. Use ngAfterViewInit() instead.



8. ngOnDestroy()


• Called right before Angular removes the component from the DOM.


• Use it to clean up resources (unsubscribe from Observables, clear timers, detach listeners, etc.).

ngOnDestroy() {
    console.log('Cleaning up...');
    this.subscription.unsubscribe();
}



• Forgetting cleanup can cause memory leaks, so ngOnDestroy() is important.



9. Visual summary

 ┌──────────────────────────────────────┐
 │ Component Created                    │
 │  ├─ ngOnChanges()                    │
 │  ├─ ngOnInit()                       │
 │  ├─ ngDoCheck()                      │
 │  ├─ ngAfterContentInit()             │
 │  ├─ ngAfterContentChecked()          │
 │  ├─ ngAfterViewInit()                │
 │  └─ ngAfterViewChecked()             │
 │                                      │
 │ Component Updated                    │
 │  ├─ ngDoCheck()                      │
 │  ├─ ngAfterContentChecked()          │
 │  └─ ngAfterViewChecked()             │
 │                                      │
 │ Component Destroyed                  │
 │  └─ ngOnDestroy()                    │
 └──────────────────────────────────────┘



• Angular calls these in the same predictable order every time.


• Use them to control setup, updates, and cleanup in your component's life.

Referencing Component Children with Queries

1. What are queries?


• Sometimes, you need direct access to elements or components inside your template — for example, to read a property, call a method, or focus an input.


• Angular provides queries for this purpose — A query "asks" Angular for a reference to a matching element or component in your view.


• The most common query decorators are:
• @ViewChild() — finds one element or component inside the component's own template.
• @ViewChildren() — finds multiple matching elements or components in the view.
• @ContentChild() and @ContentChildren() — find projected content (passed in via <ng-content>).



2. @ViewChild() — getting a single child element


• Use @ViewChild() to get a reference to one element or component inside your template.


• Example: focusing an input after the component appears.

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-focus-input',
    template: `<input #userInput type="text" placeholder="Type something..." />`,
})
export class FocusInputComponent implements AfterViewInit {
    @ViewChild('userInput') inputElement!: ElementRef<HTMLInputElement>;

    ngAfterViewInit() {
        this.inputElement.nativeElement.focus();  // focus when ready
    }
}



• The #userInput in the template defines a template reference variable.
• @ViewChild('userInput') finds that element after the view is created.
• Always access it in ngAfterViewInit(), not ngOnInit(), because the view isn't ready before that.



3. @ViewChild() — getting a child component instance


• You can also use @ViewChild() to access another component that is part of your template.


• Example:

@Component({
    selector: 'app-child',
    template: `<p>Child works!</p>`,
})
export class ChildComponent {
    sayHello() {
        console.log('Hello from Child!');
    }
}

@Component({
    selector: 'app-parent',
    template: `
        <app-child></app-child>
        <button (click)="callChild()">Call Child</button>
    `,
})
export class ParentComponent {
    @ViewChild(ChildComponent) child!: ChildComponent;

    callChild() {
        this.child.sayHello();
    }
}



• @ViewChild(ChildComponent) looks for the first <app-child> element in the view.
• You can then access its public properties and methods directly.
• Angular keeps this reference updated automatically whenever the view changes.



4. @ViewChildren() — getting multiple elements or components


• Use @ViewChildren() when you need to handle several matching items — for example, a list of child components.


• Angular returns a QueryList that you can loop over.

@Component({
    selector: 'app-item',
    template: `<li>Item</li>`,
})
export class ItemComponent {}

@Component({
    selector: 'app-list',
    template: `
        <ul>
            <app-item *ngFor="let i of [1,2,3]"></app-item>
        </ul>
        <button (click)="logItems()">Log items</button>
    `,
})
export class ListComponent implements AfterViewInit {
    @ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;

    ngAfterViewInit() {
        console.log('Found items:', this.items.length);
    }

    logItems() {
        this.items.forEach((item, index) => console.log('Item', index + 1, item));
    }
}



• QueryList acts like a live array — it updates automatically if the view changes (for example, if *ngIf adds or removes elements).



5. @ContentChild() and @ContentChildren() — projected content


• Use these for elements or components that are projected into your component through <ng-content>.


• This is for content that the parent passes in, not what the component itself defines.

@Component({
    selector: 'app-panel',
    template: `
        <div class="panel">
            <ng-content></ng-content>
        </div>
    `,
})
export class PanelComponent implements AfterContentInit {
    @ContentChild('projected') content!: ElementRef;

    ngAfterContentInit() {
        console.log('Projected element:', this.content.nativeElement);
    }
}

<app-panel>
    <p #projected>Hello projected world!</p>
</app-panel>



• @ContentChild() finds a matching reference inside the projected content (the part between <app-panel>...</app-panel>).
• Access it in ngAfterContentInit(), not ngOnInit(), since the content is only inserted after initialization.



6. When to use each hook


• @ViewChild / @ViewChildren → for elements or components declared inside your own template. Access them in ngAfterViewInit().


• @ContentChild / @ContentChildren → for content projected from a parent. Access them in ngAfterContentInit().

ViewChild       → single element in template
ViewChildren    → multiple elements in template
ContentChild    → single projected element (via <ng-content>)
ContentChildren → multiple projected elements




7. Practical use cases


• Auto-focusing or measuring DOM elements after view init.
• Calling methods on child components (e.g., reset(), validate()).
• Collecting or managing groups of dynamic child components.
• Reacting to projected content, like tabs, cards, or custom slots.

Using DOM APIs in Angular

1. Why use DOM APIs?


• Sometimes you need to interact directly with the browser's Document Object Model (DOM) — for example, to focus an input, measure an element's size, scroll smoothly, or change a style dynamically.


• Angular normally manages the DOM for you through templates and bindings, but you can safely access it when necessary.


• Direct DOM access should be done carefully to keep your app safe and compatible with server-side rendering (Angular Universal).



2. Accessing elements with ElementRef


• ElementRef is the simplest way to get a reference to a DOM element.


• It wraps the real DOM node inside a nativeElement property.

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-box',
    template: `<div #box class="blue-box">Hello Box</div>`,
    styles: [`.blue-box { width: 100px; height: 100px; background: lightblue; }`]
})
export class BoxComponent implements AfterViewInit {
    @ViewChild('box') box!: ElementRef<HTMLDivElement>;

    ngAfterViewInit() {
        console.log(this.box.nativeElement); // <div> element itself
        this.box.nativeElement.style.border = '2px solid navy';
    }
}



• Here, nativeElement gives direct access to the DOM node.
• You can read or set properties like textContent, classList, style, etc.
• Always access it in ngAfterViewInit() so the view is ready.



3. Modifying styles and classes


• Angular provides the Renderer2 service for safer DOM manipulation.


• Renderer2 works even when your app runs outside the browser (like in a server environment).

import { Component, ElementRef, Renderer2, ViewChild, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-colored-box',
    template: `<div #box>Click me!</div>`
})
export class ColoredBoxComponent implements AfterViewInit {
    @ViewChild('box') box!: ElementRef;
    constructor(private renderer: Renderer2) {}

    ngAfterViewInit() {
        this.renderer.setStyle(this.box.nativeElement, 'background', 'pink');
        this.renderer.setStyle(this.box.nativeElement, 'padding', '10px');
        this.renderer.addClass(this.box.nativeElement, 'rounded');
    }
}



• setStyle(), addClass(), removeClass(), and setAttribute() are cross-platform safe.
• This avoids direct DOM access and works well with Angular Universal.



4. Listening to DOM events


• You can use Renderer2.listen() to attach an event listener directly to an element.


• This gives more control than template bindings when you need dynamic event management.

ngAfterViewInit() {
    this.renderer.listen(this.box.nativeElement, 'click', () => {
        alert('Box clicked!');
    });
}



• listen() automatically cleans up when the element is destroyed — you don't need to remove listeners manually.



5. Reading sizes and positions


• Use normal DOM properties like offsetWidth, offsetHeight, or getBoundingClientRect() to measure elements.

ngAfterViewInit() {
    const rect = this.box.nativeElement.getBoundingClientRect();
    console.log('Width:', rect.width, 'Height:', rect.height);
}



• This is useful for animations, positioning, or responsive logic.



6. Scrolling and focusing


• Many DOM elements have built-in methods like scrollIntoView() and focus().

scrollToBox() {
    this.box.nativeElement.scrollIntoView({ behavior: 'smooth' });
}



• You can call these safely once the view exists.
• Combine with buttons or triggers to make smooth navigation experiences.



7. Using @HostListener for simple DOM events


• Instead of manually using Renderer2.listen(), Angular offers the @HostListener() decorator to respond to DOM events directly on your component's host element.

import { Component, HostListener } from '@angular/core';

@Component({
    selector: 'app-click-alert',
    template: `<div>Click anywhere on me!</div>`,
})
export class ClickAlertComponent {
    @HostListener('click')
    handleClick() {
        console.log('Host element clicked!');
    }
}



• @HostListener() automatically registers and cleans up event handlers.
• It's the easiest way to respond to host events without touching Renderer2.



8. Safety notes


• Avoid direct DOM manipulation when possible — it can bypass Angular's rendering and cause inconsistencies.


• Use Renderer2 or @HostListener for most operations — they work in web workers and server rendering.


• If you must access window or document, do it only inside browser-safe conditions (e.g., check isPlatformBrowser()).

Inheritance in Angular

1. Using inheritance between Angular components


• Suppose you have multiple components that display data and log user actions — you can extract this logic into a base class.

import { Component } from '@angular/core';

export class BaseLogger {
    log(message: string) {
        console.log(`[LOG]: ${message}`);
    }
}

@Component({
    selector: 'app-user',
    template: `<p>User Component</p>`,
})
export class UserComponent extends BaseLogger {
    constructor() {
        super();
        this.log('User component initialized');
    }
}

@Component({
    selector: 'app-admin',
    template: `<p>Admin Component</p>`,
})
export class AdminComponent extends BaseLogger {
    constructor() {
        super();
        this.log('Admin component initialized');
    }
}



• Both components now reuse log() from BaseLogger.
• You can call super() to use methods or constructor logic from the parent.
• This is a clean way to share reusable class-level logic.



2. Extending a base component with lifecycle hooks


• You can also move common lifecycle logic to a base class — for example, cleanup code or initial setup.

import { OnInit, OnDestroy } from '@angular/core';

export abstract class BaseComponent implements OnInit, OnDestroy {
    ngOnInit() {
        console.log('Component initialized.');
    }

    ngOnDestroy() {
        console.log('Component destroyed.');
    }
}

@Component({
    selector: 'app-profile',
    template: `<p>Profile</p>`,
})
export class ProfileComponent extends BaseComponent {
    ngOnInit() {
        super.ngOnInit(); // Call base logic
        console.log('Profile-specific init.');
    }
}



• The base class handles shared setup/cleanup, and child components can extend it with their own behavior.
• Use super.ngOnInit() to keep the parent's logic.



3. Sharing injected services across subclasses


• Services can also be shared using inheritance.


• The parent class can inject dependencies, and the child automatically inherits them.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export class BaseDataComponent {
    constructor(protected http: HttpClient) {}

    fetchData(url: string) {
        return this.http.get(url);
    }
}

@Component({
    selector: 'app-users',
    template: `<button (click)="load()">Load Users</button>`,
})
export class UsersComponent extends BaseDataComponent {
    load() {
        this.fetchData('/api/users').subscribe(data => console.log(data));
    }
}



• The UsersComponent inherits both the injected HttpClient and the fetchData() method.
• This pattern is great for components that share similar service interactions.



4. Inheritance for directives


• You can also extend one directive from another to reuse behavior.


• Example: create a base directive that listens for hover events, then extend it to style specific elements.

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive()
export class HoverBase {
    constructor(protected el: ElementRef) {}

    @HostListener('mouseenter')
    onEnter() {
        this.el.nativeElement.style.opacity = '0.8';
    }

    @HostListener('mouseleave')
    onLeave() {
        this.el.nativeElement.style.opacity = '1';
    }
}

@Directive({
    selector: '[highlightOnHover]'
})
export class HighlightDirective extends HoverBase {
    @HostListener('mouseenter')
    override onEnter() {
        super.onEnter();
        this.el.nativeElement.style.background = 'lightyellow';
    }
}



• The HighlightDirective extends HoverBase, keeping its hover logic but adding a highlight effect.



5. When not to use inheritance


• Inheritance is great for sharing core logic, but not for everything.


• Prefer composition (injecting a service) if:
  • Different components need similar but not identical features.
  • You want to avoid deep inheritance chains.
  • The shared behavior doesn't rely on component lifecycles.


• For example, instead of a BaseLogger, you could inject a LoggerService.

Programmatically Rendering Components

1. What does "programmatically rendering" mean?


• Normally, you add components to your template using HTML tags, like <app-card></app-card>.


• But sometimes, you want to create components with code — for example:
  • Show a popup or dialog dynamically.
  • Render components from a list of types.
  • Build a dashboard where widgets can appear or disappear.


• This is called programmatic component rendering.



2. Basic idea


• To insert a component manually, Angular gives you a ViewContainerRef.


• This reference represents a "place" in the DOM where new views (templates or components) can be created.


• Then, you use createComponent() to insert your component at runtime.



3. Setup: create a target placeholder


• You first mark where in the template you want to insert components using #container.

<div>Dynamic Area:</div>
<ng-container #container></ng-container>
<button (click)="addCard()">Add Card</button>



• The <ng-container> is invisible in the DOM — it just holds a view.
• The #container gives you a reference in TypeScript.



4. Getting the container in TypeScript


• Use @ViewChild() with ViewContainerRef to access the container.

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { CardComponent } from './card.component';

@Component({
    selector: 'app-dynamic-host',
    templateUrl: './dynamic-host.component.html',
})
export class DynamicHostComponent {
    @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

    addCard() {
        this.container.createComponent(CardComponent);
    }
}



• Every time you click the button, Angular will create a new CardComponent inside the container.
• That's all it takes to render a component programmatically!



5. Passing data to the created component


• After you create a component, you can access its instance and set its inputs.

addCard() {
    const cardRef = this.container.createComponent(CardComponent);
    cardRef.instance.title = 'Dynamic card created at ' + new Date().toLocaleTimeString();
}



• The returned object (ComponentRef) has an instance property — that's the component itself.
• You can set its public fields or call methods directly.



6. Clearing or removing components


• To remove all dynamically created components, just clear the container:

clearAll() {
    this.container.clear();
}



• To remove one specific component, destroy it manually:

const ref = this.container.createComponent(CardComponent);
// later...
ref.destroy();



• When destroyed, Angular also removes its DOM and unsubscribes from any observables automatically.



7. Example: a dynamic alert system


• Here's a small, complete example of dynamically creating alert components:

@Component({
    selector: 'app-alert',
    template: `<div class="alert">{{ message }}</div>`,
    styles: [`.alert { background: #ffe4b5; padding: .5rem; margin: .25rem 0; }`],
    standalone: true,
})
export class AlertComponent {
    message = '';
}

@Component({
    selector: 'app-alert-demo',
    template: `
        <button (click)="showAlert('Something happened!')">Show Alert</button>
        <ng-container #alertHost></ng-container>
    `,
})
export class AlertDemoComponent {
    @ViewChild('alertHost', { read: ViewContainerRef }) host!: ViewContainerRef;

    showAlert(text: string) {
        const ref = this.host.createComponent(AlertComponent);
        ref.instance.message = text;
        setTimeout(() => ref.destroy(), 3000); // auto remove after 3s
    }
}



• Each alert appears when the button is clicked, and disappears automatically after 3 seconds.
• This pattern is often used in real applications for toast notifications, modals, or temporary messages.



8. Advanced: creating from a component type variable


• You can store component types in variables and render them dynamically at runtime.

import { Type } from '@angular/core';

const components: Type<any>[] = [AlertComponent, CardComponent, WidgetComponent];

addRandom() {
    const randomType = components[Math.floor(Math.random() * components.length)];
    this.container.createComponent(randomType);
}



• This makes it easy to load different components conditionally — for example, from configuration or user choices.



9. Lifecycle and cleanup


• Dynamically created components still run all normal Angular lifecycles (ngOnInit, ngOnDestroy, etc.).


• When you clear or destroy them, Angular cleans up automatically — no need to remove DOM elements manually.

Advanced component configuration

1. Introduction


• When you write a component, the @Component() decorator can do much more than just define a template and selector.


• Angular components can be customized through many options that control:
  • How they are compiled and rendered,
  • How they detect data changes,
  • How styles are applied,
  • And what other components, directives, or pipes they can use.


• These advanced configurations give you performance and architectural control.



2. Standalone components


• Starting from Angular 14, you can create components that don't belong to any @NgModule.


• You simply mark them with standalone: true.

@Component({
    selector: 'app-hello',
    standalone: true,
    template: `<p>Hello from a standalone component!</p>`,
})
export class HelloComponent {}



• Standalone components can directly import other standalone components, directives, and pipes.

@Component({
    selector: 'app-parent',
    standalone: true,
    imports: [HelloComponent],
    template: `<app-hello></app-hello>`,
})
export class ParentComponent {}




3. Change detection strategies


• Angular automatically updates your template when data changes. But you can control how often it checks for changes using changeDetection.


• There are two modes:
• ChangeDetectionStrategy.Default — Angular checks all components below whenever something might have changed.
• ChangeDetectionStrategy.OnPush   — Angular only re-checks when input references change or an event happens inside the component.

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'app-optimized',
    template: `<p>Optimized Component</p>`,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OptimizedComponent {}



• Use OnPush for better performance, especially in large apps where data doesn't change often.
• Angular then skips unnecessary checks for unchanged components.



4. View encapsulation modes


• By default, Angular encapsulates component styles so they only apply to that component's template.


• You can control this with encapsulation:
• ViewEncapsulation.Emulated — (default) Angular emulates Shadow DOM by adding unique attributes to selectors.
• ViewEncapsulation.ShadowDom — uses the browser's real Shadow DOM.
• ViewEncapsulation.None — no encapsulation, styles are global.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-box',
    template: `<div>I'm a box</div>`,
    styles: [`div { color: red; }`],
    encapsulation: ViewEncapsulation.None,
})
export class BoxComponent {}



• Here, the div { color: red; } style will affect every <div> in your app — not just inside this component.
• Use None for global styles or theming, and ShadowDom for true style isolation.



5. Using providers inside a component


• You can declare providers directly in a component.


• This is helpful when you want a new service instance for each component.

import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
    selector: 'app-counter',
    template: `
        <p>Count: {{ service.count }}</p>
        <button (click)="service.increment()">+</button>
    `,
    providers: [CounterService]
})
export class CounterComponent {
    constructor(public service: CounterService) {}
}



• Each <app-counter> gets its own instance of CounterService.
• This is called component-level dependency injection.



6. Controlling change detection manually


• Sometimes you want to run change detection yourself — for example, after an external API updates data asynchronously.


• You can inject ChangeDetectorRef and call its methods:

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
    selector: 'app-manual-refresh',
    template: `
        <p>Last updated: {{ time }}</p>
        <button (click)="refresh()">Refresh</button>
    `
})
export class ManualRefreshComponent {
    time = new Date().toLocaleTimeString();

    constructor(private cdr: ChangeDetectorRef) {}

    refresh() {
        this.time = new Date().toLocaleTimeString();
        this.cdr.detectChanges();  // manually trigger view update
    }
}



• Manual control is rarely needed, but useful when integrating with external libraries that don't trigger Angular's normal checks.



7. Host bindings and host listeners


• These decorators let you bind properties or events directly to the component's host element.


• This is considered an advanced configuration because it changes how the component behaves in the DOM.

import { Component, HostBinding, HostListener } from '@angular/core';

@Component({
    selector: 'app-box',
    template: `<ng-content></ng-content>`,
})
export class BoxComponent {
    @HostBinding('class.active') isActive = false;

    @HostListener('click')
    toggle() {
        this.isActive = !this.isActive;
    }
}



• Clicking the box toggles the active class on its host element.
• This lets the component manage its appearance or behavior without external CSS selectors.



8. Importing dependencies directly


• In standalone components, you can import everything the component needs — directives, pipes, or even modules — directly through the imports field.

import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-list',
    standalone: true,
    imports: [CommonModule],
    template: `
        <ul>
            <li *ngFor="let item of items">{{ item }}</li>
        </ul>
    `,
})
export class ListComponent {
    items = ['A', 'B', 'C'];
}



• Standalone imports make each component self-contained and easy to reuse anywhere in your project.

Binding dynamic text, properties, and attributes

1. Introduction


• Angular templates let you connect your component's data to the HTML view — this is called data binding.


• Instead of hard-coding text or attributes, you can bind them dynamically to variables, expressions, or functions.


• Angular updates the DOM automatically when the bound data changes, keeping your view and logic in sync.



2. Interpolating text ({{ }})


• The simplest type of binding is text interpolation using double curly braces {{ }}.


• It inserts the value of a component property or expression directly into the HTML text.

@Component({
    selector: 'app-greeter',
    template: `
        <p>Hello, {{ name }}!</p>
        <p>Today is {{ date | date:'fullDate' }}.</p>
    `,
})
export class GreeterComponent {
    name = 'Hwangfucius';
    date = new Date();
}



• Angular automatically escapes text to prevent security issues (no HTML injection).
• You can also use pipes (like date) inside interpolation.



3. Binding to DOM properties


• HTML elements have many DOM properties like disabled, checked, value, and hidden.


• You can bind them dynamically using square brackets: [property]="expression".

<button [disabled]="isLoading">Save</button>
<input [value]="username" />
<img [src]="imageUrl" [alt]="description" />

export class ExampleComponent {
    isLoading = true;
    username = 'Alice';
    imageUrl = '/assets/avatar.png';
    description = 'Profile picture';
}



• When isLoading changes to false, Angular automatically re-enables the button.
• This is a one-way binding from your component → view.



4. Binding to attributes


• Not all attributes have matching DOM properties (for example, aria-* and data-* attributes).


• To bind those, use the attr. prefix:

<button [attr.aria-label]="label">Click</button>
<div [attr.data-id]="uniqueId"></div>

export class AttrExampleComponent {
    label = 'Action button';
    uniqueId = 12345;
}



• Angular creates or removes the attribute based on the value:
  • If the bound value is null or undefined, the attribute is removed.
  • If it has a value, it is added or updated.


• Use this for accessibility (ARIA), analytics (data-attributes), or SVG properties.



5. Class and style bindings


• You can dynamically change CSS classes or styles with [class] and [style].

<div [class.active]="isActive">Active box</div>
<div [style.background-color]="color">Colored box</div>

export class StyleExampleComponent {
    isActive = true;
    color = 'lightgreen';
}



• Angular adds or removes the class automatically depending on the boolean expression.
• You can bind multiple styles or classes using objects:

  <div [ngClass]="{ active: isActive, highlight: hasFocus }"></div>
  <div [ngStyle]="{ 'font-size': size + 'px', color: textColor }"></div>
  




6. Event binding + property binding = interactivity


• To make bindings interactive, combine property binding and event binding.

<input [value]="username" (input)="username = $event.target.value" />
<p>Current username: {{ username }}</p>

export class TwoWayComponent {
    username = 'Guest';
}



• This is manual one-way binding plus an event handler.
• Angular's [(ngModel)] is just a shorthand for this two-way pattern.



7. Binding HTML safely


• By default, Angular escapes all interpolated text, so tags like <script> or <b> are shown as text — not executed.


• If you intentionally want to display HTML, bind to [innerHTML] — but do it carefully.

<div [innerHTML]="htmlSnippet"></div>

export class HtmlExampleComponent {
    htmlSnippet = '<b>Bold text</b> and <i>italic</i>';
}



• Angular sanitizes unsafe HTML automatically, but for complete trust (e.g. known safe content), you can use DomSanitizer.
• Be careful — don't bind user-provided HTML directly without sanitization!



8. Binding SVG or custom attributes


• SVG elements often use attributes that aren't standard HTML properties (like fill, cx, r).


• You can bind them just like HTML attributes — Angular handles SVG correctly.

<svg width="100" height="100">
    <circle [attr.cx]="50" [attr.cy]="50" [attr.r]="radius" [attr.fill]="color"></circle>
</svg>

export class SvgExampleComponent {
    radius = 30;
    color = 'lightblue';
}



• Angular updates SVG bindings the same way as normal DOM bindings.

Adding Event Listeners in Angular

1. Introduction


• Event listeners let your components react to user actions such as clicks, typing, mouse movements, or key presses.


• Instead of using addEventListener() manually, Angular provides a simpler, declarative way to attach events in templates using parentheses ().



2. Basic syntax


• The general syntax is:

<element (eventName)="expression"></element>



• Example: listening for a button click.

<button (click)="onClick()">Click me</button>

export class ClickExampleComponent {
    onClick() {
        console.log('Button clicked!');
    }
}



• Whenever the button is clicked, Angular calls the onClick() method in the component.
• You don't need to query the element or manually add listeners — Angular handles it for you.



3. Accessing the event object


• Angular passes the native browser event as a special variable named $event.


• You can use it to inspect or react to event details like mouse position or keyboard keys.

<input (input)="onInput($event)" placeholder="Type something..." />

export class InputExampleComponent {
    onInput(event: Event) {
        const input = event.target as HTMLInputElement;
        console.log('You typed:', input.value);
    }
}



• $event gives full access to the original DOM event (the same object you'd get from addEventListener).



4. Passing custom arguments


• You can mix custom arguments and the event object freely.

<button (click)="sayHello('Hwangfucius', $event)">Greet</button>

export class HelloComponent {
    sayHello(name: string, event: MouseEvent) {
        console.log(`Hello, ${name}!`, event);
    }
}



• This allows flexible event handlers that take both static and dynamic input.



5. Keyboard events


• Angular supports all standard DOM keyboard events such as keydown, keyup, and keypress.


• You can use key modifiers to listen for specific keys directly.

<input (keyup.enter)="onEnter($event)" placeholder="Press Enter" />

export class KeyExampleComponent {
    onEnter(event: KeyboardEvent) {
        const input = event.target as HTMLInputElement;
        console.log('Entered:', input.value);
    }
}



• Angular automatically detects modifier keys like .enter, .esc, .tab, .shift, .alt, and others.



6. Mouse events


• Angular also supports mouse events such as mouseenter, mouseleave, mousemove, mousedown, mouseup, etc.

<div
    (mouseenter)="onHover(true)"
    (mouseleave)="onHover(false)"
    [class.active]="hovered"
>
    Hover over me!
</div>

export class MouseExampleComponent {
    hovered = false;

    onHover(isHovering: boolean) {
        this.hovered = isHovering;
    }
}



• Here, the element gains a class when hovered, and Angular removes it when the mouse leaves.



7. Event filtering with templates


• You can write conditions directly inside the template binding to control when a handler runs.

<input (keydown)="($event.key === 'Enter') && submit()" />



• This uses a short-circuit expression, submit() runs only when the pressed key is Enter.
• Be careful not to put too much logic inside the template, prefer keeping code in the component.



8. Using @HostListener for host element events


• You can attach listeners to the component's own host element using the @HostListener() decorator.


• This is especially useful in directives and reusable UI components.

import { Component, HostListener } from '@angular/core';

@Component({
    selector: 'app-box',
    template: `<div>Click anywhere on me</div>`,
})
export class BoxComponent {
    @HostListener('click', ['$event'])
    handleClick(event: MouseEvent) {
        console.log('Box clicked!', event);
    }
}



• @HostListener() automatically handles registration and cleanup.
• It can also listen to global events like window:scroll or document:keydown:

@HostListener('window:scroll', ['$event'])
onScroll(event: Event) {
    console.log('Scrolling detected!');
}



• This is how many Angular libraries implement resize or scroll tracking internally.



9. Event binding vs DOM addEventListener


• In plain JavaScript, you'd do:

  document.querySelector('button').addEventListener('click', handler);
  

• But in Angular, the framework:
  • Sets up the listeners when the view is created,
  • Removes them when the component is destroyed,
  • Runs them inside Angular's change detection zone (so your UI updates automatically).
• This means you don't need to worry about memory leaks or manual cleanup.



10. Combining events with data binding


• Event binding is often combined with property binding to create interactive UIs.

<input [value]="text" (input)="text = $event.target.value" />
<p>You typed: {{ text }}</p>

export class CombineExampleComponent {
    text = '';
}



• This pattern underlies Angular's two-way binding ([(ngModel)]).

Two-way binding in Angular

1. Introduction


• Two-way binding lets data flow both ways — from your component class to the template, and from the template back to the class.


• It's commonly used for form inputs, switches, checkboxes, and other user-editable fields.



2. Basic concept


• Two-way binding combines:
  • Property binding   — [value]="username" (data → UI)
  • Event binding       — (input)="username = $event.target.value" (UI → data)


• Angular provides a special shorthand for this pattern: [( )] — known as the banana-in-a-box syntax.

<input [(ngModel)]="username" />
<p>Hello, {{ username }}!</p>

export class TwoWayExampleComponent {
    username = 'Alice';
}



• When the input changes, username updates instantly; when the component changes username, the input field updates automatically too.



3. How ngModel works internally


• The syntax [(ngModel)]="username" is just sugar for combining two bindings:

<input
    [ngModel]="username"
    (ngModelChange)="username = $event"
/>



• [ngModel] → sets the initial value (one-way binding).
• (ngModelChange) → fires whenever the value changes in the UI.
• Together, they synchronize both sides automatically.



4. Using ngModel (FormsModule required)


• To use ngModel, you must import the FormsModule in your component or application (or add it to imports for standalone components).

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-form-demo',
    standalone: true,
    imports: [FormsModule],
    template: `
        <input [(ngModel)]="name" placeholder="Enter your name" />
        <p>Hello, {{ name || 'stranger' }}!</p>
    `
})
export class FormDemoComponent {
    name = '';
}



• If you forget to import FormsModule, Angular will show an error: NG0303: Can't bind to 'ngModel' since it isn't a known property...



5. Two-way binding with custom components


• You can create your own components that support [(...)] syntax, just like ngModel.


• All you need is an @Input() and an @Output() following a specific naming pattern: name and nameChange.

@Component({
    selector: 'app-toggle',
    template: `
        <button (click)="toggle()">
            {{ on ? 'ON' : 'OFF' }}
        </button>
    `,
    standalone: true
})
export class ToggleComponent {
    @Input() on = false;
    @Output() onChange = new EventEmitter<boolean>();

    toggle() {
        this.on = !this.on;
        this.onChange.emit(this.on);
    }
}

<app-toggle [(on)]="enabled"></app-toggle>
<p>Feature is: {{ enabled ? 'Enabled' : 'Disabled' }}</p>

export class ParentComponent {
    enabled = true;
}



• Angular automatically recognizes on + onChange as a two-way binding pair.
• So [(on)] expands into [on] and (onChange) internally.



6. Two-way binding with checkboxes and select boxes


• Two-way binding is very common in forms — it works with input types, checkboxes, selects, and textareas.

<label>
    <input type="checkbox" [(ngModel)]="subscribed" /> Subscribe to newsletter
</label>

<select [(ngModel)]="language">
    <option value="en">English</option>
    <option value="de">German</option>
    <option value="zh">Chinese</option>
</select>

<p>Subscribed: {{ subscribed }}</p>
<p>Language: {{ language }}</p>

export class PreferencesComponent {
    subscribed = false;
    language = 'en';
}



• As you check/uncheck or change the dropdown, Angular updates the component variables instantly.



7. Using standalone signals instead of ngModel (modern alternative)


• Starting in Angular 17, you can achieve two-way reactivity using signals instead of ngModel.

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-signal-demo',
    template: `
        <input [value]="name()" (input)="name.set($event.target.value)" />
        <p>Name: {{ name() }}</p>
    `,
    standalone: true
})
export class SignalDemoComponent {
    name = signal('Hwangfucius');
}



• Signals provide reactive state without needing the FormsModule — and are fully type-safe.

Control Flow in Angular

1. Introduction


• Control flow in Angular templates lets you conditionally render elements, repeat lists, or choose between alternatives — just like if, for, and switch in programming languages.


• Before Angular 17, we used structural directives like *ngIf, *ngFor, and *ngSwitch.


• Now Angular provides a modern, clearer syntax using control flow blocks:
  • @if / @else
  • @for
  • @switch / @case / @default


• This syntax is cleaner, faster, and works natively with the Angular compiler.



2. Conditional rendering with @if


• Use @if to render elements only when a condition is true.

@if (loggedIn) {
    <p>Welcome back, {{ username }}!</p>
} @else {
    <p>Please log in to continue.</p>
}

export class LoginExampleComponent {
    loggedIn = false;
    username = 'Hwangfucius';
}



• The @if block conditionally includes or removes elements from the DOM.
• @else is optional and provides an alternate view.
• Unlike *ngIf, this new syntax doesn't require a wrapper element like <ng-container>.



3. Using @else if


• You can chain multiple conditions using @else if just like in JavaScript.

@if (role === 'admin') {
    <p>Welcome, admin!</p>
} @else if (role === 'editor') {
    <p>Hello, editor!</p>
} @else {
    <p>Guest access only.</p>
}

export class RoleExampleComponent {
    role = 'editor';
}



• This makes conditional rendering much clearer than nesting multiple *ngIf blocks.



4. Repeating elements with @for


• Use @for to loop through arrays and render each item.

@for (item of items; track item.id) {
    <li>{{ item.name }}</li>
}

export class ListExampleComponent {
    items = [
        { id: 1, name: 'Angular' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Vue' },
    ];
}



• The track clause tells Angular how to identify list items efficiently (similar to trackBy in *ngFor).
• If the list changes, Angular can reuse DOM elements instead of re-rendering everything.



5. Using index, count, and even/odd values in @for


• You can access extra context variables inside a @for block.

<ul>
    @for (user of users; let i = $index; let count = $count; let even = $even) {
        <li [class.even]="even">{{ i + 1 }}/{{ count }}: {{ user }}</li>
    }
</ul>

export class UsersExampleComponent {
    users = ['Alice', 'Bob', 'Charlie'];
}



• $index — the current index (starting from 0).
• $count — total number of items.
• $even, $odd — booleans for alternating styles.



6. Switching between multiple options with @switch


• Use @switch to choose one block to render based on a single expression.

@switch (status) {
    @case ('loading') {
        <p>Loading...</p>
    }
    @case ('success') {
        <p>Data loaded successfully!</p>
    }
    @case ('error') {
        <p>Something went wrong.</p>
    }
    @default {
        <p>Idle state.</p>
    }
}

export class SwitchExampleComponent {
    status = 'loading';
}



• @switch works similarly to JavaScript's switch statement.
• Only the matching @case block is rendered in the DOM.
• The @default block is optional but recommended.



7. Grouping elements with @let


• @let lets you declare and reuse a local variable inside the template.
• This is helpful for readability or avoiding repeated expressions.

@let fullName = firstName + ' ' + lastName;
<p>Hello, {{ fullName }}!</p>

export class LetExampleComponent {
    firstName = 'Hwangfucius';
    lastName = 'Wang';
}



• Unlike a component variable, @let only exists inside the template block where it's declared.



8. Older syntax: *ngIf, *ngFor, *ngSwitch


• Before Angular 17, we wrote:

<div *ngIf="loggedIn; else loggedOut">
    Welcome!
</div>
<ng-template #loggedOut>Please log in.</ng-template>

<ul>
    <li *ngFor="let item of items; index as i">{{ i + 1 }} - {{ item }}</li>
</ul>



• The new control flow syntax is easier to read and integrates better with TypeScript expressions.
• However, *ngIf and its friends still work for backward compatibility.



9. Combining control flow blocks


• You can nest control flow statements as needed.

@if (users.length > 0) {
    <ul>
        @for (user of users) {
            <li>{{ user }}</li>
        }
    </ul>
} @else {
    <p>No users found.</p>
}

export class NestedExampleComponent {
    users: string[] = [];
}



• Angular efficiently updates the DOM when the list or condition changes — you don't need to manage it manually.

Pipes in Angular

1. Introduction


• A pipe in Angular is a simple way to transform data directly in the template — for example, changing text to uppercase, formatting dates, or displaying numbers nicely.


• Pipes let you keep your component logic clean by doing small formatting tasks in HTML instead of TypeScript.


• Angular comes with many built-in pipes (like date, uppercase, currency), and you can also create your own custom pipes.



2. Basic syntax


• You apply a pipe using the vertical bar (|) symbol inside interpolation ({{ }}).

{{ value | pipeName }}



• Example:

{{ username | uppercase }}



• This will display username in all capital letters, without modifying the variable itself.



3. Chaining multiple pipes


• You can chain multiple pipes together, and Angular applies them from left to right.

{{ birthday | date:'longDate' | uppercase }}



• First, the date pipe formats birthday, and then uppercase converts it to capital letters.



4. Using pipe arguments


• Some pipes accept one or more arguments to customize the result.

{{ amount | currency:'EUR':'symbol':'1.2-2' }}

export class PipeExampleComponent {
    amount = 1234.5;
}



• This formats 1234.5 as €1,234.50.
• Arguments are separated by colons (:).



5. Common built-in pipes



Pipe	Example	Description
uppercase	{{ 'hello' | uppercase }}	Converts text to uppercase.
lowercase	{{ 'HELLO' | lowercase }}	Converts text to lowercase.
titlecase	{{ 'hello world' | titlecase }}	Capitalizes the first letter of each word.
date	{{ today | date:'fullDate' }}	Formats a Date object into a readable string.
currency	{{ price | currency:'USD' }}	Formats numbers as currencies.
percent	{{ 0.25 | percent }}	Converts a decimal to a percentage (e.g. 0.25 → 25%).
number	{{ 1234.567 | number:'1.0-1' }}	Formats numbers with control over decimal places.
json	{{ obj | json }}	Pretty-prints objects as JSON text (for debugging).
slice	{{ list | slice:1:3 }}	Extracts part of an array or string (start:end).
async	{{ user$ | async }}	Subscribes to an Observable or Promise and shows its value automatically.




6. The async pipe (special case)


• The async pipe is one of the most powerful — it automatically subscribes to Observables or Promises and updates the template when new data arrives.

<p>User: {{ user$ | async }}</p>

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
    selector: 'app-async-demo',
    templateUrl: './async-demo.component.html',
})
export class AsyncDemoComponent {
    user$ = of('Hwangfucius');
}



• No need to manually subscribe or unsubscribe — Angular handles it for you.
• When the observable emits a new value, the UI updates automatically.



7. Pure vs Impure pipes


• By default, pipes are pure: they run only when the input value changes.
• An impure pipe runs on every change detection cycle (which can be slower).

@Pipe({
    name: 'myPipe',
    pure: true, // default
})
export class MyPipe {
    transform(value: string) {
        return value.toUpperCase();
    }
}



• Use pure pipes for simple formatting.
• Use impure pipes only if you need to react to changes inside complex objects or arrays that mutate frequently.



8. Creating a custom pipe


• You can create your own pipe using the @Pipe decorator.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'greet'
})
export class GreetPipe implements PipeTransform {
    transform(name: string): string {
        return `Hello, ${name}!`;
    }
}

{{ 'Hwangfucius' | greet }}



• The pipe class must implement the PipeTransform interface and define a transform() method.
• Angular calls this method every time the value (or arguments) change.



9. Custom pipe with parameters


• Your custom pipe can accept parameters, just like built-in ones.

@Pipe({ name: 'repeat' })
export class RepeatPipe implements PipeTransform {
    transform(value: string, times: number = 2): string {
        return value.repeat(times);
    }
}

{{ 'Hi' | repeat:3 }}



• This displays HiHiHi.



10. When to use pipes


• Use pipes for:
  • Formatting or displaying data (dates, currency, etc.)
  • Simple text transformations
  • Displaying filtered or transformed lists


• Avoid pipes for:
  • Heavy computation or large data filtering (do that in TypeScript)
  • Functions that depend on external asynchronous calls (use services instead)

Creating Custom Pipes in Angular

1. Introduction


• Sometimes the built-in Angular pipes are not enough, you may want to transform your data in a way that fits your own app logic.


• In such cases, you can easily create a custom pipe with the @Pipe decorator.



2. Basic structure of a custom pipe


• A custom pipe is simply a class that implements the PipeTransform interface.
• This interface requires you to define one method: transform(value: any, ...args: any[]): any.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'example'  // The pipe name used in templates: {{ value | example }}
})
export class ExamplePipe implements PipeTransform {
    transform(value: any): any {
        // modify the value and return it
        return value;
    }
}



• You then use it like any other pipe:

{{ 'Hello' | example }}



• This structure is the foundation for every custom pipe you'll make.



3. Example: A "greet" pipe


• Let's start with a simple example: a pipe that adds a greeting before a name.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'greet' })
export class GreetPipe implements PipeTransform {
    transform(name: string): string {
        return `Hello, ${name}!`;
    }
}

{{ 'Hwangfucius' | greet }}



• Output: Hello, Hwangfucius!
• Notice that you didn't change the original value, pipes only transform the display, not the data itself.



4. Passing parameters to your pipe


• Your custom pipe can also accept arguments, separated by colons (:).

@Pipe({ name: 'repeat' })
export class RepeatPipe implements PipeTransform {
    transform(value: string, times: number = 2): string {
        return value.repeat(times);
    }
}

{{ 'Hi' | repeat:3 }}



• Output: HiHiHi
• Angular automatically passes the extra arguments to your transform() method after the first parameter.



5. Example: Capitalize only the first letter


• This pipe transforms the first letter to uppercase while keeping the rest lowercase.

@Pipe({ name: 'capitalize' })
export class CapitalizePipe implements PipeTransform {
    transform(value: string): string {
        if (!value) return '';
        return value[0].toUpperCase() + value.slice(1).toLowerCase();
    }
}

{{ 'aNGuLAr' | capitalize }}



• Output: Angular



6. Example: Filtering a list


• This pipe filters an array based on a text input (a bit more advanced).

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
    transform(items: string[], search: string): string[] {
        if (!items || !search) return items;
        const lower = search.toLowerCase();
        return items.filter(item => item.toLowerCase().includes(lower));
    }
}

<input [(ngModel)]="keyword" placeholder="Search..." />
<ul>
    @for (name of (names | filter:keyword)) {
        <li>{{ name }}</li>
    }
</ul>

export class FilterExampleComponent {
    keyword = '';
    names = ['Alice', 'Bob', 'Charlie', 'David'];
}



• As the user types, the pipe filters the list automatically.
• Remember that pipes are only for presentation — for very large data sets, prefer filtering in the component or backend.



7. Pure vs Impure custom pipes


• By default, custom pipes are pure, meaning Angular only calls them when the input value changes.
• If you need the pipe to run every time change detection happens (for example, if you mutate the same array), mark it as impure by setting pure: false.

@Pipe({
    name: 'impureFilter',
    pure: false
})
export class ImpureFilterPipe implements PipeTransform {
    transform(items: string[], search: string): string[] {
        // runs on every change detection
        return items.filter(item => item.includes(search));
    }
}



• Impure pipes re-run often, so use them sparingly — they can slow down performance if overused.



8. Using custom pipes in standalone components


• If your component is standalone, you must add the pipe to its imports array.

@Component({
    selector: 'app-greet-demo',
    standalone: true,
    imports: [GreetPipe],
    template: `<p>{{ 'Hwangfucius' | greet }}</p>`
})
export class GreetDemoComponent {}



• Now the component can use greet in its template.



9. Using custom pipes in NgModules (non-standalone apps)


• If you're using Angular with NgModules, declare your pipe inside the declarations array of a module.

@NgModule({
    declarations: [CapitalizePipe],
    exports: [CapitalizePipe]
})
export class SharedPipesModule {}



• Then import SharedPipesModule into any module that needs those pipes.

Render Templates from a Parent Component with <ng-content> (sorted of repeated)

1. Introduction


• The <ng-content> tag allows a child component to display content provided by its parent.


• This technique is called content projection.


• It lets the parent control what appears inside the child component's template — useful for cards, dialogs, alerts, and any reusable layout components.



2. Basic example


• Imagine a reusable alert component that displays custom text provided by its parent.

@Component({
    selector: 'app-alert',
    template: `
        <div class="alert">
            <ng-content></ng-content>
        </div>
    `,
    styles: [`.alert { background: #ffe5e5; padding: 1rem; border-radius: 4px; }`],
    standalone: true,
})
export class AlertComponent {}

<!-- Parent component template -->
<app-alert>
    Something went wrong! Please try again.
</app-alert>



• Here, <ng-content> is a placeholder where the parent's content will be inserted.
• The parent's message appears inside the alert box without the child knowing what the message is.



3. Projecting multiple content areas


• You can project multiple parts of the parent's template into specific places using selectors.
• Use the select attribute to match HTML elements or CSS classes.

@Component({
    selector: 'app-card',
    template: `
        <div class="card">
            <div class="card-header">
                <ng-content select="[card-title]"></ng-content>
            </div>

            <div class="card-body">
                <ng-content></ng-content>
            </div>
        </div>
    `,
    styles: [`
        .card { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; margin: .5rem 0; }
        .card-header { font-weight: bold; margin-bottom: .5rem; }
    `],
    standalone: true,
})
export class CardComponent {}

<!-- Parent component -->
<app-card>
    <span card-title>User Info</span>
    <p>Name: Alice</p>
    <p>Email: alice@example.com</p>
</app-card>



• The content inside <span card-title> goes into the header area.
• The rest of the content is projected into the body area.
• This gives a lot of flexibility while keeping the component's structure consistent.



4. Default content fallback


• If the parent doesn't provide anything, you can display a default message inside <ng-content>.

@Component({
    selector: 'app-message-box',
    template: `
        <div class="message-box">
            <ng-content>No message provided.</ng-content>
        </div>
    `,
    styles: [`.message-box { border: 1px dashed #888; padding: .5rem; }`],
    standalone: true,
})
export class MessageBoxComponent {}

<app-message-box></app-message-box>
<!-- Renders "No message provided." -->



• Anything written between <ng-content> tags acts as fallback content when the parent provides nothing.



5. Projecting content dynamically


• You can combine <ng-content> with Angular control flow directives like @if or @for to conditionally render projected content.

@Component({
    selector: 'app-section',
    template: `
        <div class="section">
            @if (visible) {
                <ng-content></ng-content>
            } @else {
                <p>(Hidden)</p>
            }
        </div>
    `,
    standalone: true,
})
export class SectionComponent {
    visible = true;
}



• The projected content only appears when visible is true.



6. Lifecycle of projected content


• Angular provides special lifecycle hooks for when projected content appears or changes:
• ngAfterContentInit() — runs once when the content is first inserted.
• ngAfterContentChecked() — runs after every update to the projected content.

export class CardComponent implements AfterContentInit, AfterContentChecked {
    ngAfterContentInit() {
        console.log('Projected content initialized');
    }

    ngAfterContentChecked() {
        console.log('Projected content checked');
    }
}



• These hooks let your component react when the parent changes its projected data.

Create Template Fragments with <ng-template>

1. Introduction


• The <ng-template> tag defines a chunk of HTML that Angular does not render right away.


• It is a template fragment — a block of markup that Angular can insert, reuse, or render later under certain conditions.


• It's often used for:
  • Conditionally showing or hiding parts of the template,
  • Customizing reusable components (like dialogs or cards),
  • Rendering content dynamically using ngTemplateOutlet.



2. Basic example


• Angular doesn't render an <ng-template> until you explicitly tell it to.

<ng-template>
    <p>This is hidden by default.</p>
</ng-template>



• The browser will not display anything — it's stored as a "template instruction" for Angular.
• To show it, you must render it manually using *ngIf or ngTemplateOutlet.



3. Using with *ngIf


• *ngIf can take an else block that points to an <ng-template>.

<div *ngIf="loggedIn; else loginPrompt">
    Welcome back, user!
</div>

<ng-template #loginPrompt>
    <p>Please log in to continue.</p>
</ng-template>

export class LoginExampleComponent {
    loggedIn = false;
}



• If loggedIn is false, Angular will render the loginPrompt template instead.
• The #loginPrompt gives the template a reference name.



4. Using with @for (or *ngFor)


• Every @for loop internally uses <ng-template> to repeat DOM fragments.
• You can also define your own template for each repeated item.

<ng-template #userTemplate let-name>
    <li>{{ name }}</li>
</ng-template>

<ul>
    @for (name of users) {
        <ng-container [ngTemplateOutlet]="userTemplate" [ngTemplateOutletContext]="{ $implicit: name }"></ng-container>
    }
</ul>

export class UserListComponent {
    users = ['Alice', 'Bob', 'Charlie'];
}



• The let-name variable receives the value passed by the context ($implicit: name).
• ngTemplateOutlet renders the same template multiple times with different data.



5. Rendering manually with ngTemplateOutlet


• You can insert a template manually anywhere in the DOM using <ng-container> and ngTemplateOutlet.

<ng-template #alertTemplate>
    <div class="alert">This is an alert message!</div>
</ng-template>

<ng-container [ngTemplateOutlet]="alertTemplate"></ng-container>



• ngTemplateOutlet acts like a function call — it "renders" the referenced template in that place.
• <ng-container> is a structural wrapper that doesn't create any extra HTML element.



6. Passing data into a template


• Templates can accept contextual data using the ngTemplateOutletContext input.
• You can define a variable in the template using let- syntax.

<ng-template #greetTemplate let-person>
    <p>Hello, {{ person }}!</p>
</ng-template>

<ng-container
    [ngTemplateOutlet]="greetTemplate"
    [ngTemplateOutletContext]="{ person: 'Hwangfucius' }">
</ng-container>



• This outputs: Hello, Hwangfucius!
• You can think of ngTemplateOutletContext as "passing parameters" to the template.



7. Using multiple templates dynamically


• You can switch between different templates based on component state.

<ng-template #loading><p>Loading...</p></ng-template>
<ng-template #success><p>Data loaded successfully!</p></ng-template>
<ng-template #error><p>Something went wrong.</p></ng-template>

<ng-container [ngTemplateOutlet]="currentTemplate"></ng-container>

export class TemplateSwitcherComponent {
    state: 'loading' | 'success' | 'error' = 'loading';

    get currentTemplate() {
        if (this.state === 'success') return this.success;
        if (this.state === 'error') return this.error;
        return this.loading;
    }

    @ViewChild('loading', { static: true }) loading!: TemplateRef<any>;
    @ViewChild('success', { static: true }) success!: TemplateRef<any>;
    @ViewChild('error', { static: true }) error!: TemplateRef<any>;
}



• This technique is useful for conditional UI — for example, showing loading spinners, error messages, or success content.