ng-template

问题 Does ng-template have any events when it is visible or active in the scope or is it possible to execute any method in such way to call it from the container? <ng-template (active/vissible)="callMethod()"> ... </ng-template> (Or) <ng-container *ngTemplateOutlet="mytemplate" ></ng-container> 回答1: One option could be (valid for any DOM object) is via ViewChildren's QueryList's changes. You mark any DOM element (or use it's type) - <div #myEl></div> Assign it: @ViewChildren('myEl') myEl:

问题 I have an AppComponent which holds a list of ShapeComponents . I implemented some Components which extends the ShapeComponent like LineComponent , CircleComponent , RectangleComponent . Each of them has its own ng-template with #shapeTemplate . In my app.component.html I want to iterate over the list of ShapeComponents and display each ng-template (from LineComponent , CircleComponent etc). so I have shapes: ShapeComponent[] = [] which hold a LineComponent, CircleComponent etc I want to

问题 I have an AppComponent which holds a list of ShapeComponents . I implemented some Components which extends the ShapeComponent like LineComponent , CircleComponent , RectangleComponent . Each of them has its own ng-template with #shapeTemplate . In my app.component.html I want to iterate over the list of ShapeComponents and display each ng-template (from LineComponent , CircleComponent etc). so I have shapes: ShapeComponent[] = [] which hold a LineComponent, CircleComponent etc I want to

问题 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]

问题 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 回答1: 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

问题 How is the following keyword used in angular2 ng-templates What is the purpose of $implicit in angular 2 templates? What is relationship between let-<attribute> and $implicit ? 回答1: You can define local variable on ng-template through let-name When angular creates template by calling createEmbeddedView it can also pass context that will be used inside ng-template Using the key $implicit in the context object will set it's value as default. So if we write: vcRef.createEmbeddedView(template, {

问题 If my fileInput element is in a normal div, then it works fine. But if I place it inside <ng-template></ng-template> then I am getting it undefined. Here is my code : HTML <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"></button> </div> <div class="modal-body"> <form #documentsForm="ngForm" (ngSubmit)="onEditSubscriberDocumentsSubmit

问题 I'm trying to output html in the following format for an array weekDaysHeaderArr whose length is 42 = 6 x 7. In other words I want to nest every 7 column div elements in a row div (6 total) like so. <div class="row"> <div class="col-md-auto"> <-- **repeated 7 times** </div> </div> <div class="row"> <div class="col-md-auto"> <-- **repeated 7 times** </div> </div> <div class="row"> <div class="col-md-auto"> <-- **repeated 7 times** </div> </div> <div class="row"> <div class="col-md-auto"> <-- *

问题 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

问题 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