ng-template

I'm trying to mock up a dynamic set of questions. Think of a quiz, where one question is multiple choice, the second is single answer, the third is yes no..etc. Using angular 4.1, I thought that templating with ngTemplateOutlet would be the best way to go for this, the idea being that I can style all the checkboxes to be the same, and all the radiobuttons the same etc. @Component({ selector: 'my-component', template: ` <div *ngFor="let item of items"> <ng-template [ngTemplateOutlet]="item.type" [ngOutletContext]="{ item: item }"></ng-template> </div>` }) export class MyComponent { @Input()

angular2 how to use ng-template from a different file? When I place the ng-template within the same HTML where I use it works but when I move ng-template into a separate file then it won't work. Is there a way to move ng-template into its own file and use it in different html file? info-message.html <ng-template #messageTemplate> Hi </ng-template> <ng-container *ngTemplateOutlet="messageTemplate;"></ng-container> above is working fine because ng-template and the usage is in same file message-template.html <ng-template #messageTemplate> Hi </ng-template> info-message.html <ng-container

I want to generate a reactive form from the tree structure. Here is the code that creates the form items (form groups and controls). For the controls nested in form group it I use a recursive template. import { Component, Input, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; @Component({ selector: 'form-item', template: ` <ng-container [formGroup]="form"> <ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments }"></ng

I'm getting this warning: The <template> element is deprecated. Use <ng-template> instead (" [attr.tabIndex]="-1" [ngClass]="{'k-item': true}"> [WARNING ->]<template *ngIf="template" [templateContext]="{ when using angular 4, is this being taken care of for the release version? thanks You need to take care of that. You need to modify your code and change all occurences of <template> to <ng-template> <template> caused conflicts with other usages of the <template> tag, therefore the Angular team changed it to use <ng-template> for Angular purposes. It's a breaking change, therefore they didn't

I want to get the innerHTML of ng-template to my component. Something like HTML <my-comp [template]="myTemplate"></my-comp> <ng-template #myTemplate></ng-template> TS export class MyComponent implements OnInit { @Input() template: string | TemplateRef<any>; ngOnInit(){ console.log(this.template); } } Since you only require a shell into which a template will be injected, consider using a Directive instead of a component. @Directive({ selector: '[template-host]' }) export class HostDirective{ @Input('template-host') set templateHtml(value){ this.hostElement.innerHTML = value; } private

I've got an angular 4 page including a ng-bootstrap modal. My code looks like this. foo.html [...] <button class="btn btn-sm btn-secondary material-icons" (click)="open(content)">search</button> <ng-template #content let-c="close" let-d="dismiss"> content in here </ng-template> [...] foo.ts [...] constructor(private modalService: NgbModal) { } [...] open(content) { let options: NgbModalOptions = { size: 'lg' }; this.modalService.open(content, options); } [...] Now when I click the button the modal opens. What I want to do now is open the model on ngChanges. ngOnChanges(changes: any) { open