Random Angular template string that does not contain a templateRef

Question

Random Angular template string that does not contain a templateRef

Could a string retrieved from an external resource, such as an http response, be passed as a dynamic template that binds to the component's instance without relying on TemplateRef?

Context: Consider having an AppComponent with at least one variable name, but lacking a predefined static template in the codebase. Instead, the HTML content will be fetched at runtime from an external source.

This template should be able to be injected and function like any normal template, with access to the name property.

httpClient.get('template').then(val=>{
// val: '<div> {{name}} </div>'
  this.template = val;
})

angular typescript

Answer 1

Answer №1

If you wish to achieve your desired outcome, it is imperative to compile the template. This process may introduce a level of complexity.

The code snippet for this scenario would resemble this:

@Component({
  selector: 'hello',
  template: '<div #container></div>',
})
export class HelloComponent implements AfterViewInit {
  @ViewChild('container', { read: ViewContainerRef, static: false })
  container: ViewContainerRef;

  constructor(private injector: Injector) {}

  ngAfterViewInit() {
    // Define the component using Component decorator.
    const component = Component({
      selector: 'test',
      template: '<div>This is the dynamic template. Test value: {{test}}</div>',
      styles: [':host {color: red}'],
    })(
      class {
        test = 'some value';
      }
    );

    // Define the module using NgModule decorator.
    const module = NgModule({ declarations: [component] })(class {});

    const componentRef = this.container.createComponent(component, {
      injector: this.injector,
      ngModuleRef: createNgModuleRef(module, this.injector),
    });
    setTimeout(() => (componentRef.instance.test = 'some other value'), 2000);
  }
}

View Live Demo on Stackblitz

Answer 2

If you wish to achieve your desired outcome, it is imperative to compile the template. This process may introduce a level of complexity.

The code snippet for this scenario would resemble this:

@Component({
  selector: 'hello',
  template: '<div #container></div>',
})
export class HelloComponent implements AfterViewInit {
  @ViewChild('container', { read: ViewContainerRef, static: false })
  container: ViewContainerRef;

  constructor(private injector: Injector) {}

  ngAfterViewInit() {
    // Define the component using Component decorator.
    const component = Component({
      selector: 'test',
      template: '<div>This is the dynamic template. Test value: {{test}}</div>',
      styles: [':host {color: red}'],
    })(
      class {
        test = 'some value';
      }
    );

    // Define the module using NgModule decorator.
    const module = NgModule({ declarations: [component] })(class {});

    const componentRef = this.container.createComponent(component, {
      injector: this.injector,
      ngModuleRef: createNgModuleRef(module, this.injector),
    });
    setTimeout(() => (componentRef.instance.test = 'some other value'), 2000);
  }
}

View Live Demo on Stackblitz

Random Angular template string that does not contain a templateRef

Answer №1

Similar questions

Understanding Angular 2 Testing: The Ultimate Guide to Implementing Async Function Calls

Issue with Ionic: The schema validation has encountered errors stating that the property 'class' is required for the data path ".builders['app-shell']"

Struggled with the implementation of a customized Angular filter pipe

Encountering a Problem with TypeScript Decorators

Does Vue.js have its own version of Angular's named templates feature?

Leveraging typegoose in a multitenant environment within the nestjs framework

Tips for mocking Dependent Modules in Jasmine when dealing with a plethora of dependencies in Angular 9

Tips on implementing zod schema types with remapped fields using the toZod method

Transforming numbers into arrays in JavaScript/TypeScript for Angular 7

What is the best way to utilize yarn in order to install a GitHub package that utilizes TypeScript and has not yet been compiled?

Add the specified HTML tag to the existing document. An error has occurred: HierarchyRequestError - The action would result in an invalid node

Switching from the HTTPS to HTTP scheme in Angular 2 HTTP Service

`Is there a way to manage date formats across all components using a single method in Angular?`

What is the correct way to define functions within an object using Typescript in this situation?

Placeholder for Images in Next.js with Typescript

Stop the inheritance of static components in a feature module by protecting the router-outlet

What is causing the malfunction in this overloaded function signature?

Develop an interactive React sidebar with changing elements

Is it possible to assign functions to each keystroke that does not correspond to a specific keybinding in Angular?

Change the router outlet to the currently selected tab