A guide on incorporating a component through services in Angular version 4

Question

A guide on incorporating a component through services in Angular version 4

Recently diving into Angular 4, I embarked on a mission to craft a dynamic component that showcases a loading indicator while crucial content is being fetched - think login credentials or data for a chart. Steering away from utilizing plugins, my main goal was to unravel the intricacies of crafting such a feature myself.

Using the CLI command ng g component loading, I kickstarted the creation process for the component. Subsequently, I hatched a service responsible for toggling the visibility of this component at will.

Within loading.component.ts:

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

@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss']
})
export class LoadingComponent implements OnInit {

  private loading = false;
  constructor() { }

  ngOnInit() {
  }

  public showLoad(){
    this.loading = true;
  }
  
  public hideLoad(){
    this.loading = false;
  }

}

loading.component.html delves into the visual rendition:

<div class ="box-loading" *ngIf="loading">
     <div id="loading"></div>
</div>

The orchestration stems from loading.service.ts:

import { Injectable } from '@angular/core';
import { LoadingComponent } from '../../loading/loading.component';

@Injectable()
export class LoadingService {

  constructor(private loading: LoadingComponent) { }

  public showLoading(){
    this.loading.showLoad();
  }
  
  public hideLoading(){
    this.loading.hideLoad();
  }

}

Despite invoking the showLoading() method yielding no results, my troubleshooting led me to test within my login page, spawning an error message:

Error: Template parse errors:
'app-loading' is not a known element:...

In efforts to combat this dilemma, I appended CUSTOM_ELEMENTS_SCHEMA to both loading.module.ts and app.module.ts:

loading.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@common';
import { LoadingComponent } from './loading.component';

@NgModule({
    declarations: [LoadingComponent],
    exports: [LoadingComponent],
    imports: [LoadingComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class LoadingModule{}

Venturing forward, how can I seamlessly embed my component within the HTML framework? Does any standard practice stipulate the correct approach for achieving this integration successfully? Am I treading the right path towards my end goal?

angular typescript angular-services angular-components

Answer 1

Answer №1

To establish communication between a service and a component, you can create a subject in the service which the component can subscribe to. Here's how you can do it:

In the service file:

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

@Injectable()
export class LoadingService {

  showLoading = new EventEmitter<state>();

  public showLoading(){
    this.showLoading.emit(true);
  }
  public hideLoading(){
    this.showLoading.emit(false);
  }

}

In the component.ts file, subscribe to the eventEmitter within the service.

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

@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss']
})
export class LoadingComponent implements OnInit {

  private loading = false;
  constructor(private loadingService: LoadingService) { }

  ngOnInit() {
      this.loadingService.showLoading.subscribe(
         (state) => {
           this.loading = state;
         }
      );
  }
}

Don't forget to add the LoadingService to the providers array in the AppModule.

...
@NgModule({
    declarations: [LoadingComponent],
    imports: [ //You don't declare your components here, only the external modules you use in your project// ],
    providers: [LoadingService]
})
...

Services are essential for handling data retrieval from servers, facilitating communication between components, and offering numerous other advantages. It's crucial to adhere to Angular design patterns when developing applications.

Answer 2

To establish communication between a service and a component, you can create a subject in the service which the component can subscribe to. Here's how you can do it:

In the service file:

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

@Injectable()
export class LoadingService {

  showLoading = new EventEmitter<state>();

  public showLoading(){
    this.showLoading.emit(true);
  }
  public hideLoading(){
    this.showLoading.emit(false);
  }

}

In the component.ts file, subscribe to the eventEmitter within the service.

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

@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss']
})
export class LoadingComponent implements OnInit {

  private loading = false;
  constructor(private loadingService: LoadingService) { }

  ngOnInit() {
      this.loadingService.showLoading.subscribe(
         (state) => {
           this.loading = state;
         }
      );
  }
}

Don't forget to add the LoadingService to the providers array in the AppModule.

...
@NgModule({
    declarations: [LoadingComponent],
    imports: [ //You don't declare your components here, only the external modules you use in your project// ],
    providers: [LoadingService]
})
...

Services are essential for handling data retrieval from servers, facilitating communication between components, and offering numerous other advantages. It's crucial to adhere to Angular design patterns when developing applications.

Answer 3

Answer №2

A more simplified approach would be to create a Loading component as shown below:

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

@Component({
    ...
})
export class LoadingComponentimplements OnInit {

    @Input() isLoading: boolean = false;

    constructor() {
    }

    ngOnInit() {
    }

}

You can include the mat-spinner from Angular Material in the HTML of the LoadingCompoenent

<div class="loading-shade" *ngIf="isLoading">
    <mat-spinner></mat-spinner>
</div>

Add the following CSS for styling:

.loading-shade {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

Make sure to register your LoadingCompoenent in the AppModule

@NgModule({
    declarations: [LoadingComponent]
})

To use the LoadingCompoenent, simply pass a loading variable as an @Input() in any component like this:

In the component's template where loading is required, add the selector for the LoadingCompoenent

// TYPESCRIPT

loading: boolean;

doStuff(){
  this.loading = true;
  ...
  this.loading = false;
}

// HTML

<app-loading [isLoading]="loading"></app-loading>

<h1>TITLE</h1>

Answer 4

A more simplified approach would be to create a Loading component as shown below:

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

@Component({
    ...
})
export class LoadingComponentimplements OnInit {

    @Input() isLoading: boolean = false;

    constructor() {
    }

    ngOnInit() {
    }

}

You can include the mat-spinner from Angular Material in the HTML of the LoadingCompoenent

<div class="loading-shade" *ngIf="isLoading">
    <mat-spinner></mat-spinner>
</div>

Add the following CSS for styling:

.loading-shade {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

Make sure to register your LoadingCompoenent in the AppModule

@NgModule({
    declarations: [LoadingComponent]
})

To use the LoadingCompoenent, simply pass a loading variable as an @Input() in any component like this:

In the component's template where loading is required, add the selector for the LoadingCompoenent

// TYPESCRIPT

loading: boolean;

doStuff(){
  this.loading = true;
  ...
  this.loading = false;
}

// HTML

<app-loading [isLoading]="loading"></app-loading>

<h1>TITLE</h1>

Answer 5

Answer №3

To dynamically load your LoadingComponent, follow these steps:

1) First, in the AppModule, register the LoadingComponent under entryComponents:

 @NgModule({
    declarations: [LoadingComponent],
    entryComponents:  [LoadingComponent],
    providers: [LoadingService]
})

2) Next, in the LoadingService, implement the methods show and hide as shown below:

import {
    ApplicationRef, ChangeDetectorRef, Component,       ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injector,
    } from '@angular/core';


@Injectable()
export class LoadingService {

  loadingCompRef: any;

  constructor(private loading: LoadingComponent,
               private componentFactoryResolver: ComponentFactoryResolver,
                private appRef: ApplicationRef,
                private injector: Injector,
) {}

  public showLoading(){
        // Create a component reference from the component
         this.loadingCompRef = this.componentFactoryResolver
            .resolveComponentFactory(component)
            .create(this.injector);

        // bind data to component’s inputs
        this.loadingCompRef.instance.loading= true;
    
        // Attach component to the appRef so that it's inside the ng component tree
        this.appRef.attachView(this.loadingCompRef.hostView);
        
        // Get DOM element from component
        const domElem = (this.loadingCompRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

        // Append Loading DOM element to the body
        document.getElementById('my-loader').appendChild(domElem);

  }
  
  public hideLoading(){
      this.loadingCompRef.instance.loading= false;
      this.appRef.detachView(this.loadingCompRef.hostView);
      this.loadingCompRef.destroy();
  }

}

For more information on dynamically loading components in Angular, refer to: https://angular.io/guide/dynamic-component-loader

Answer 6

To dynamically load your LoadingComponent, follow these steps:

1) First, in the AppModule, register the LoadingComponent under entryComponents:

 @NgModule({
    declarations: [LoadingComponent],
    entryComponents:  [LoadingComponent],
    providers: [LoadingService]
})

2) Next, in the LoadingService, implement the methods show and hide as shown below:

import {
    ApplicationRef, ChangeDetectorRef, Component,       ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injector,
    } from '@angular/core';


@Injectable()
export class LoadingService {

  loadingCompRef: any;

  constructor(private loading: LoadingComponent,
               private componentFactoryResolver: ComponentFactoryResolver,
                private appRef: ApplicationRef,
                private injector: Injector,
) {}

  public showLoading(){
        // Create a component reference from the component
         this.loadingCompRef = this.componentFactoryResolver
            .resolveComponentFactory(component)
            .create(this.injector);

        // bind data to component’s inputs
        this.loadingCompRef.instance.loading= true;
    
        // Attach component to the appRef so that it's inside the ng component tree
        this.appRef.attachView(this.loadingCompRef.hostView);
        
        // Get DOM element from component
        const domElem = (this.loadingCompRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

        // Append Loading DOM element to the body
        document.getElementById('my-loader').appendChild(domElem);

  }
  
  public hideLoading(){
      this.loadingCompRef.instance.loading= false;
      this.appRef.detachView(this.loadingCompRef.hostView);
      this.loadingCompRef.destroy();
  }

}

For more information on dynamically loading components in Angular, refer to: https://angular.io/guide/dynamic-component-loader

A guide on incorporating a component through services in Angular version 4

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing Angular 2+ to effectively manipulate the HTML Document Object Model with JavaScript in order to execute scripts

Looking for a JavaScript (Angular) event listener to trigger when closing pages and tabs

The object's type remains a mystery

Redirecting on the server side in Angular 2

Error encountered: The database is not found during the migration creation process in MikroORM

The data retrieved from the web API is not undergoing the necessary conversion process

Resolving the Issue of Premature Header Output in NodeAPI Using Angular

Fatal Error: Unable to resolve dependencies for ProductListComponent

The element is implicitly of type 'any' due to the fact that a 'string' expression cannot be used to index the Phaser type

What could be the reason for receiving the error message "Unidentified property 'payload' cannot be read" ?

Are there any @types available for browser extension objects that are interoperable?

The custom native date adapter is facing compatibility issues following the upgrade of Angular/Material from version 5 to 6

The implementation of enumerations in Angular's HTML pages

When attempting to loop through an Observable that is of type array using *ngFor, the error message "Cannot read property 'subscribe' of undefined

My unique VSCode extension performs flawlessly during debugging, but encounters issues once installed

I can't see the title text on my Ionic button, what should I do to fix this issue?

Updating the state of the Store using NGRX

Utilizing npm link with a TypeScript-written module: a guide for seamless development?

The service's EventEmmiter is failing to emit signals

A versatile method for transforming enums into arrays that can handle null values