ng-container

Angular 6: get reference to Components created with *ngFor inside ng-container tag

由 烂漫一生 提交于 2021-01-05 12:00:09
问题 I'using ng-container to iterate on a list and create components <ng-container *ngFor="let f of optionsList; let i = index;"> <!-- component--> <app-component #fieldcmp *ngIf="isAppComponent(f)" ></app-field> <!--another components--> <app-anoter-component1 *ngIf="isAnotherComponent1(f)"> </app-anoter-component1> ... <app-anoter-componentn *ngIf="isAnotherComponentn(f)"> </app-anoter-componentn> </ng-container> I would to list of References components inside ng-container. I tried to use

What IS ng-component in Angular?

由 空扰寡人 提交于 2020-05-14 19:59:15
问题 There are two very similar named directives (or attributes) in angular ng-component and ng-container If you put ng-component instead of ng-container you'll get all kinds of weird behavior - such as automatic insertion of a <router-outlet> . I've often wondered is there actually a purpose for ng-component in user code. Is it a legacy thing? Is it internal only? Does it solve any problems? 回答1: Angular routers render the components they have navigated to using a router outlet directive. Unless

What IS ng-component in Angular?

由 半世苍凉 提交于 2020-05-14 19:59:05
问题 There are two very similar named directives (or attributes) in angular ng-component and ng-container If you put ng-component instead of ng-container you'll get all kinds of weird behavior - such as automatic insertion of a <router-outlet> . I've often wondered is there actually a purpose for ng-component in user code. Is it a legacy thing? Is it internal only? Does it solve any problems? 回答1: Angular routers render the components they have navigated to using a router outlet directive. Unless

How to load the ng-template in separate file?

由 我是研究僧i 提交于 2020-04-10 08:31:32
问题 In below sample, I have used ng-template like below and it is working fine. Sample link: click here <ng-template #template let-dataSource=""> <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}} <span *ngIf="dataSource.templateHeader" class="e-login-content"> <button ejs-button cssClass="e-info">Sign In</button> </span> </ng-template> But I want to create a new file for ng-template content and I want to use it in another

How to load the ng-template in separate file?

由 吃可爱长大的小学妹 提交于 2020-04-10 08:29:59
问题 In below sample, I have used ng-template like below and it is working fine. Sample link: click here <ng-template #template let-dataSource=""> <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}} <span *ngIf="dataSource.templateHeader" class="e-login-content"> <button ejs-button cssClass="e-info">Sign In</button> </span> </ng-template> But I want to create a new file for ng-template content and I want to use it in another

Injecting component to ng-container? (load ng-template from file)

由 旧巷老猫 提交于 2019-12-24 05:16:07
问题 I'm trying to build a simple tabs-menu in my Angular app. parant.component.html: <div> <button (click)="selectTab(1)">Tab1</button> <button (click)="selectTab(2)">Tab2</button> <ng-container *ngTemplateOutlet="(selected == 1) ? template1 : template2"> </ng-container> <ng-template #template1>I'm page 1</ng-template> <ng-template #template2>I'm page 2</ng-template> </div> parant.component.ts: public selected = 1; public selectTab(tabName) { this.selected = tabName; } This is working fine, as

Angular 4 Dynamic form with nested groups

由 你离开我真会死。 提交于 2019-12-21 21:52:57
问题 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]

Bind to Template Reference Variable inside <ng-container> angular

由 允我心安 提交于 2019-12-12 20:05:14
问题 I have the following markup: <table> <thead> <th *ngFor="let column of columnNames"> <ng-container *ngIf="column === 'Column6'; else normalColumns"> {{column}} <input type="checkbox" #chkAll /> </ng-container> <ng-template #normalColumns> {{column}} </ng-template> </th> </thead> <tbody> <tr> <td *ngFor="let model of columnValues"> <ng-container *ngIf="model === 'Value6'; else normal"> {{model}} <input type="checkbox" [checked]="chkAll?.checked" /> </ng-container> <ng-template #normal> {{model

Angular 7 Mapping object with array of object to mat table

由 百般思念 提交于 2019-12-12 18:28:00
问题 I am trying to map one of my object to mat-table . Input object from Web API is as follows : [ { "inventoryId": 1004, "inventoryName": "Red Shirt Material", "dateReport": [ { "date": "2019-03-04T19:15:16.828", "quantity": 109.9 }, { "date": "2019-03-09T10:36:12.198", "quantity": 26.6 } ] }, { "inventoryId": 1003, "inventoryName": "Blue Pant Material", "dateReport": [ { "date": "2019-03-04T19:15:16.828", "quantity": 64.4 }, { "date": "2019-03-09T10:36:12.198", "quantity": 8 } ] } ] HTML code

Angular 4 Dynamic form with nested groups

由 ぐ巨炮叔叔 提交于 2019-12-04 14:58:32
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
订阅 ng-container