Personalized ngIf directive featuring an included alternate template

Question

Personalized ngIf directive featuring an included alternate template

In Angular applications, it is a common practice to use the ngIf directive with Observables to display data and provide an else template to show a placeholder while the data is loading.

<data-view *ngIf="data$ | async as data; else progress" [items]="data">
</data-view>

<ng-template #progress>
  <mat-icon></mat-icon>
  <mat-progress></mat-progress>
</ng-template>

However, this approach involves repetitive code for the else template, async pipe, and as clause. Is there a way to eliminate this boilerplate by using a custom directive like the following:

<data-view *ngWait="data$" items="data">
</data-view>

While I understand how to combine ngIf with the async pipe, I am struggling to figure out how to incorporate the else template into a custom directive.

angular typescript

Answer 1

Answer №1

To implement the createComponent function of ViewContainerRef within your structural directives, follow the code snippet below:

@Directive({
  selector: "{Your-Selector}"
})
export class StructuralDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private resolver: ComponentFactoryResolver
  ) {}

  @Input() {Your-Selector}: boolean;

  ngOnInit() {
    if (this.{Your-Selector}) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      let factory = this.resolver.resolveComponentFactory({Your component that holds default message});
      this.viewContainer.createComponent(factory);
    }
  }
}

Don't forget to include

{Your component that holds default message}

in your entry components.

You can check out a demo on CodeSandbox for reference.

Answer 2

To implement the createComponent function of ViewContainerRef within your structural directives, follow the code snippet below:

@Directive({
  selector: "{Your-Selector}"
})
export class StructuralDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private resolver: ComponentFactoryResolver
  ) {}

  @Input() {Your-Selector}: boolean;

  ngOnInit() {
    if (this.{Your-Selector}) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      let factory = this.resolver.resolveComponentFactory({Your component that holds default message});
      this.viewContainer.createComponent(factory);
    }
  }
}

Don't forget to include

{Your component that holds default message}

in your entry components.

You can check out a demo on CodeSandbox for reference.

Personalized ngIf directive featuring an included alternate template

Answer №1

Similar questions

`The validation in Angular 12 is successful, yet the mat-input remains invalid.`

Updating An Angular Application from version 11 to version 12 Challenge

A guide to uploading multiple files in Angular 6 using the ADDMORE button

Navigating the complexities of defining conditions in routes within Angular/ionic applications may seem daunting,

How can one break down enum values in typescript?

Having trouble with the npm install command in an Angular 7 project?

What are the recommended best practices for displaying loading indicators, alerts, and logs in Ionic2?

Does Angular2 restrict directives to just one root element?

The Angular Tooltip feature is unable to interpret the characters "' '" or "' '"

Modifying the Iterator Signature

What are the appropriate scenarios to utilize the declare keyword in TypeScript?

Ways to resolve TypeScript type issues that are functioning correctly with one type but encountering errors when used with functions

What is the process for sending values to a component?

Oops! A mistake was made by passing an incorrect argument to a color function. Make sure to provide a string representation of a color as the argument next time

Angular 4 in combination with ngx-datatable is showing a 404 error for the @swimlane/ngx-datatable package

Unable to retrieve information from Mat Select option

Maximize the performance of displaying images

When using html2canvas in Angular, it is not possible to call an expression that does not have a call signature

Setting up an OR guard in NestJS is a crucial step in managing

Assign a class to the following element using an Angular 2 Directive