Components

File Structure

Components have some default filenames:

• <component-name>.component.html: An HTML template of what will be rendered on the page.

• <component-name>.component.ts: Typescript file to define behavior.

• <component-name>.component.css: File with component specific CSS.

• <component-name>.component.spec.ts: File with the component's tests.

Generate Component (CLI)

ng generate component <component-name> <options>

ng g c <component-name> <options>

Additional Options (Flags)

--prefix <prefix-name>	To auto configure a custom prefix for the Component, instead of app
--export <boolean>	The declaring NgModule exports this component
--inline-template <boolean>	To not create HTML file, and use inline template
--inline-style <boolean>	To not create CSS file, and uyse inline style
--standalone <boolean>	To create the component as standalone
--type <type-name>	To add new <component-name>.<type-name>.ts file with specified type-name

Best Practices

• Perform complex initializations outside of the constructor.

  • Components should be cheap and safe to construct.

  • You should not, for instance, fetch data in a component constructor.

  • A good place for complex or async logic is in ngOnInit.

• Set up the component after Angular sets the input properties.

  • Constructors should do no more than set initial local variables to simple values.

  • Keep in mind that a directive's data-bound input properties are not set until after construction.

    • If your need to initialize the directive based on those properties, set them on ngOnInit.

• Cleaning up on instance destruction.

  • You can put clean up logic in ngOnDestroy, the logic that must run before Angular destroys the directive.

  • Free resources that won't be garbage-collected automatically like:

    • Unsubscribe from Observables and DOM events.

    • Stop interval timers.

    • Unregister all callbacks that the directive registered with global or application services.

• Prefer decorating @Input and @Output over getters and setters, and avoid using aliases on them.

• Delegate complex logics to Services.

Code Structure

By default, a component's styles only affect elements defined in that component's template.

It is optional to write template and styles in separate files.

Angular creates an instance of the component for every matching HTML element it encounters.

@Component decorator

// This import will make possible to use the decorator
import { Component } from "@angular/core";

// This decorator identifies the class immediatly below it as a component, and provides the template related metadata.
@Component({
    selector: "app-component-name",

    // You can specify the files of template and CSS with
    templateUrl: "./<component-file>.component.html",
    styleUrl: "./<component-file>.component.css",
    // or
    styleUrls: ["./<component-file>.component.css"],

    // You can also set the content inline with
    template: "<h1>Hello World!!</h1>",
    styles: ["h1 { font-weight: normal; }"],

    /*
        To create Standalone components use these options.
        To specify the components dependencies use the imports.
            Standalone components can imports other Standalone components, directives, pipes, and existing NgModules.
    */
    standalone: true,
    imports: [],
})
export class ComponentName {
    // This is the component behaviour, where all the typescript goes
}

Creating the Component Selector

Every Component defines a CSS Selector that determines how the component is used.

• Angular matches selectors statically at compile-time.

• An element can match exactly one component selector.

• Component selectors are case-sensitive.

When prefixing the name of a selector, NEVER use the prefix ng. (As they may conflict with Angulars own ones)

Declare a Component with one of 3 types of selectors:

Selector Type	Description	Example
Type Selector	Matches elements based on their HTML tag name, or node name	profile-photo
Attribute Selector	Matches elements based on the presence of an HTML attribute and, optionally, an exact value for that attribute	[dropzone] [type="reset"]
Class Selector	Matches elements based on the presence of CSS class	.menu-item

You should take advantage of the type of selector to choose depending on the type of Component you are building.

For instance:

• Use a Type selector, when building Components that will have HTML.

• Use Attribute or Class when only extending a standard HTML element, this approach allows consumers of the component to directly use all the standard element's API without extra work.

:not pseudo-class

Angular support using :not() pseudo-class in selectors, for narrowing down which elements matches the selector.

@Component({
    selector: '[dropzone]:not(textarea)',
})

Combining Selectors

You can combine multiple selectors by concatenating them.

Also you can define multiple selectors for the same Component, with a comma-separated list:

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

Styling Components

Encapsulation

Every Component has a view encapsulation setting that determines how the framework scopes a component's style.

The @Component provides the encapsulation option to control how the encapsulation is applied for the component styles, for each component.

ViewEncapsulation.ShadowDom

• Encloses the component's view inside a ShodowRoot, applying the styles in an isolated manner.

• This mode strictly guarantees that only that Component's style apply to elements inside it. (Global styles won't work inside)

• Using this mode, however, impacts more than just style scoping. It affects event propagation, interaction the <slot> and how browser developer tools show elements.

ViewEncapsulation.Emulated (default)

• Angular modifies the component's CSS selectors so that they are only applied to the component's View, emulating the Shadow DOM behavior.

• Globally defined styles may still affect elements inside the Component.

• You can "disable" the encapsulation mode for a specific class in a Component by using the pseudo-class ::ng-deep, turning this class global. (Strongly discouraged)

ViewEncapsulation.None

• Will not apply any type of encapsulation, meaning that any styles specified for the component are actually globally applied.

• This mode is essentially the same as including the styles into the HTML itself.

Components can use different encapsulations. BUT this is not encouraged or recommended.

Referencing external style files

Components may use <link> element to reference CSS files.

Additionally, inside the CSS you may use @import rule for that.

Angular will treat these references as external styles, and they are not affected by emulated view encapsulation.

input()

To receive data from other Components. (They are like props in other frameworks)

@Component({ ... })
export class CustomSlider {
    // An input named 'value' with a default value of '0'.
    // It's type will also be infered IF a default value was provided.
    value = input(0);
    
    // Explicitly define the type <number | undefined> because the value may not be set.
    value = input<number>();
}

<!-- Pass a value of 50 -->
<custom-slider [value]="50" />

<!-- Pass no value, so the default value of zero will be used -->
<custom-slider />

Angular records inputs statically at compile-time, so they cannot be added or removed at run-time.

When extending a Component class, it's inputs are inherited by the child class.

The input function returns a InputSignal. So you read their values by calling the signal.

@Component({ ... })
export class CustomSlider {
    value = input(0);
    console.log(`Value: ${this.value()}`);
}

Signals created by input are read-only.

Required input

It is a option to enforce that a given input must always have a value.

Required inputs do not automatically include undefined in type list of the input.

@Component({ ... })
export class CustomSlider {
    // Also since they are required, you cannot pass a default value.
    value = input.required<number>();
}

input transforms

Specify a transform function to change the value of an input when it's set by Angular.

The most common use-case for input transforms is to accept a wider range of value types in templates, often including null and undefined.

These transform function must be statically analyzable at build-time, meaning you cannot set transform functions conditionally or as the result of an expression evaluation.

Also they should always be pure functions. (Relying on state outside of the transform function can lead to unpredictable behavior)

@Component({ ... })
export class CustomClider {
    // Where `trimString` is an external function
    label = input('', { transform: trimString })
    
    // Or by using anonymous functions
    label = input('', { transform: (value: string | undefined) => value?.trim() ?? '' })
}

You can use them for type checking or value transformation like

widthPx = input<string>('', { transform: (value: number) => `${value}px` });

Angular Built-in Transformations

Angular includes two built-in transformation functions for coercing values to boolean or numbers.

• booleanAttribute: The presence of the attribute (even if empty string) indicates a true value, unless specific "false" value was given.

• numberAttribute: Will attempt to parse given value to a number, producing NaN otherwise.

input Aliases

@Component({ ... })
export class CustomSlider {
    value = input(0, { alias: 'sliderValue' });
}

<custom-slider [sliderValue]="50" />

Two-way binding input

Since input only creates signals that are read-only, you can overcome this limitation with two-way binding your inputs with model() inputs.

Specifying input inside @Component decorator

Can be useful when a component inherits a property from a base class.

// `CustomSlider` inherits the `disabled` property from `BaseSlider`.
@Component({
    inputs: [
        'disabled'
        // aliasing the input name
        'disabled: sliderDisabled'
    ],
})
export class CustomSlider extends BaseSlider {}

output()

Components emit data to the outside (defining custom events), by assigning a property to the output function.

@Component({ ... })
export class ExpandablePanel {
    panelClosed = output<void>();
}

<expandable-panel (panelClosed)="savePanelState()" />

The output function returns an OutputEmitterRef. You can emit an event by calling emit method on the OutputEmitterRef.

this.panelClosed.emit();

Angular custom events do not bubble up the DOM.

When extending a Component class, output are inherited by the child class.

Avoid chooding output names that collide with events on DOM elements.

Avoid adding prefixes for component output like you would with component selectors. (Like on)

Always use cammelCase.

Emitting event data

You can pass data when calling emit.

export class ExpandablePanel {
    // The type of data emited must be set
    panelClosed = output<boolean>();
    panelClosed = output<{ pointerX: number, pointerY: number }>();

    ...
    // You can emit primitive values.
    this.panelClosed.emit(true);

    // You can emit custom event objects
    this.panelClosed.emit({
        pointerX: 123,
        pointerY: 456,
    });
    ...
}

To have access to this data in the Parent Component, use the $event variable.

<expandable-panel (panelClosed)="savePanelState($event)" />

Using aliases in output

output() accepts a parameter that lets you specify a different name for the event in a template.

panelClosed = output<void>({ alias: 'closed' });

<expandable-panel (closed)="savePanelState()" />

Specifying outputs inside @Component decorator

Can be useful when a component inherits a property from a base class.

// `CustomSlider` inherits the `disabled` property from `BaseSlider`.
@Component({
    outputs: [
        'valueChanged'
        // aliasing the output name
        'valueChanged: volumeChange'
    ],
})
export class CustomSlider extends BaseSlider {}

Subscribing to outputs Programatically

When creating a component dynamically, you can programmatically subscribe to output events from the component instance. The OutputRef includes a subscribe method.

const someComponentRef: ComponentRef<SomeComponent> = viewContainerRef.createComponent(/*...*/);

someComponentRef.instance.someEventProperty.subscribe(eventData => {
    console.log(eventData);
});

Angular will automatically clean up the subscription when myComp is destroyed.

Although you can subscribe, they are not an RxJS Observable, so you cannot use some operators methods on it.

Converting output to an RxJS Observable

You can alternatively convert it to a RxJs Observable with outputToObservable.

Don't forget to clean up, by manually unsubscribing from this Observable.

// Observable<string>
outputToObservable(this.myComp.instance.onNameChange)
    .pipe(...)
    .subscribe(...);

model()

Model inputs are a special type of input that enables a component to propagate new values back to its parent component.

You may pass default values to them and mark them as required just like a regular input().

They do not support input transforms.

@Component({ ... })
export class CustomSlider {
    value = model(0);
    
    increment() {
        this.value.update((oldValue) => oldValue + 10);
    }
}

@Component({
    template: `
        <custom-slider [(value)]="volume" />
    `
})
export class MediaControls {
    volume = signal(0);
}

In the example above, value and volume are in sync. Their values can be updated in any of the Components and they will have the same value. (Updates are propagated up and down)

Angular automatically and implicitly creates a corresponding output() for the model() created.

The output name is the same as the model name created but suffixed with "Change".

Angular also emits this change event whenever the model is updated by its set() or update() methods.

@Directive({ ... })
export class CustomCheckbox {
    // This automatically creates an output named "checkedChange".
    // Can be subscribed to using `(checkedChange)="handler()"` in the template.
    checked = model(false);
}

Host Element

The elements targeted by your component selectors do NOT act as placeholder and are NOT replaced when the page is rendered.

This means that the Host element IS rendered in the HTML.

Binding to the host element

A component can bind properties, attributes, and events to its host element.

It will add these properties to ALL the Components host elements in the application.

The newer way is to bind using host property on @Component.

@Component({
    host: {
        role: "slider",
        "[attr.aria-valuenow]": "value",
        "[tabIndex]": "disabled ? -1 : 0",
        "(keydown)": "updateValue($event)",
    },
})
export class CustomSlider {
    value: number = 0;
    disabled: boolean = false;
    updateValue(event: KeyboardEvent) {}
}

Using @HostBinding and @HostListener (Old way)

Prefer using the host property over this way with decorators.

These decorators exist exclusively for backward compatibility.

Binding collisions (Preference of Values)

When you use a component in a template, you can add bindings to that component instance's element. The component may also define host bindings for the same properties or attributes.

In these cases, the following rules determine which value wins.

• If both are static, the instance binding wins.

• If one is static and the other dynamic, the dynamic value wins.

• If both are dynamic, the component's host binding wins.

@Component({
    // This is the Instance binding
    host: {
        'role': 'presentation',
        '[id]': 'id',
    }
})

<!-- This is the Component's host binding -->
<profile-photo role="group" [id]="otherId" />

Host element access itself on it's own Component - With Service ElementRef

You can access the host element itself inside it's code by injecting the ElementRef.

Check more here #using-dom-apis-elementref.

@Component({
    selector: 'app-component'
    ...
})
export class Component {
    // Here you will have `app-component` reference
    hostEl = inject(ElementRef);
}

:host css selector

This is a special CSS class for Angular, to apply CSS styles to the rendered Host element.

They are typically used inside the Component's CSS file.

Any :host css defined will not work if the Styling Components Encapsulation is ViewEncapsulation.None. (To get around this you may also set a class to the host element)

Lifecycle

The Components lifecycle is a sequence of steps that happen between it's creation and it's destruction.

Each step represents a different part of Angular's process for rendering components and checking them for updates over time.

And it is tightly connected to how Angular checks your components for changes over time.

You can implement lifecycle hooks to run code during these steps.

Angular walks your application tree from top to bottom:

• Checking template bindings for changes.

• These lifecycles run while Angular is doing this traversal.

• This traversal vists each component exactly once, so you should always avoid making further state changes in the middle of the process.

They are also executed during server-side rendering and pre-rendering.

Lifecyle Sequence

Phase	Method	Summary
Creation	constructor	Runs when Angular instanciates the component
Change Detection	ngOnInit	Runs once after Angular initialized all the component's inputs.
Change Detection	ngOnChanges	Runs every time the component's inputs have changed
Change Detection	ngDoCheck	Runs every time this component is checked for changes
Change Detection	ngAfterViewInit	Runs once after the component's view has been initialized
Change Detection	ngAfterContentInit	Runs once after the component's content has been initialized
Change Detection	ngAfterViewChecked	Runs every time the component's view has been checked for changes
Change Detection	ngAfterContentChecked	Runs every time this component content has been checked for changes
Rendering	afterNextRender	Runs once the next time that all components have been rendered to the DOM
Rendering	afterRender	Runs every time all components have been rendered to the DOM
Destruction	ngOnDestroy	Runs once before the component is destroyed

The rendering methods will only be executed in browser environments.

ngOnInit

• Runs only once.

• Runs after Angular has initialized all the components inputs with their initial values.

• This step happens before the component's own template is initialized.

  • This means that you can update the component's state based on its initial input values.

ngOnChanges

• Runs after any component inputs have changed.

  • On initialization, the first ngOnChanges runs before ngOnInit.

• This step happens before the component's own template is checked.

  • This means that you can update the compoent's state based on its initial input values.

ngOnDestroy

• Runs just once right before the component is destroyed.

• Angular destroys a component when it is no longer shown on the page, such as being hidden by ngIf or upon navigating away.

DestroyRef

• As an alternative you can inject an instance of DestroyRef.

• And then register a callback to be invoked upon the component's destruction by calling the onDestroy method.

• You can pass the DestroyRef instance to functions or classes outside your component.

@Component({ ... })
export class UserProfile {
    constructor(private destroyRef: DestroyRef) {

    this.destroyRef.onDestroy(() => {
        console.log('UserProfile destruction');
    });
}

Using along with ngOnInit:

export class UserProfile implements OnInit {
    destroyRef = inject(DestroyRef);

    ngOnInit() {
        // Do stuff on init

        this.destroyRef.onDestroy(() => {
            // Do stuff on Component destroy
        });
    }
}

ngDoCheck

• Runs before every time Angular checks a component's template for changes.

  • This is called during every change detection run, so it does not run only if there was a change.

• You can use this lifecycle hook to manually check for state changes outside of Angular's normal change detection, manually updating the component's state.

• This method runs very frequently and can significantly impact your page's performance. (Avoid using whenever possible)

• During initialization, the first ngDoCheck runs after ngOnInit.

ngAfterViewInit

• Runs once after all the children in the component's template have been initialized.

• You can use it to read the results of view queries.

  • Attempting to change any state in this method result in an error.

ngAfterContentInit

• Runs once after all the children nested inside the component have been initialized.

  • It is called after content ng-content has been projected into view.

• You can use it to read the results of content queries.

  • Attempting to change any state in this method result in an error.

ngAfterViewChecked

• Runs every time the children in the component's template have been checked for changes.

• This method runs very frequently and can significantly impact your page's performance. (Avoid using whenever possible)

• You can use it to access the updated state of view queries.

  • Attempting to change any state in this method result in an error.

ngAfterContentChecked

• Runs every time the children nested inside the component have been checked for changes.

• This method runs very frequently and can significantly impact your page's performance. (Avoid using whenever possible)

• You can use it to access the updated state of content queries.

  • Attempting to change any state in this method result in an error.

afterRender & afterNextRender

• Lets you register a render callback to be invoked after Angular has finished rendering all components on the page into the DOM.

  • afterNextRender: Called once after the next change detection cycle.

    • Generally will be used to perform any one-time initialization, such as for third-party libraries, or for browser-only APIs.

  • afterRender: Called after every chhange detection cycle that follows.

• The execution of render callbacks are not tied to any specific component instance, but instead an application-wide hook.

• They must be called inside a injection context.

• They do not run during server-side rendering or during build-time pre-rendering.

export class Component {
    contructor() {
        afterRender(() => {
            // Do stuff
        });
    }
}

Referencing Component Children

A component can define queries that find child elements and read values from their injectors.

It's most commonly used to retrieve references to child components, directives, DOM elements and others.

Avoid directly writing state to child, parent or ancestor components.

Angular computes signal-based query results lazily, on demand. This means that query results are not collected unless there is a code path that reads the signal.

View Queries viewChild() viewChildren()

View queries retrieve results from the elements in the component's view. (The elements defined in component's own template)

Queries never pierce through component boundaries. View queries can only retrieve results from the component's template.

View queries traverse through Component's decendants.

If the query does not find a result, its value is undefined. (This may occur if the target element is hidden)

Angular keeps the result of viewChild() and viewChildren() up to date as your application state changes.

Their values become available after ngAfterViewInit lifecycle. Before this point, the value is undefined.

Ex.:

Query a single result with viewChild(), or multiple results with viewChildren(), which creates a QueryList that contains the query results.

@Component({
    selector: "custom-card-header",
})
export class CustomCardHeader {
    text: string;
}

@Component({
    selector: "custom-card",
    template: `
        <custom-card-header>Visit sunny California!</custom-card-header>
        <custom-card-header>Visit sunny San Jorge!</custom-card-header>
    `,
})
export class CustomCard {
    // You may pass a `Type Predicate` like a Component Class, in which will search elements of `custom-card-header`
    oneHeader = viewChild(CustomCardHeader);
    
    // Which will return all the results
    multipleHeaders = viewChildren(CustomCardHeader);

    ngAfterViewInit() {
        console.log(this.oneHeader()?.text);

        this.multipleHeaders().forEach((item) => {
            console.log(item?.text);
        });
    }
}

Ex.:

Also query by referencing a Reference Template Variable.

@Component({
    template: `
        <div #header>Visit sunny California!</div>
    `,
})
export class CustomCard {
    // Also search with a `String Predicate`
    oneHeader = viewChild<ElementRef>('header');
    multipleHeaders = viewChildren<ElementRef>('header');
    results = computed(() => this.oneHeader()?.text );
}

Content Queries contentChild() contentChildren()

Content queries retrieve results from the elements in the component's content. (The elements nested inside the component in the template where it's used)

These queried elements doesn't have to be in the Component Template.

Queries never piece through component boundaries. Content queries can only retrieve results from the same template as the component itself.

By default, content queries find only direct children of the component and do not traverse into descendants.

If the query does ot find a result, its value is undefined. (This may occur if the target element is hidden.)

Angular keeps the result of contentChild() and contentChildren() up to date as your application state changes.

Their values become available after ngAfterContentInit lifecycle. Before this point, the value is undefined.

Ex.:

@Component({
    selector: 'custom-toggle',
})
export class CustomToggle {
    text: string;
}

@Component({
    selector: 'custom-expando',
})
export class CustomExpando {
    oneToggle = contentChild(CustomToggle);
    
    // Which will return all the results
    multipleToggles = contentChildren(CustomToggle);

    ngAfterContentInit() {
        console.log(this.oneToggle()?.text);

        this.multipleToggles().forEach((item) => {
            console.log(item?.text);
        })
    }
}

Required Queries

By default if no results are found undefined is return, because of this undefined is included in the signal's return type.

In some cases where you know with certainty that a specific child is always available, and don't want the undefined automatically included in your variable type, use required.

@Component({ ... })
export class CustomCard {
    header = viewChild.required(CustomCardHeader);
}

Query Locators

The first parameter for view queries and content queries is a locator.

Most of the time you will use a component or directive as your locator. (But you can alternatively specify a string locator like #template-reference-variables-local-reference)

If more than one element defines the same template reference variable, the query retrieves the first matching one.

Angular does not support CSS selectors as locators.

@Component({
    template: `
        <button #save>Save</button>
        <button #cancel>Cancel</button>
    `,
})
export class ActionBar {
    saveButton = viewChild<ElementRef<HTMLButtonElement>>('save');
}

Using ProviderToken

For more advanced cases you can use any ProviderToken as a locator.

This lets you locate elements based on component and directive providers.

const SUB_ITEM = new InjectionToken<string>('sub-item');

@Component({
    providers: [{ provide: SUB_ITEM, useValue: 'special-item' }]
})
export class SpecialItem {}

@Component({ ... })
export class CustomList {
    subItemType = contentChild(SUB_ITEM);
}

Query Options

Options passed as second paramenter, and control how the query finds it's results.

Reading specific values from an element's injector

Content descendants

By setting descendants: true, you configure the query to traverse all descendants in the same template.

Queries however, never pierce into components to traverse elements in other templates.

View queries don't have this options because they always traverse into descendants.

@Component({ ... })
export class ActionBar {
    multipleToggles = viewContent(CustomToggle, { descendants: true });
}

ElementRef

Components can inject ElementRef to get a reference to the component's host element.

Avoid direct DOM manipulations.

Never directly manipulate the DOM inside of other Angular lifecycle hooks.

@Component({ ... })
export class ProfilePhoto {
    constructor(elementRef: ElementRef) {
        console.log(elementRef.nativeElement);
    }
}

Examples on when to use

• Managing element focus.

• Measuring element geometry, such as with getBoundingClientRect.

• Reading an element's text content.

• Setting up native observers as MutationObserver, ResizeObserver, or IntersectionObserver.

Inheritance

When a component extends another component, or directive, it inherits all the metadata defined in the base class's decorator.

This includes:

• selector

• template

• styles

• host bindings

• inputs

• outputs

• lifecycle methods

• any other settings

Forwarding Injected Dependencies

If a base class relies on dependency injection, the child class must explicitly pass these dependencies to super.

@Component({ ... })
export class ListboxBase {
    constructor(private element: ElementRef) { }
}

@Component({ ... })
export class CustomListbox extends ListboxBase {
    constructor(element: ElementRef) {
        super(element);
    }
}

Overriding Lifecycle Methods

If a base class defines lifecycle methods, and a child class that also implements the same method will override the base class's implementation by default.

If you want to preserve the base class's implementation, excplicitly call the method with super .

@Component({ ... })
export class ListboxBase {
    protected isInitialized = false;

    ngOnInit() {
        this.isInitialized = true;
    }
}
@Component({ ... })
export class CustomListbox extends ListboxBase {
    override ngOnInit() {
        super.ngOnInit();
    }
}

Programatically Rendering Components

There are two main ways do dynamically render a component.

NgComponentOutlet

To render components in a template.

Check more here.

@Component({ ... })
export class AdminBio {}

@Component({ ... })
export class StandardBio {}

@Component({
    template: `
        <p>Profile for {{user.name}}</p>
        <ng-container *ngComponentOutlet="getBioComponent()" />
    `
})
export class CustomDialog {
    @Input() user: User;

    getBioComponent() {
        return this.user.isAdmin ? AdminBio : StandardBio;
    }
}

ViewContainerRef

To render components in the typescript code.

• Use createComponent to dynamically create and render the component.

• When you create a new component like this, Angular appends it into the DOM as the next sibling of the component or directive that injected the ViewContainerRef.

@Component({ ... })
export class StandardBio {}

@Component({
    template: `
        <p>Profile for {{user.name}}</p>
    `
})
export class CustomDialog {
    constructor(private viewContainer: ViewContainerRef) {
        this.viewContainer.createComponent(StandardBio);
    }
}

Lazy Loading Components

To lazy load the Components in the Route: (loadComponent)

const routes: Routes = [...{ path: "employees", loadComponent: () => import("./path-to/employees.component").then((m) => m.EmployeesComponent) }];

Or you may also lazy load a Routes file, and with this you will lazy load all the components in that file: (loadChildren)

const employeesRoutes: Route[] = [
    // In the Employee Route file you import normally the Components
    { path: '' , component: EmployeesComponent},
    ...
]

const routes: Routes = [...{ path: "employees", loadChildren: () => import("./path-to/employees.routes.ts").then((m) => m.employeesRoutes) }];

Another option to lazy load is with Deferrable Views.

Advanced Component Configuration

ChangeDetectionStrategy

@Component accepts changeDetection that controls the component's change detection mode.

ChangeDetectionStrategy.default

• In this mode, Angular checks whether the component's DOM needs an update whenever any activity may have occurred.

ChangeDetectionStrategy.OnPush

• Is an optional mode that reduces the amount of checking Angular needs to perform.

• In this mode, the framework only checks if a component's DOM needs an update when:

  • A component input has changes as a result of a binding in a template.

  • An event listener in this component runs.

  • The component is explicitly marked for check, via ChangeDetectorRef.markForCheck or something that wraps it, like AsyncPipe.

• Additionally, when an OnPush component is checked, Angular also checks all of its ancestors components, traversing upwards the application tree.