Exploring the power of dynamic templates in Angular 4

Question

Exploring the power of dynamic templates in Angular 4

After exploring numerous blog posts and discussions, I have yet to discover a solution for my template dilemma. The issue revolves around our straightforward icon component, where users can specify the desired icon and size directly in the template:

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

@Component({
   selector: 'comp-icon',
   template: `
        <span class="{{ class }}" *ngIf="icon === 'error'" >
          <svg [attr.height]="size" viewBox="0 0 48 48" [attr.width]="size" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
        </span>
        <span class="{{ class }}" *ngIf="icon === 'success'" >
          <svg [attr.height]="size" viewBox="0 0 48 48" [attr.width]="size" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
        </span>
    `
})
export class IconComponent {
   @Input() icon: string;
   @Input() size: number;
   @Input() class: string;

   constructor() {
   }
}

The challenge lies in the repetitive nature of this setup and the need to incorporate custom SVG images from various applications using the library that employs this component. My current approach aims to convey the intended functionality like so:

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {Icons} from './icons';

@Component({
   selector: 'comp-icon',
   template: `
        <span class="{{ class }}">
            <ng-container [ngTemplateOutlet]="iconContent"></ng-container>
        </span>
    `
})
export class IconComponent implements OnInit {
   @Input() icon: string;
   @Input() size: number;
   @Input() class: string;

   @ViewChild('iconContent') iconContent: any;

   constructor() {
   }

   ngOnInit() {
       this.iconContent = (Icons.find(icon => icon.name === this.icon) || { name: '', content: '' }).content;
   }
}

Furthermore, the icons.ts file outlines the structure:

export interface IIcon {
    name: string;
    content: string;
}

export const Icons: IIcon[] = [
    {
        name: 'error',
        content: `<svg [attr.height]="{SIZE}" [attr.width]="{SIZE}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        </svg>`
    },
    {
        name: 'success',
        content: `<svg [attr.height]="{SIZE}" [attr.width]="{SIZE}" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        </svg>`
    },
];

Is it feasible to dynamically alter the contents of a component section, particularly an SVG element, using this method? While I've heard about directives that could potentially help, I haven't quite grasped how to implement them effectively.

angular typescript

Answer 1

Answer №1

If you're looking to bind properties, consider using innerHTML or creating a component based on Günter Zöchbauer's recommendation.

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

Another approach could involve defining icons in an array like this:

export const Icons: IIcon[] = [
    {
        name: 'error',
        width: '50px',
        height: '50px',
        viewBox: '0 0 48 48',
        xmlns: "http://www.w3.org/2000/svg"
    }
];

In your component's HTML, you can then do the following:

<svg [attr.width]="iconContent.width" [attr.height]="iconContent.height" [attr.viewBox]="iconContent.viewBox" [attr.xmlns]="xmlns"></svg>

Answer 2

If you're looking to bind properties, consider using innerHTML or creating a component based on Günter Zöchbauer's recommendation.

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

Another approach could involve defining icons in an array like this:

export const Icons: IIcon[] = [
    {
        name: 'error',
        width: '50px',
        height: '50px',
        viewBox: '0 0 48 48',
        xmlns: "http://www.w3.org/2000/svg"
    }
];

In your component's HTML, you can then do the following:

<svg [attr.width]="iconContent.width" [attr.height]="iconContent.height" [attr.viewBox]="iconContent.viewBox" [attr.xmlns]="xmlns"></svg>

Answer 3

Answer №2

To achieve this task correctly, I realized that utilizing ngComponentOutlet was the right approach from the start. Following guidance from this thread, I successfully implemented it in a similar fashion:

import { Compiler, Component, ElementRef, Input, NgModule, NgModuleFactory, OnInit, ViewChild } from '@angular/core';
import { IconsProvider } from './icons.provider';

@Component({
   selector: 'comp-icon',
   template: `
        <ng-container *ngComponentOutlet="dynamicIconComponent;
                        ngModuleFactory: dynamicIconModule;"></ng-container>
    `
})
export class IconComponent implements OnInit {
   @Input() icon: string;
   @Input() size: number;
   @Input() class: string;

   public dynamicIconComponent: any;
   public dynamicIconModule: NgModuleFactory<any>;

   constructor (private _iconsProvider: IconsProvider, private _compiler: Compiler) {
   }

   ngOnInit() {
      const selectedIcon: string = this._iconsProvider.getIcon(this.icon);

      if (selectedIcon != null) {
          this.dynamicIconComponent = this.createNewIconComponent(selectedIcon, this.class, this.size);
          this.dynamicIconModule = this._compiler.compileModuleSync(this.createIconComponentModule(this.dynamicIconComponent));
      }
   }

   private createIconComponentModule(iconComponentType: any) {
       @NgModule({
           imports: [],
           declarations: [
               iconComponentType
           ],
           entryComponents: [iconComponentType]
       })
       class RuntimeIconComponentModule {}

       return RuntimeIconComponentModule;
   }

   private createNewIconComponent(iconContents: string, iconClass: string, iconSize: number) {
       @Component({
           selector: 'dynamic-icon-component',
           template: `<span class="{{ iconClass }}">${iconContents}</span>`
       })
       class DynamicIconComponent implements OnInit {
           private iconContents: string;
           private iconClass: string;
           private size: number;

           ngOnInit() {
               this.iconContents = iconContents;
               this.iconClass = iconClass;
               this.size = iconSize;
           }
       }

       return DynamicIconComponent;
   }
}

I am grateful for the valuable input and suggestions that eventually led me to discover the solution. Thanks.

Answer 4

To achieve this task correctly, I realized that utilizing ngComponentOutlet was the right approach from the start. Following guidance from this thread, I successfully implemented it in a similar fashion:

import { Compiler, Component, ElementRef, Input, NgModule, NgModuleFactory, OnInit, ViewChild } from '@angular/core';
import { IconsProvider } from './icons.provider';

@Component({
   selector: 'comp-icon',
   template: `
        <ng-container *ngComponentOutlet="dynamicIconComponent;
                        ngModuleFactory: dynamicIconModule;"></ng-container>
    `
})
export class IconComponent implements OnInit {
   @Input() icon: string;
   @Input() size: number;
   @Input() class: string;

   public dynamicIconComponent: any;
   public dynamicIconModule: NgModuleFactory<any>;

   constructor (private _iconsProvider: IconsProvider, private _compiler: Compiler) {
   }

   ngOnInit() {
      const selectedIcon: string = this._iconsProvider.getIcon(this.icon);

      if (selectedIcon != null) {
          this.dynamicIconComponent = this.createNewIconComponent(selectedIcon, this.class, this.size);
          this.dynamicIconModule = this._compiler.compileModuleSync(this.createIconComponentModule(this.dynamicIconComponent));
      }
   }

   private createIconComponentModule(iconComponentType: any) {
       @NgModule({
           imports: [],
           declarations: [
               iconComponentType
           ],
           entryComponents: [iconComponentType]
       })
       class RuntimeIconComponentModule {}

       return RuntimeIconComponentModule;
   }

   private createNewIconComponent(iconContents: string, iconClass: string, iconSize: number) {
       @Component({
           selector: 'dynamic-icon-component',
           template: `<span class="{{ iconClass }}">${iconContents}</span>`
       })
       class DynamicIconComponent implements OnInit {
           private iconContents: string;
           private iconClass: string;
           private size: number;

           ngOnInit() {
               this.iconContents = iconContents;
               this.iconClass = iconClass;
               this.size = iconSize;
           }
       }

       return DynamicIconComponent;
   }
}

I am grateful for the valuable input and suggestions that eventually led me to discover the solution. Thanks.

Exploring the power of dynamic templates in Angular 4

Answer №1

Answer №2

Similar questions

What is the reason for an optional object property being assigned the 'never' type?

Encountering a type error when attempting to assign an interface to a property

Tips for retrieving an object from an array with Angular and Firestore

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

The absence of @angular/forms/FormsModule is causing issues

Is there a method in Angular to restrict change detection to only the current component and its descendant components?

Developing a Customized Filtering Mechanism in Angular 8

Dynamic content within an Angular Swiper

Error: Unable to access the property 'fn' of an undefined object in electron version 2 using Angular 6

(NG2-CHARTS) Unable to connect to the Chart Type as it is not recognized as a valid property for binding

Incorrect date generated by Moment.js from Unix timestamp

Using the double question mark operator in React JS and Typescript

Establishing a default value for a select using reactive forms

How can I use JavaScript to update the content inside HTML tags with a specific string?

What is the best way to create a universal function that can return a promise while also passing along event

Steering templateUrl Value Modification on the Go in Angular 2

Why are polyfills-es2015, vendor-es2015, main-es2015, and other files blocked from loading because the MIME type is not allowed (text/html

Icon positioned to the left within the text box

Utilize the power of PIXI.js to effortlessly convert your canvas into a high-quality image without encountering

What is the process for importing a .webp file into a TypeScript file to be utilized in an Angular project down the line?